CSS in 15 mins: tutorial

What is CSS ?

• CSS (Cascading Style Sheets) is a stylesheet language used for describing the look and formatting of a document or web page written in HTML.
• CSS allows you to apply styles to HTML elements, such as color, font, layout, and more.
• CSS apply styles to HTML elements using selectors and declarations

Example HTML code: styled “hello World”text to red color in paragraph tag

Output:

Consolidated CSS tag list:

CSS Tag	Description	Syntax	Example
font-size	Sets the font size of text	font-size: 20px;	p { font-size: 20px; }
color	Sets the text color	color: red;	p { color: red; }
background-color	Sets the background color of an element	background-color: yellow;	body { background-color: yellow; }
padding	Sets the space within an element	padding: 10px 20px;	p { padding: 10px 20px; }
margin	Sets the space outside an element	margin: 10px 20px;	p { margin: 10px 20px; }
border	Sets a border around an element	border: 1px solid black;	p { border: 1px solid black; }
width	Sets the width of an element	width: 500px;	div { width: 500px; }
height	Sets the height of an element	height: 300px;	div { height: 300px; }
text-align	Aligns the text within an element	text-align: center;	`p { text-align: center;

Additional CSS tags:

CSS Tag	Description	Syntax	Example
font-family	Sets the font-family of text	font-family: Arial;	p { font-family: Arial; }
font-weight	Sets the font weight	font-weight: bold;	p { font-weight: bold; }
text-decoration	Adds a text decoration	text-decoration: underline;	a { text-decoration: underline; }
display	Specifies the type of display for an element	display: inline;	span { display: inline; }
float	Specifies the position of an element	float: left;	img { float: left; }
clear	Specifies which sides of an element other floating elements are not allowed	clear: both;	.clearfix::after { clear: both; }
position	Specifies the type of positioning method used for an element	position: absolute;

CSS Tag	Description	Syntax	Example
left	Sets the left position of an absolutely positioned element	left: 10px;	div { position: absolute; left: 10px; }
top	Sets the top position of an absolutely positioned element	top: 20px;	div { position: absolute; top: 20px; }
right	Sets the right position of an absolutely positioned element	right: 30px;	div { position: absolute; right: 30px; }
bottom	Sets the bottom position of an absolutely positioned element	bottom: 40px;	div { position: absolute; bottom: 40px; }
overflow	Specifies what to do with content that overflows an element’s box	overflow: auto;	div { overflow: auto; }
visibility	Specifies whether or not an element is visible	visibility: hidden;	div { visibility: hidden; }
z-index	Specifies the stack order of an element	z-index: 1;	div { position: absolute; z-index: 1; }
list-style-type	Specifies the type of list-item marker	list-style-type: square;	ul { list-style-type: square; }
max-width	Sets the maximum width of an element	max-width: 500px;	img { max-width: 500px; }
min-height	Sets the minimum height of an element	min-height: 300px;	div { min-height: 300px; }

CSS Tag	Description	Syntax	Example
background-color	Specifies the background color of an element	background-color: yellow;	body { background-color: yellow; }
background-image	Specifies a background image for an element	background-image: url(bg.jpg);	body { background-image: url(bg.jpg); }
background-repeat	Specifies if/how a background image should be repeated	background-repeat: repeat-x;	body { background-image: url(bg.jpg); background-repeat: repeat-x; }
background-attachment	Specifies if/how a background image should scroll with the content	background-attachment: fixed;	body { background-image: url(bg.jpg); background-attachment: fixed; }
background-position	Specifies the position of a background image	background-position: right top;	body { background-image: url(bg.jpg); background-position: right top; }
border	A shorthand property for setting all border properties in one line	border: 1px solid black;	p { border: 1px solid black; }
border-color	Specifies the color of a border	border-color: blue;	p { border: 1px solid blue; }
border-style	Specifies the style of a border	border-style: dotted;	p { border: 1px dotted black; }
border-width	Specifies the width of a border	border-width: 2px;	p { border: 2px solid black; }
border-radius	Specifies the rounding of the corners of an element’s border	border-radius: 25px;	p { border: 1px solid black; border-radius: 25px; }

2D and 3D transformations

CSS Tag	Description	Syntax	Example
transform	Applies a 2D or 3D transformation to an element	transform: rotate(30deg);	div { transform: rotate(30deg); }
transform-origin	Specifies the origin of a 2D or 3D transformation	transform-origin: right top;	div { transform: rotate(30deg); transform-origin: right top; }
perspective	Specifies the distance from the z=0 plane that the 3D elements are displayed from	perspective: 500px;	body { perspective: 500px; }
perspective-origin	Specifies the origin for the perspective property	perspective-origin: right top;	body { perspective: 500px; perspective-origin: right top; }

Animation

CSS Tag	Description	Syntax	Example
animation	A shorthand property for setting all animation properties in one line	animation: spin 5s infinite linear;	div { animation: spin 5s infinite linear; }
animation-name	Specifies the name of an animation	animation-name: spin;	div { animation-name: spin; }
animation-duration	Specifies the duration of an animation	animation-duration: 5s;	div { animation-name: spin; animation-duration: 5s; }
animation-timing-function	Specifies the speed curve of an animation	animation-timing-function: linear;	div { animation-name: spin; animation-duration: 5s; animation-timing-function: linear; }
animation-delay	Specifies the delay before an animation starts	animation-delay: 2s;	div { animation-name: spin; animation-duration: 5s; animation-timing-function: linear; animation-delay: 2s; }
animation-iteration-count	Specifies the number of times an animation should run	animation-iteration-count: infinite;	div { animation-name: spin; animation-duration: 5s; animation-timing-function: linear; animation-iteration-count: infinite; }
animation-direction	Specifies the direction of an animation	animation-direction: reverse;	div { animation-name: spin; animation-duration: 5s; animation-timing-function: linear; animation-direction: reverse; }
animation-fill-mode	Specifies what styles will apply before/after an animation	animation-fill-mode: forwards;	div { animation-name: spin; animation-duration: 5s; animation-timing-function: linear; animation-fill-mode: forwards; }

Responsive Design

CSS Tag	Description	Syntax	Example
@media	A media query, used to apply CSS styles based on device characteristics such as screen size	@media (max-width: 600px) { … }	@media (max-width: 600px) { body { font-size: 12px; } }
min-width	Specifies the minimum width of an element	min-width: 600px;	@media (min-width: 600px) { body { font-size: 16px; } }
max-width	Specifies the maximum width of an element	max-width: 600px;	@media (max-width: 600px) { body { font-size: 12px; } }
min-height	Specifies the minimum height of an element	min-height: 400px;	@media (min-height: 400px) { body { background-color: lightgray; } }
max-height	Specifies the maximum height of an element	max-height: 400px;	@media (max-height: 400px) { body { background-color: lightgray; } }
display	Specifies the display behavior of an element	display: none;	@media (max-width: 600px) { nav { display: none; } }
width	Specifies the width of an element	width: 100%;	@media (max-width: 600px) { body { width: 100%; } }
height	Specifies the height of an element	height: 100%;	@media (max-height: 400px) { body { height: 100%; } }