CSS Cheat Sheet

1/1/1970

CSS Cheat Sheet

Basics

Cascading Style Sheet(CSS): it is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.

Syntax:

selector { property1:value1; property2: value2; ...}

/*  selector    Declaration      Declaration*/
     h1        {color:blue;     font-size:12px;}
/*                ^    ^           ^        ^
	         property value     property   value
*/

Selector Types:

  1. element Selector : <p> tag -> p selector
  2. id Selector : id=para -> #para1 selector
  3. class Selector: class-"center" -> .center selector
  4. Universal Selector : * Select all elements

Combinations of Selectors:

Note:

Three Ways to Insert CSS

  1. External CSS
<head>
<link rel="stylesheet" href="style.css">
</head>
/*style.css*/
body {  background-color: lightblue;}  
h1 {  color: navy;  margin-left: 20px;}
  1. Internal CSS
<head>
<style>
	body {  background-color: lightblue;}  
	h1 {  color: navy;  margin-left: 20px;}
</style>
</head>
  1. Inline CSS
<h1 style="color:blue;text-align:center;">Title</h1>  
<p style="color:red;">This is a paragraph.</p>

Note:

Comments

You can use comment inside /**/ anywhere in CSS Style region

p {  color: /*this is a
	multiple line
	comment*/ blue; }

Properties

CSS Color:

Properties : Text Color (color) , Background Color, Border Color Value Types : color names, or RGB, HEX, HSL, RGBA, HSLA values. 

{ 
	color, background-color, border-color : 
		/* Using Color Name*/
		Red, Green, Blue, Yellow, Orange, gray
		LightGray, darkgreen DarkGreen, Tomato DodgerBlue, 
		MediumSeaGreen, SlateBlue, 
		
		/* Using RGB Values */ rgb(255, 99, 71)
		/* Using HEX Values */ #ff6347,
		/* Using HSL Values */ hsl(9, 100%, 64%),
		/* Using RGBA Values */ rgba(255, 99, 71, 0.5)
		/* Using HSLA Values */ hsla(9, 100%, 64%, 0.5);
}
 
/* Note: This is for learning purposes, commas are not used in this way */

RGB Color Concept:

HSL Color Concept:

HEX Color Concept:

Note:

CSS Opacity:

Opacity property Add transparency to the element like Background, text, images, and all of its child elements inherit the same transparency.

{
	opacity:
		0.3 , 0 /* 0 to 1*/	
}

CSS Background

Background Color:

{ background-color: lightblue, red, #f00000, rgba(255,0,0) #abc, green; }

Background Image Properties:

{
	background-image: 
		url("paper.gif"), url("gradient_bg.png");
	
	background-repeat: /* repeats an image */
		repeat-x, no-repeat,  repeat-y;
 
	background-attachment: /*background image scroll/fixed */
		fixed, scroll;
		
	background-position: /* position an image */
		right top, down left;

Background Shorthand:

{ background: #ffffff url("img_tree.png") no-repeat right top; }
/* Order: color > image > repeat > attachment > position */

More Background Properties

{
	background-blend-mode
	background-clip
	background-size
	background-origin
	background-position
	background-position-x
	background-position-y
}

Shorthand Notes:

CSS Border

Border Specific Properties

{
	border-style : 
		dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden,
		dotted solid double; /* dotted top, solid left-right, double bottom*/
 
	border-width :
		5px, 2cm, 2pt, 2em, medium, thick, /*top-bottom-left-right*/
		5px 20px, /* 5px top-bottom, 20px left-right */
		25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */
 
	border-color :
		#ff0000,/* redtop-bottom-left-right*/
		red green blue yellow; /* red top, green right, blue bottom and yellow left */
}

Border Shorthand

{ border: 5px solid red}
/* Order: width > style(required) > color */

Border Specific Side Style

{
	border-bottom /* Shorthand Property on bottom */
	border-top-color /* color on top */
	border-left-style /* stle on left */
	border-right-width /*width on right*/
}

More Border Properties:

/* Cannot be applied on specific side */
{ border-radius : 5px }

Border 4 Sides -> Top + Bottom + Left + Right

CSS Margins

Margins are used to create space around elements, outside of any defined borders.

{ 
	margin: 
		25px 50px, /*Top, right, bottom, left*/
		auto, /* horizontally center the element within its container.*/
		inherit; /* Inherit from its parent */
}

Margin on Specific Side

{
	margin-top: 100px;  
	margin-bottom: 30%;  
	margin-right: 150pt;  
	margin-left: 80cm;
}

Margin Collapse Note:

CSS Padding

Padding is used to create space around an element's content, inside of any defined borders.

{ 
	margin: 
		25px 50px, /*Top, right, bottom, left*/
		auto, /* horizontally center the element within its container.*/
		inherit; /* Inherit from its parent */
}

Padding on Specific Side

/* Same as Margin*/
{
	padding-top: 50px;  
	padding-right: 30%;  
	padding-bottom: 50em;  
	padding-left: 80pt;
}

Note:

padding done ✅

CSS Box Model Basics

The total size of an element consists of:

Quick Revision ⚡

Properties Grouping

Units in CSS