Sree Sankar

✕

CSS :: Cascading Style Sheet

Introduction to CSS

Why are we are using CSS?

CSS (Cascading Style Sheets) is used to style and layout web pages

If we consider a webpage is a house; then the structure that we build with brick is called HTML page!

If that structure will get new paint or interior design then that's called CSS styling!

How we link CSS in our HTML file?

Using link tag; the link tag must be inside of the <head> tag.

    
  <link rel="stylesheet" href="./style/style.css" />

Is there any other type of CSS linking?

Yes! the above mentioned CSS linking method is called External! Other than this method, there are two type of CSS linking, i.e. Inline and Internal.

Let's see Inline method!

After external type CSS linking, the second most popular method is the inline method, and the inline method is also used as a short-hand method! We will use the inline method inside the corresponding HTML file, so that we use an HTML attribute called style. In inline method, we can use multiple css style by using semicolon(;). Let's see an example. Popularly using for styling individual tags.

Example:

    
  <h2 style="border: 2px solid green; color: red; text-decoration: underline" />
   Hey I am an example
  <h2>

Result

Hey I am an example

Let's see Internal method!

Internal method is very unpopular method for CSS linking! But still useful for styling one HTML page individually.The Internal CSS method is used using the HTML tag called <style>. We use this tag inside the <head> element of a HTML file and we write corresponding CSS code inside the <style> tag. let's see an example 

    
        <head>
        ....
        <style>

            //CSS Code

        </style>
        ....
        </head>

CSS Selectors

Why we using "CSS Selectors"?

CSS selectors are used to select the HTML elements you want to style. CSS Selectors only needed for External CSS method and Internal CSS method.

We can divide CSS selectors into 5 categories:


CSS Syntax

A CSS rule consists of a selector and a declaration block.

The selector points to the HTML element 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 red text color: 

      
p {
  color: red;
  text-align: center;
}

Example Explained