CSS2- Cascading Style Sheet Introduction by TECH grovestudies

Tech Grovestudies 

CSS / Tech Grovestuides

Ways to write CSS in HTML

There are three ways to CSS in html file .

·        Inline css

·        Internal css

·        External css

Priority Order

            Inline > Internal > External

 

Inline CSS

è Before CSS we use inline to apply style

è Not an efficient way to write

è Self contained

è Uniquely applied to each content element

Example –

            <h3 style=” color : red”> Have a great day </h3>

            <p style –“color; purple”> I make this </p>

 

Internal CSS

·        With the help of style tag we apply styles with the HTML file .

·        Redundancy is removed

·        But idea of speparation concern still lost

·        Uniquely applied on single document

·        Example –

<style>

            H1 {

            Color : red;

            }

</style>

<h3> Have a good sweet night </h3>

External CSS

·        With the help of  <link> tag in head we apply styles

·        Reference is added

·        File saved with css extension

·        Redundancy is removed

·        Idea of separation is maintained

·        Uniquely applied in each contents

Example –

            <link rel=”stylesheet” type=”text/css” href=””>

            H1 {

                        Color : red;                                                                   //.cssfile

            }

 

CSS Selectors

·        Selectors are used target and apply CSS

·        Three simple selectors

o   Element Selectors

o   Id selectors

o   Class selectors

·        Priority selectors

Id> Class> Element

Id Selectors

·        Id attributes is used to select HTML element

·        Used to target specific or unique element

·        How we do it ?

#unique

            {

            Color: red;

            }

            <H1 ID=” unique”> Hello world </p>

Firstly we select the id and then change the color property , text color to red.

And then written text in the content tag will change the color to red.

 

Class Selectors

·        Class attribute is used to select HTML element

·        Used to target specific class of element

·        How we do –

.group {

Color: red;

}

<h1 class =” group”> Heloo litty </h1>

We select the class and then changed the color property , text color to red.

Then written text in this tag content will have the text color as  red.