HTML Style CSS

    CSS is an acronym for Cascading Style Sheet, and it is a style sheet language that used for styling and colouring the HTML document. Using CSS, we can control the layout of the web-page, we can change the default colour, font, size, background, and many other properties of the web page.

    What is CSS?

    The main job of the Cascading Style Sheet(CSS) to format the layout of the web page. Using CSS, we can control how the web-page will be displayed on the browser. CSS allows us to change the default colour, font, size of text, spacing, positioning and many other layouts of the HTML elements .

    Types of CSS

    CSS is categories into three types based on how it is used in an HTML document.

    • Inline CSS
    • Internal CSS
    • External CSS

    Inline CSS

    In inline CSS, we apply CSS property to a specific HTML element, and that property remains to that element and does not affect any other similar element. Inline CSS is performed using style attribute and this attribute can be used with any HTML element.

    Example 

    <h3 style="color: green">Save Tree</h3>
<p style="background-color: green; color: white"> Save Planet</p>

    Output

    Save Tree

    Save Planet

    Internal CSS

    In Internal CSS, we define the layout for the complete HTML page. To perform the Internal CSS, we use the HTML <style> element, and generally we define it inside the <head> element. Unlike inline CSS in Internal CSS if we define the changes on an HTML element, then it will be applied on all the similar elements present in the document.

    Example 

    <!DOCTYPE html>
<html>
<head>
    <style>
       h3 {
	  color: green;
	   }
	p{
           background-color: green;
	   color: white; 
	 }
    </style>
</head>
<body>
<h3 >Save Tree</h3>
<p > Save Planet</p>
</body>
</html>

    Output

    Save Tree

    Save Planet

    External CSS

    External CSS used when we want to the same CSS styling to many HTML documents. In External CSS, we create a CSS file by extension .css and define all the CSS code in it. So we could import that file on different HTML documents. To use an external CSS in an HTML document we use the <link> element. Like <style> element <link> also defiend inside <head> element.

    Example

    Html Document style.css 
    <!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet"  
      href="style.css">
</head>
<body>
<h3 >Save Tree</h3>
<p > Save Planet</p>
</body>
</html>

    		 
    h3{ 
   color: green; 
  }

p{ 
  background-color: green;
  color: white; 
}

    CSS Color, Font and Size

    • CSS color property is used to define the text colour of the HTML element.
    • font-family property specifies the text font of the HTML element.
    • font-size property can changes the size of the text.

    Example 

    <!DOCTYPE html>
<html>
<style>
p  {
     color: red;
     font-family: arial;
     font-size: 200%;
   }
</style>
</head>
<body>
<p>Save Tree Save Planet</p>
</body>
</html>

    CSS Border

    There are many border properties associated with CSS.

    Example 

    <style>
  p{
      border: 4px red;
      border-style: dotted;
    }
</style>

    CSS padding

    Using the CSS padding property, we can change the spacing between text and border.

    Example 

    <style>
p{
padding: 40px;
}
</style>

    CSS Margin

    Using the CSS margin property, we can change the spacing between the border and the outer document space.

    Example 

    <style>
p{
margin: 40px;
}
</style>

    Summary

    • CSS stands for Cascading Style Sheet.
    • It is a separate language which is used to change the default layout of the document.
    • There are thee types of CSS inline, internal and External.
    • External CSS is the commonly use CSS styling because it offers reusability of code.
    • It's CSS properties which define the different layout for the HTML document.
    Previous Tutorial Next Tutorial