Internal Style Sheets
These is represented by the style tag nested within the head tag of a HTML page. It can override whatever styling is dictated by an External Style Sheet provided it's declared after the reference link to that stylesheet.
In code, it looks like this.
index.html
<!DOCTYPE html>
<html>
<head>
<style>
p
{
color: #FFAA00;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere elementum ex. Duis id dolor ex. Praesent augue nulla, consectetur quis lectus eget, luctus pulvinar risus. Nunc ipsum lorem, gravida non purus ac, dapibus facilisis urna. Curabitur vel tempor erat. Maecenas egestas sapien nulla, a lobortis felis posuere ut. Ut ornare laoreet tristique.
</p>
</body>
</html>
<html>
<head>
<style>
p
{
color: #FFAA00;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere elementum ex. Duis id dolor ex. Praesent augue nulla, consectetur quis lectus eget, luctus pulvinar risus. Nunc ipsum lorem, gravida non purus ac, dapibus facilisis urna. Curabitur vel tempor erat. Maecenas egestas sapien nulla, a lobortis felis posuere ut. Ut ornare laoreet tristique.
</p>
</body>
</html>
If you want to use an Internal Style Sheet to override the External Style Sheet, you'd do this. In this example, you want to turn the paragraphs grey instead of orange.
styles.css
p
{
color: #FFAA00;
}
{
color: #FFAA00;
}
index_grey.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<style>
p
{
color: #DDDDDD;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere elementum ex. Duis id dolor ex. Praesent augue nulla, consectetur quis lectus eget, luctus pulvinar risus. Nunc ipsum lorem, gravida non purus ac, dapibus facilisis urna. Curabitur vel tempor erat. Maecenas egestas sapien nulla, a lobortis felis posuere ut. Ut ornare laoreet tristique.
</p>
</body>
</html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<style>
p
{
color: #DDDDDD;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere elementum ex. Duis id dolor ex. Praesent augue nulla, consectetur quis lectus eget, luctus pulvinar risus. Nunc ipsum lorem, gravida non purus ac, dapibus facilisis urna. Curabitur vel tempor erat. Maecenas egestas sapien nulla, a lobortis felis posuere ut. Ut ornare laoreet tristique.
</p>
</body>
</html>
Pros
It's a quick fix, and still separates HTML from the CSS. You can screw up the CSS or the HTML without affecting the other... mostly. A good middle ground between External Style Sheets and Inline Styling (which we will examine in the next part).Cons
Since the CSS is bundled in with the HTML in a single file, causing that file to be larger, loading time would be affected.If you have a bunch of these pages that you want to affect using the same change, maintenance increasingly becomes a chore as more pages are added.
Use Cases
Useful when you don't have access to the existing External Style Sheet.Best for projects where only one HTML file is required otherwise. And also if the HTML and/or styling is light.
Used in conjunction with an External Style Sheet when there are multiple pages and some pages need their own unique styling.
Incidentally, this is the implementation I use the most when I'm making really small projects, after which I'm confident that I will never or rarely need to revisit it.
No comments:
Post a Comment