CSS Structure

 

CSS Syntax


A CSS rule has two main parts, a selector and one or more declartions.  

CSS selector

The selector points to the HTML element you want to style.

The property declaration block contains one or more property name and its value(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

  • p is a selector in CSS (it points to the HTML element you want to style: <p>).
  • color is a property, and red is the property value
  • text-align is a property, and center is the property value

Selector

  1. through tag name - example h1, p
  2. through id - #idname
  3. through class - # class name
Difference between id and class name - Id is used to uniquely identify elements. Only one Id can be defined. Syntax - #idname

Class - Class can be used in multiple places, it can work with heterogeneous elements. syntax - .class_name

Where to write CSS? 
There are three ways of inserting CSS stylesheet
  1. External Style Sheet - Using separate .css file - lnk tag to be included in head tag.
  2. Internal Style Sheet -using style tag - its overrides external style sheet changes.
  3. Inline Style Sheet - <h2 style="background-color: rgb(255, 0, 47);padding:10px;color:pink">About HTML </h2>
Mostly we use external and internal style sheet as inline style attribute increases load time of page.
Inline CSS
<!DOCTYPE html>
<html>

    <head>
            <title> WebPageWithStyle </title>
    </head>

    <body>
            <p style= "color:green; font-size:200%">Hello I need to make this inside my mind</p>
            <h1 style="color:blue;font-size:150%">CSS is cool</h1>
    </body>


</html>
OUPUT

Hello I need to make this inside my mind

CSS is cool

Internal CSS
We use internal CCS to avoid multiple single line style tag. Note in internal CCS, the style element can occur anywhere.

<!DOCTYPE html>
<html>

    <head>
            <title> WebPageWithStyle </title>
            <style>
                p{
                    color:green;font-size:200 ;
                }

                h1{
               
                color:red;font-size: 150;
                }
            </style>
           
    </head>

    <body>
            <p>Hello I need to make this inside my mind</p>
            <h1>CSS is cool</h1>
    </body>

</html>

Output

Hello I need to make this inside my mind

CSS is cool

CSS Selectors

A CSS selector selects the HTML element(s) you want to style.

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.

#test{
  text-align: center;
  color: red;
}

Note: An id name cannot start with a number!

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.


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

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

Example

In this example only <p> elements with class="center" will be red and center-aligned: 

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

Example

In this example the <p> element will be styled according to class="center" and to class="large": 

<p class="center large">This paragraph refers to two classes.</p>
Note: A class name cannot start with a number!

Example - 

<!DOCTYPE html>
<html>
    <head>
        <title> CSS with Style </title>
        <style type = "text/css" >
            .red
            {
                color:red;
                 
            }
            .large{
           
                font-size:250%;
            }
            #identity
            {
                color:violet;
               
            }
            .underline
            {
                text-decoration:underline;
            }
             
        </style>
    </head>
   
    <body>

        <p class="red"> The quick brown fox jumped over the lazy dog.</p>
        <p class="red large"> Wow this is awesome </p>
        <p id ="identity" > This is some more text. <span class = "underline"> Want to color this and underline <span> </p>
        <h1 class="red"> CSS is cool </h1>
   
    </body>
</html>






Comments

Post a Comment