Table of Contents

What is CSS?

CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be displayed
CSS saves a lot of work
It can control the layout of multiple web pages all at once
External style sheets are stored in CSS files

CSS Syntax : A CSS file consists of a selector and a declaration block as follows

H1 {
    color:red;
    font-size:15px;
   }

Here color & font-size are property of h1 where red & 15px are their values respectively. Here h1 is selector that you want to style.
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.
Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.

Example: In this example all <p> elements will be center-aligned, with a blue text color

<html>
<head>
<style>
      p {
          color: blue;
          text-align: center;
        }  
</style>
</head>
<body>
      <p>Hello BCA semester 1 Students!!!</p>
      <p>We are using css to style p tag</p>
</body>
</html>

p is a selector in CSS. It is nothing but HTML element you want to style: <p>
color is a property, and blue is the property value.
text-align is a property, and center is the property value.

Types of Style Sheets

There are 3 types of style sheets :

Internal CSS
Inline CSS
External CSS

Internal CSS

If you want to style only single HTML web page with unique style, an internal style sheet may be used.
The internal style is defined inside the <style> element, inside the <head>.

Example

<html>
      <head>
      <style>
              body {
                    background-color: cyan;
                    }
              h1 {
                     color: purple;
                     margin-left: 40px;
                 } 
      </style>
      </head>
      <body>
		<h1>This is Bhavan’s H J Doshi I T Institute Jamnagar</h1>
                <p>This is a paragraph demo.</p>
      </body>
</html>

Inline CSS

If you want a unique style for a single element, an inline style may be used to apply .
To use inline styles, add the style attribute to the relevant element.
The style attribute can contain any CSS property.
Inline styles are defined within the “style” attribute of the relevant element.

Example

<html>
<body>
       <h1 style="color:blue;text-align:center;">This is a heading</h1>
       <p style="color:red;">This is a paragraph.</p>
</body>
</html>

External CSS

Use an external style sheet, if you want to change the look of an entire website by changing just one file
Each HTML page must include a reference to the external style sheet file inside the <link> element, inside the head section.

Example

<html>
   <head>
       <link rel="stylesheet" href="style.css">
   </head> 
   <body>
	<h1>This is HJDOSHI Jamnagar</h1>
        <p>We are BCA sem 1 students</p>
    </body>
</html>

An external style sheet can be written in any text editor, and must be saved with a .css extension.
The external .css file should not contain any HTML tags.

Here is how the “style.css” file looks:

body {
  background-color: lightblue;
}
h1 {
  color: navy;
  margin-left: 20px;
}

CSS Selectors

CSS selectors are used to select the HTML elements you want to style.
There are mainly three types of selectors: Simple Element selector, Id selectors & Class selectors

The CSS element Selector

The element selector selects HTML elements based on the element name.

Example

<html>
      <head>
      <style>
      h1{
 	 	text-align:center;
                color:blue;
      }
      </style>
      </head>
      <body>
                <h1>This is heading</h1>
		<h1>I am also affected by heading style<h1>
     </body>
</html>

The CSS id Selector

The id selector uses the id attribute of an HTML element to select a specific element.
The id of an element is unique within a page, so the id selector is used to select one unique element.
To select an element with a specific id, write a hash (#) character, followed by the id of the element.

Example

<html>
      <head>
      <style>
      #p1 {
 	 	text-align: center;
                color: purple;
      }
      </style>
      </head>
      <body>
		<p id="p1">Hello BCA semester 1 students!!!</p>
                <p>This paragraph is not affected by the style.</p>
     </body>
</html>

The CSS class Selector

The class selector selects HTML elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the class name.
A class name cannot start with a number.

Example: In this example all HTML elements with class=”center” will be purple and center-aligned

<html>
      <head>
      <style>
      .center {
                 text-align: center;
                 color: purple;
      }
      </style>
      </head>
      <body>
	<h1 class="center">This is purple and center-aligned heading 1</h1>
        <p class="center">This is purple and center-aligned paragraph.</p> 
      </body>
</html>

Example: You can also specify that only specific HTML elements should be affected by a class

<html>
      <head>
      <style>
	      p.center {
		        text-align: center;
   		        color: purple;
			}
     </style>
     </head>
     <body>
	 <h1 class="center">This heading1 will not be affected</h1>
         <p class="center">This paragraph will be purple and center-aligned.</p> 
     </body>
</html>

Example: HTML elements can also refer to more than one class.

<html>
      <head>
      <style>
	     p.center {
		       text-align: center;
		       color: red;
	     }
	     p.large {  
                      font-size: 20px; 
             }
      </style>
      </head>
      <body>
  	   <h1 class="center">This heading will not be affected</h1>
	   <p class="center">This paragraph will be red and center-aligned.</p>
	   <p class="large">This paragraph has 20px font size</p>
	   <p class="center large">This paragraph will be red, center-aligned,     and in a large font-size.</p> 
      </body>
</html>

CSS Font Property

CSS Font property is used to control the look of texts. By the use of CSS font property you can change the text size, color, style and more. The font property is a shorthand property for:

font-style
font-variant
font-weight
font-size/line-height
font-family

Font-style property: The font-style property specifies the font style for a text. Values are normal, italic or oblique

Example

<html>
     <head>
     <style>
            p.a {  font-style: normal; }
            p.b {   font-style: italic; }
            p.c {   font-style: oblique; }
     </style>
     </head>
     <body>
            <h1>The font-style Property</h1>
	    <p class="a">This is a paragraph, normal.</p>
            <p class="b">This is a paragraph, italic.</p>
            <p class="c">This is a paragraph, oblique.</p>
     </body>
</html>

Font-variant property:

CSS font variant property specifies how to set font variant of an element. It may be normal and small-caps.
In a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted uppercase letters appears in a smaller font size than the original uppercase letters in the text.
The font-variant property specifies whether or not a text should be displayed in a small-caps font.

Syntax: font-variant: small-caps|normal

Font-weight property:

The font-weight property sets how thick or thin characters in text should be displayed.
It defines the weight of the font and specify that how bold a font is.
The possible values of font weight may be normal, bold, bolder, lighter or number (100, 200….. upto 900).

Syntax: font-weight: bold |bolder | lighter | 100 |..| 900

Font-size property: The font-size property sets the size of a font.

Syntax: font-size : xx-small | x-small | small | medium | large | x-large | xx-large | px | %

Font-family property:

The font-family property specifies the font for an element.
The font-family property can hold several font names as a “fallback” system.
If the browser does not support the first font, it tries the next font.

Syntax: font-family : “arial”,”book antique”

CSS Text Property

Color property

It is used to change the color of the text. Values are given by color name, hexadecimal code or an RGB value.

Syntax: Color: red | #ff00ff | rgb(255,0,0)

Text Alignment Property

It is used to set the horizontal alignment of a text.
A text can be left or right aligned, centered, or justified.
The following example shows center aligned, and left and right aligned text (left alignment is default if text direction is left-to-right, and right alignment is default if text direction is right-to-left)

Example:

<html>
      <head>
      <style>
             p.c{ text-align: center; }
             p.l{ text-align: left;   }
             p.r{ text-align: right;  }
     </style>
     </head>
     <body>
	     <p class="l">H J Doshi Jamnagar</p>
             <p class="r">H J Doshi Jamnagar</p>
             <p class="c">H J Doshi Jamnagar</p>
	     <p>The three paragraphs above are aligned left, right & center.</p>
     </body>
</html>

When the text-align property is set to justify, each line is stretched so that every line has equal width, and the left and right margins are straight.

Text Direction Property

The direction property can be used to change the text direction of an element.

Example

<html>
      <head>
      <style>	
              p.d{	
                  direction: rtl; 
              }
      </style>
      </head>
      <body>
         <p>This is the default text direction means left to right.</p>
         <p class="d">This is right-to-left text direction.</p>
      </body>
</html>

Vertical Alignment Property

The vertical-align property sets the vertical alignment of an element.

Example

<html>
      <head>
      <style>
             img.a {   vertical-align: baseline;   }
             img.b {   vertical-align: text-top;   }
             img.c {   vertical-align: text-bottom;}
	     img.d {   vertical-align: sub;        }
	     img.e {   vertical-align: super;      }
     </style>
     </head>
     <body>
           <h2>vertical-align: baseline - default:</h2>
           <p>An <img class="a" src="a.jpg" width="9" height="9"> Image default    alignment.</p> 
           <h2>vertical-align: text-top:</h2>
           <p>An <img class="b" src="a.jpg" width="9" height="9"> Image text-top alignment.</p> 
	   <h2>vertical-align: text-bottom:</h2>
           <p>An <img class="c" src="a.jpg" width="9" height="9"> Image Text-bottom alignment</p>
           <h2>vertical-align: sub:</h2>
           <p>An <img class="d" src="a.jpg" width="9" height="9"> image sub alignment.</p> 
	   <h2>vertical-align: sup:</h2>
           <p>An <img class="e" src="a.jpg" width="9" height="9"> image super alignment.</p>
     </body>
</html>

Text Decoration Property

The text-decoration property is used to set or remove decorations from text. The value text-decoration: none; is often used to remove underlines from links.

Example

<html>
      <head>
      <style>
            a {  text-decoration: none;}
      </style>
      </head>
      <body>
		<h1>Using text-decoration: none</h1>
		<p>A link with no underline:                                                        <a href="https://swatilathia.wordpress.com/">swatilathia.wordpress.com</a></p>
      </body>
</html>

Other Text decoration properties

<html>
      <head>
      <style>
             h2 {  text-decoration: overline;    }
             h3 {  text-decoration: line-through;}
             h4 {  text-decoration: underline;   }
      </style>
      </head>
      <body>
            <h1>The followings are different types of text decorations</h1>
            <h2>Overline text decoration</h2>
            <h3>Line-through text decoration</h3>
            <h4>Underline text decoration</h4>
      </body>
</html>

Text Transformation Property

The text-transform property is used to specify uppercase and lowercase letters in a text. It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word.

Example

<html>
      <head>
      <style>
             p.uppercase {  text-transform: uppercase;}
             p.lowercase {   text-transform: lowercase;}
             p.capitalize{   text-transform: capitalize;}
      </style>
      </head>
      <body>
            <p class="uppercase">This text is transformed to uppercase.</p>
            <p class="lowercase">THIS TEXT IS TRANSFORMED TO LOWERCASE.</p>
            <p class="capitalize">This text is capitalized.</p>
      </body>
</html>

Text Indentation

The text-indent property is used to specify the indentation of the first line of a text.

Example

<html>
      <head>
      <style>
             p{   
                text-indent: 50px;
                font-size:30px; 
              }
      </style>
      </head>
      <body>
            <p>Hi.. This is Swati Lathia. I work as a professor in Bhavan's H J     Doshi Information Technology Institute, Jamnagar. Currently I teach HTML, PHP & SEO in BCA students.I like to explore the world and love to do every adventurious activities.</p>
      </body>
</html>

Letter Spacing

The letter-spacing property is used to specify the space between the characters in a text.

Word Spacing

The word-spacing property is used to specify the space between the words in a text.

Example

<html>
      <head>
      <style>
             p{    
		word-spacing:10px;                
		font-size:30px;               
		}
	     h1
   	     {
		letter-spacing:10px;
             }
      </style>
      </head>
      <body>
            <p>This is Word Spacing</p>
	    <h1>This is letter spacing</h1>
      </body>
</html>

CSS Background Property

Background property has different types of properties to set colors, images, position, size & many more as follows

background-color property

It sets the background color of an element.
The background of an element is the total size of the element, including padding and border (but not the margin).
Use a background color and a text color that makes the text easy to read.

Syntax: Background-color: colorname | hexcode | rgb() | transparent

Opacity / Transparency Property

It specifies the opacity/transparency of an element.
Value ranges from 0.0 – 1.0.
The lower value means the more transparent & the higher value means the less transparent or opaque.

Example

<html>
	<head>
		<style>
			#p1{
				background-color:cyan;
			}
			#p2{
				background-color:cyan;
				opacity:0.1;
			}
			#p3{
				background-color:cyan;
				opacity:0.4;
			}
			#p4{
				background-color:cyan;
				opacity:0.6;
			}
			#p5{
				background-color:cyan;
				opacity:0.7;
			}
		</style>
	</head>
	<body>
		<p id=p1>Hello World</p><br><br>
		<p id=p2>Hello World</p><br><br>
		<p id=p3>Hello World</p><br><br>
		<p id=p4>Hello World</p><br><br>
		<p id=p5>Hello World</p><br><br>
	</body>
</html>

You can also set the transparency using RGB value. Let us take an example

<html>
	<head>
		<style>
			#p1{
				background-color:rgb(255,0,0,0.1);
			}
		</style>
	</head>
	<body>
		<p id=p1>Hello World</p><br><br>
	</body>
</html>

background-image Property

It sets one or more background images for an element.
By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.
The background of an element is the total size of the element, including padding and border (but not the margin).
Always set a background-color to be used if the image is unavailable.

Syntax: background-image: url(“imagename.extension”) | None;

Example

body {
 	background-image: url("flower.png");
        background-color: cyan;
}

You can also set two background images.

body {
  background-image: url("img1.jpg"), url("img2.jpg");
  background-color: #f1f1f1;
}

We can set two background images for the <body> element in which the first image appear only once (with no-repeat), and let the second image be repeated:

body {
  background-image: url("img1.gif"), url("img2.gif");
  background-repeat: no-repeat, repeat;
  background-color: rgb(200,100,0);
}

background-position Property:

It sets the starting position of a background image.
By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.

Syntax: background-position: left top | left center | left bottom | center top | center center | center bottom | right top | right center | right bottom | x% y% | px px

Example

body {
    background-image:url('img1.gif');
    background-repeat:no-repeat;
    background-position:left top;
}

background-repeat Property:

It sets if/how a background image will be repeated.
By default, a background-image is repeated both vertically and horizontally.
The background image is placed according to the background-position property.
If no background-position is specified, the image is always placed at the element’s top left corner.

Syntax: Background-repeat: no-repeat | repeat | repeat-x | repeat-y | space | round

background-attachment Property:

It sets whether a background image scrolls with the rest of the page, or is fixed.
Scroll: The background image will scroll with the page. This is default
Fixed: The background image will not scroll with the page

Syntax: background-attachment: scroll|fixed;

Example

body {
  background-image: url("img2.jpg");
  background-repeat: no-repeat;
  background-attachment: scroll;
}

background – Shorthand Property : It specifies all the background properties in one single property. Order must be :

background-color
background-image
background-repeat
background-attachment
background-position

Example

<html>
	<head>
		<style>
			body{
				background:#ffffff url("aol.png") no-repeat right top;
			}
		</style>
	</head>
	<body>
		<p>Hello World</p>
	</body>
</html>

CSS Border Property

The border property in CSS is used to style the border of a given element. This property is a combination of three other properties border-width, border-style, and border-color. It is used as shorthand property for all these properties.

Border-width can have following values : thin, medium, thick, 10px (in pixels).

Border-style can have following values : none, solid, dotted, dashed, inset, outset, ridge, groove, double, hidden.

border-color can have following values: color name, transparent, rgb(red value,green value,blue value)

Example : We have used all three property individually here

<html>
	<head>
		<style>
			#e1{
				border-color:purple;
				border-style:double;
				border-width:20px;
			}
		</style>
	</head>
	<body>
		<p id='e1'>Border Property Example</p>
	</body>
</html>

Output:

Border Property Example

We have used all three property individually here. You can use all these three property in one property: border. Look at following example.

<html>
	<head>
		<style>
			#e2{
                                /* style width color */
				border:double 10px red;
			}
		</style>
	</head>
	<body>
		<p id='e2'>Border short hand property Example</p>
	</body>
</html>

Output:

Border short hand property Example

border-bottom Property : It is a shorthand property for bottom border. It sets the style of the bottom border for a given element.
border-top Property : It is a shorthand property for top border. It sets the style of the top border for a given element.
border-left Property : It is a shorthand property for left border. It sets the style of the left border for a given element.
border-right Property : It is a shorthand property for right border. It sets the style of the right border for a given element.

Example:

<html>
	<head>
		<style>
			#e3{
				border-bottom:solid 5px red;
				border-top:dashed 5px red;
				border-left:double 5px red;
				border-right:dotted 5px red;
			}
		</style>
	</head>
	<body>
		<p id='e3'>Border for each side short hand property Example</p>
	</body>
</html>

Output:

Border for each side short hand property Example

Border-bottom-color Property : It set a color for the bottom border.
Border-top-color Property : It set a color for the top border.
Border-left-color Property : It set a color for the left border.
Border-right-color Property : It set a color for the right border.

Example : Without border-width & border-style , border-color does not work.

<html>
	<head>
		<style>
			#e4{
				border-bottom-color:red;
				border-top-color:green;
				border-left-color:orange;
				border-right-color:blue;
				border-style:solid;
				border-width:5px;
			}
		</style>
	</head>
	<body>
		<p id='e4'>Border Color for each side</p>
	</body>
</html>

Output:

Border Color for each side

Border-bottom-width Property: It sets a width for the bottom border.
Border-top-width Property: It sets a width for the top border.
Border-left-width Property: It sets a width for the left border.
Border-right-width Property: It sets a width for the right border.

Example:

<html>
	<head>
		<style>
			#e5{
				border-bottom-width:15px;
				border-top-width:10px;
				border-left-width:20px;
				border-right-width:5px;
				border-style:solid;
				border-color:purple;
			}
		</style>
	</head>
	<body>
		<p id='e5'>Border width for each side</p>
	</body>
</html>

Output:

Border width for each side

border-bottom-style Property: It sets a style for the bottom border.
border-top-style Property: It sets a style for the top border.
border-left-style Property: It sets a style for the left border.
border-right-style Property: It sets a style for the right border.

Example:

<html>
	<head>
		<style>
			#e6{
				border-bottom-style:double;
				border-top-style:dashed;
				border-left-style:dotted;
				border-right-style:solid;
				border-width:10px;
				border-color:darkblue;
			}
		</style>
	</head>
	<body>
		<p id='e6'>Border Style for each side</p>
	</body>
</html>

Output:

Border Style for each side

border-spacing Property: It sets the distance between the borders of adjacent cells of a table.

Example:

<html>
	<head>
		<style>
			table,td,th {
						border: 1px solid black;
			}
			#t1{
						border-spacing: 15px;
			}
			#t2 {
						border-spacing: 5px 30px;
			}
		</style>
	</head>
	<body>
		<table id="t1">
			<tr>
				<th>Firstname</th>
				<th>Lastname</th>
			</tr>
			<tr>
				<td>Lata</td>
				<td>Mageshkar</td>
			</tr>
			<tr>
				<td>Asha</td>
				<td>Bholse</td>
			</tr>
		</table>
		<br>
		<br>
		<table id="t2">
			<tr>
				<th>Firstname</th>
				<th>Lastname</th>
			</tr>
			<tr>
				<td>Lata</td>
				<td>Mageshkar</td>
			</tr>
			<tr>
				<td>Asha</td>
				<td>Bholse</td>
			</tr>
		</table>
	</body>
</html>

Output:

Firstname	Lastname
Lata	Mageshkar
Asha	Bholse

Firstname	Lastname
Lata	Mageshkar
Asha	Bholse

border-collapse Property : It sets whether table borders should collapse into a single border or be separated as in standard HTML.

Example : We have used border-spacing to check the spacing between cells when border is separate.

<html>
	<head>
		<style>
			table,td,th {
						border: 1px solid black;
			}
			#t3{
						border-collapse:separate;
						border-spacing:10px 40px;
			}
			#t4 {
						border-collapse:collapse;
			}
		</style>
	</head>
	<body>
		<table id="t3">
			<tr>
				<th>Firstname</th>
				<th>Lastname</th>
			</tr>
			<tr>
				<td>Lata</td>
				<td>Mageshkar</td>
			</tr>
			<tr>
				<td>Asha</td>
				<td>Bholse</td>
			</tr>
		</table>
		<br>
		<br>
		<table id="t4">
			<tr>
				<th>Firstname</th>
				<th>Lastname</th>
			</tr>
			<tr>
				<td>Lata</td>
				<td>Mageshkar</td>
			</tr>
			<tr>
				<td>Asha</td>
				<td>Bholse</td>
			</tr>
		</table>
	</body>
</html>

Output:

Firstname	Lastname
Lata	Mageshkar
Asha	Bholse

Firstname	Lastname
Lata	Mageshkar
Asha	Bholse

CSS List Property

There are two main list types in HTML:

<UL> – unordered lists – bullets are used to mark the list items
<OL> – ordered lists- numbers or letters are used to mark the list items

CSS list properties allow to do followings:

We can set different list item markers for ordered lists
We can set different list item markers for unordered lists
We can set an image as the list item marker
We can add background colors to lists and list items

list-style-type Property: It specifies the type of list item marker.
list-style-image Property: It specifies an image as the list item marker.

<html>
       <head>
       <style>
       ul.a {  list-style-type: disc;         }
       ul.b {  list-style-type: square;       }
       ol.c {  list-style-type: upper-roman;  }
       ol.d {  list-style-type: upper-alpha;  }
          .i{  list-style-image:url('a.jpg'); }
         .fs{  font-size:30px;                }
      </style>
      </head>
      <body>
		<p class="fs">Unordered List</p>
                <ul class="a fs">
                <li>Babu Rao Apttey</li>
                    <li>Raju</li>
                    <li>Shyam</li>
                </ul>
		<ul class="b fs">
                    <li>Kaliya</li>
                    <li>Gabbar Sinh</li>
                    <li>Jay</li>
                    <li>Veeru</li>
                </ul>
		<p class="fs">Example of ordered lists:</p>
                <ol class="c fs">
                    <li>Gujrati</li>
                    <li>Hindi</li>
                    <li>Rajasthani</li>
                </ol>
		<ol class="d fs">
                    <li>HTML</li>
                    <li>C language</li>
                    <li>Computer Fundamentals</li>
                </ol>
		<ul class="i fs">
                    <li>BCA</li>
                    <li>MCA</li>
                    <li>PGDCA</li>
                </ul>
       </body>
</html>

list-style-position Property: It specifies the position of the list-item markers (bullet points).
list-style-position: outside; – the bullet points will be outside the list item. The start of each line of a list item will be aligned vertically.
list-style-position: inside; – that the bullet points will be inside the list item. As it is part of the list item, it will be part of the text and push the text at the start

<html>
      <head>
      <style>
             ul.a {  list-style-position: outside;}
             ul.b {  list-style-position: inside; }
      </style>
      </head>
      <body>
	    This is an outside List Example<br>
            <ul class="a">
                 <li>BCA : Bechalor of Computer Application, A three year course   with a number of subjects like C, C++, Data structure, PHP, HTML & networking, Oracle, Computer Fundamentals, Computer Organization Architeture, JAVA, Asp.net, Search Engine Optimization, Android, Python, Data warehousing & Sql server</li>
                 <li>MCA</li>
                 <li>PGDCA</li>
           </ul>
	   This is an Inside List Example<br>
           <ul class="b">
                 <li>BCA : Bechalor of Computer Application, A three year course with a number of subjects like C, C++, Data structure, PHP, HTML & networking, Oracle, Computer Fundamentals, COmputer Organization Architeture, JAVA, Asp.net, Search Engine Optimization, Android, Python, Data warehousing & Sql server</li>
                <li>MCA</li>
                <li>PGDCA</li>
           </ul>
	</body>
</html>

list-style: This property is a shorthand property. It is used to set all the list properties in one declaration.

Example

<html>
      <head>
      <style>
             ul {   list-style: square inside url("a.jpg"); }
      </style>
      </head>
      <body>  
             <ul>
                  <li>BCA : Bechalor of Computer Application, A three year course with a number of subjects like C, C++, Data structure, PHP, HTML & networking, Oracle, Computer Fundamentals, Computer Organization Architecture, JAVA, Asp.net, Search Engine Optimization, Android, Python, Data warehousing & SQL server</li>
                 <li>MCA</li>
                 <li>PGDCA</li>
             </ul>	
     </body>
</html>

CSS Margin Properties

The CSS margin properties are used to create space around elements, outside of any defined borders.
There are properties for setting the margin for each side of an element (top, right, bottom, and left).
These properties are margin-top, margin-right, margin-bottom, margin-left.

All the margin properties can have the following values:

auto – the browser calculates the margin
length – specifies a margin in px, pt, cm, etc.
% – specifies a margin in % of the width of the containing element

Example

<head>
<style>
p{
  margin-top: 50px;
  margin-bottom: 100px;
  margin-right: 50px;
  margin-left: 50px;
  background-color:lightblue;
}
</style>
</head>
<body>
     <p>This paragraph has a top margin of 50px, a right margin of 50px, a bottom  margin of 100px, and a left margin of 50px.</p>
</body>

Margin Shorthand Property: In this property, all the margin properties are included in one go.

Example

<html>
<head>
<style>
p
{
  margin: 50px 50px 100px 100px;
  background-color: lightblue;
}
</style>
</head>
<body>
<p>This paragraph element has a top margin of 50px, a right margin of 50px, a bottom margin of 100px, and a left margin of 100px.</p>
</body>
</html>

Margin Property with three values: margin: 25px 50px 75px;

Top margin 25px , Right margin 50px , bottom margin 75px & Left margin 50 px

Margin Property with two values: margin: 25px 50px;

top and bottom margins are 25px , right and left margins are 50px

Margin Property with one value: margin: 25px;

All four margins are 25px

CSS comments

Comments in CSS are not displayed in the browser, but they can help document your source code.
Comments are used to explain the code, and may help when you edit the source code at a later date.
Comments are ignored by browsers.
A CSS comment is placed inside the <style> element, and starts with /* and ends with */:

/* This is a single-line comment */
p {
  color: red;
}

/* This is
 multi-line 
comment */

p {
  color: red;
}

CSS Pseudo Class

CSS pseudo class is a keyword added to a selector that specifies a special state of the selected elements. For example, :hover can be used to change a paragraph’s background color when user hovers over paragraph.

Syntax

selector:pseudo-class {
                 property:value;
}

Example : In this example, i have put an hover pseudo class for element selector P.

<head>
<style>
	p:hover{
		padding:40px;
		background-color:yellow;
	}
</style>
</head>
<body>
	<p>This paragraph changes its color when you point a mouse over it</p>
</body>

Anchor Pseudo Classes

Anchor tag <a> have following pseudo classes : link , visited, hover & active. Link will show you the color of the link , if you have not yet visited (clicked) the link, It will show you the color red (as per below example). If you have clicked the link, it will show you a link in yellow color. If you hover a mouse pointer over a link, it will show you a link in green color. If you click a link, for a fraction of a second it will show a link in cyan color.

<!DOCTYPE html>
<html>
<head>
<style>

a:link {
  color:red;//unvisited link color
}
a:visited {
  color: yellow;//visited link color
}
a:hover {
  color: green;//hover effect 
}
a:active {
  color: cyan;//active link color
}
</style>
</head>
<body>
	<a href="https://swatilathia.com/" target="_blank">Click Me and Check the colors</a></b></p>
</body>
</html>

CSS Pseudo-elements

A CSS pseudo-element is used to style specified parts of an element. It is used to style the first letter, or first line of an element. It is also used to insert the content before, or after, the content of an element or to give style when you select some element.

Syntax

selector::pseudo-element {
                         property: value;
}

The ::first-letter Pseudo-element : It is is used to add a special style to the first letter of a text.

Example

<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter{
  color:red;
  font-size:30px;
}
</style>
</head>
<body>
<p>The ::first-letter pseudo-element shows a special effect to the first character of a text</p>
<p>The ::first-letter pseudo-element shows a special effect to the first character of a text</p>
</body>
</html>

You can apply other properties to this pseudo element : font properties , color properties , background properties, margin properties, padding properties, border properties, text-decoration, text-transform

Multiple Pseudo-elements : You can combine more than one pseudo elements. Look at the following example.

<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
  color: blue;
  font-size: 40px;
}
p::first-line {
  color: red;
  font-variant: small-caps;
}
</style>
</head>
<body>
<p>Bhavan's Shri H J Doshi Jamnagar</p>
<p>Bhavan's Shri H J Doshi Jamnagar</p>
</body>
</html>

::before Pseudo-element : It is used to insert some content before the content of an element.

Example

<!DOCTYPE html>
<html>
	<head>
		<style>
			/* ::before pseudo element */
			p::before
			{
				content:" Hello Everyone!! ";
			}
			
			/* ::after pseudo element */
			h1::after
			{
				content:" Welcome here! ";
			}
		</style>
	</head>
	<body>
		<h1>Bhavan's H J Doshi Jamnagar</h1>
		<p>This is Swati Lathia</p>
		<p>How are you all?</p>
	</body>
</html>

::marker Pseudo-element : It is used to select the markers of list items.

Example

<!DOCTYPE html>
<html>
	<head>
		<style>
			/* you can select the marker of list  */
			::marker 
			{ 
				color:Purple;
				font-size:30px;
			}	
		</style>
	</head>
	<body>
		<ol>
			<li>HTML</li>
			<li>CSS</li>
			<li>Javascript</li>
			<li>Internet Introduction</li>
		</ol>
		<ul>
			<li>Language C</li>
			<li>OOP</li>
			<li>DS</li>
			<li>Java</li>
		</ul>
	</body>
</html>

::selection Pseudo-element: When you select any element, it will give the style accordingly.

Example

<!DOCTYPE html>
<html>
<head>
<style>
::selection 
{
  color:blue;
  background-color:cyan;
}
</style>
</head>
<body>
       <h1>H J DOSHI Jamnagar</h1>
       <p>Select any text here</p>
       <div>This is division tag</div>
</body>
</html>

CSS Media Query

In CSS (Cascading Style Sheets), a media query is a technique used to apply different styles to a webpage based on certain conditions, such as the size of the viewport or the type of device being used to view the page.
Media queries allow you to create responsive designs that adapt and look good on various screen sizes and devices, including desktops, tablets, and smartphones.
It is used to create Responsive Web Design (RWD). It uses the @media rule to include a block of CSS properties only if a certain condition is true.

Syntax

@media (condition) {
  /* Styles to apply when the condition is met */
}

Example

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color:cyan;
}
@media(max-width: 500px) 
{
  body 
  {
        background-color:gray;
	color:white;
	font-family:"lucida handwriting";
  }
}
</style>
</head>
<body>
       <p>Resize the browser window.When the width of this document is 500 pixels or less, the   background-color is "gray",font color is "white" & font face is "lucida handwriting", otherwise background color is "cyan".</p>
</body>
</html>

Responsive Web Design – Images

Using The width Property :
If the width property is set to a percentage and the height property is set to “auto”, the image will be responsive and scale up and down

Example

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 100%;
  height: auto;
}
</style>
</head>
<body>
      <img src="img.jpg" width="460" height="345">
      <p>Now Resize the browser window to check how the image will scale.</p>
</body>
</html>

CSS Tutorial

What is CSS?

Types of Style Sheets

CSS Selectors

CSS Font Property

CSS Text Property

CSS Background Property

CSS Border Property

CSS List Property

CSS Margin Properties

CSS comments

CSS Pseudo Class

Anchor Pseudo Classes

CSS Pseudo-elements

CSS Media Query

Responsive Web Design – Images