CSS Structure

 

CSS Syntax

CSS selector

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

  • 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
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