Bhavitha Cherukuri: HTML Styles

HTML Styles — CSS

Let us continue the last topic…

Internal CSS

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

An internal CSS is defined in the <head> section of an HTML page, within a <style> element.

The following example sets the text color of ALL the <h1> elements (on that page) to blue, and the text color of ALL the <p> elements to red. In addition, the page will be displayed with a "powderblue" background color:

Example

<!DOCTYPE html>
<html>
    <head>
        <title>website</title>
        <style>
            body{
                background-color:black;
            }
            h1{
                color:white;
            }
            p{
                color:white;
            }
        </style>
    </head>
    <body>
        <h1>this is my website</h1>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id officia ipsum labore harum iusto error laborum dolor nihil delectus facilis quas, nemo magni excepturi quia voluptate veniam? Sint, culpa libero.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio reiciendis ipsum eos totam porro voluptates placeat accusamus aperiam eveniet consequatur. Pariatur ullam esse dolorum! Reprehenderit molestias distinctio ut numquam aliquid.</p>
    </body>
</html>

A newwebpage opens with the given background color and text color:

External CSS

An external style sheet is used to define the style for many HTML pages.

To use an external style sheet, add a link to it in the <head> section of each HTML page:

Example

<!DOCTYPE html>
<html>
    <head>
        <title>
            my website
        </title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1>this my website</h1>
        <p id="p1" class="odd">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed quisquam nostrum similique nam, veniam voluptas dicta tempora eum aut officiis pariatur fugiat et minus iusto omnis consequuntur rerum dolor. Placeat!</p>
        <p id="p2" class="even">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum vero a ab quis nesciunt quod est quas ipsam molestias veniam enim, commodi fugiat dolorum ea suscipit at perspiciatis nisi rerum!</p>
        <p id="p3" class="odd">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae et excepturi quibusdam nam? Eos sed ratione aut beatae asperiores est nemo optio fugiat harum, adipisci, nihil repellat dolorum, commodi reiciendis.</p>
    </body>
</html>

we need to add external style sheet in the header section so that the styles that we added will be applied to the text.

External STYLE SHEET:

body{
    background-color:hsl(120, 6%, 3%);
}
h1{
    color:white;
}
#p1{
    color:red;
}
#p2{
    color:rgb(196, 18, 173)
}
#p3{
    color:#2cf540;
}
#p4{
    color: hsl(0, 44%, 49%);
}