×

Html & Html5

The World's best Software Development Study Portal

CSS (Cascading Style Sheet)


IT is used to design the webpage so that it looks interactive. It add the looks and takes care of formatting part for webpage.



Types of CSS


  • CSS Element Selector : In element selector, user selects the HTML element by Name on which user wants to apply style.
  • E.g. h1{ text-align: center; color: blue;}

  • CSS Id Selector : In ID selector, user selects the HTML element by ID on which user wants to apply style. It is used with the hash character (#) and then id number of the HTML element.
  • E.g. #name { text-align: center; color: blue;}

  • CSS Class Selector: It is used with the full stop character (.) and then class name of the HTML element.
  • E.g. .name { text-align: center; color: blue;}

  • CSS Universal Selector: It is used with the asterisk character (*) as shown below It is used with the asterisk character (*) as shown below and style will get applied on all the HTML elements.
  • E.g. * { text-align: center; color: blue;}

  • CSS Group Selector : In group selector, user writes all the HTML elements together on which user wants to apply the same style.
  • E.g. h1, h2, title, p { text-align: center; color:blue;}


Techniques of applying CSS

  1. Inline
  2. Internal
  3. External

Inline Style Sheet


An inline CSS is used to apply a unique style to a single HTML element.
Let's understand this by the following example:


<h1 style="color:blue">THis is heading </h1>

Output:


THis is heading



Internal Style Sheet

An internal CSS is used to define a style for a single HTML page.


Let's understand this by the following example:


<style> body{background-color: powderblue;} h1{color:blue;} p{color:red;} </style>

Output:




External Style Sheet

An external style sheet is used to define the style for many HTML pages. With an external style sheet, you can change the look of an entire web site, by changing one file!


Let's understand this by the following example:


<link rel="stylesheet" href="styles.css">

CSS file:


body{ background-color: powderblue; } h1{ color: blue; } p{ color: red; }

Output: