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%);
}
And this is how a new webpage opens with the applied styles
