Book
Inserting CSS
Inserting CSS
How to Insert CSS:
- Inline style
- Internal Style Sheet
- External style sheet
Style rules Priorities
Internal Style Sheet
Internal styles are defined in the <head>
area of the HTML document inside the <style>
tag.
Example
The CSS rules:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Style - CSS</title>
<style>
h2 {
font-family: "Times New Roman", Times, serif;
font-style: italic;
}
h4 {
font-family: "Verdana", Sans-serif;
font-variant: small-caps;
}
p {
font-family: "Lucida", Monospace;
font-size: 1.1em;
}
</style>
</head>
<body>
<h2>This is a Heading 2</h2>
<h4>This is a Heading 4</h4>
<p>This is lorem ipsum paragraph: <br>
Lorem ipsum dolor sit amet, ea nec probo eloquentiam, in esse quando laboramus sea. <br>
Ne omnesque detraxit eam, cu qui movet affert volutpat. <br>
Qui amet option eu. Utamur euismod hendrerit vel no, ius natum salutatus forensibus in. <br>
Sea diceret vivendo constituam at, duo an adhuc viderer evertitur.
</p>
</body>
</html>
will create a page displayed as:
Internal style sheet can be used when we have only one HTML page or when we have multiple HTML pages but we want special rules for the specific HTML page.
For more information about styling fonts: https://www.w3schools.com/css/css_font.asp