Guide to HTML, CSS, and JavaScript (Computer Science 4 All Version)
Chapter 3: Adding Cascading Style Sheets to Your Web Page
Cascading Style Sheets are a way to define how each element of your HTML document (web page) should look. The web browser is ultimately responsible for interpreting your HTML and CSS styles and rendering your web page. This gives the browser some wiggle room in how your page looks so it can look different in different browsers. You should always test your web pages in multiple browsers: Chrome, Edge, Firefox, internet Explorer, Opera, and Safari.
Cascading Style Sheets are often simply referred to as either CSS or "styles". They are called "cascading" because there are different type (levels) of styles.
External CSS File
External styles are stored in a separate file and referenced from your HTML file using the <link/> tag. The benefit of this is that you can use that external style sheet (*filename.css*) for multiple pages or an entire web site. This allows you to manage and change the look of multiple pages by editing a single file rather than multiple HTML page edits.
For example, if you want the background of your web page to be black and the text on your page to be white and you also want your horizontal rules (<hr/> tags) to be light blue and dashed, you might use the sample CSS style sheet file (for example, *mystyles.css*) for that would look like this:
background-color: #000;
color: #FFF;
}
hr {
border: 2px #0FF dashed;
}
You would then add an appropriate <link/> tag to the HEAD section of your HTML file(s):
<link rel="stylesheet" type="text/css" href="myfile.css"/>
Embedded Styles
Embedded Styles are placed inside the HEAD section of the HTML file inside of your <style> ... </style> tags. HTML 5.2 allows the <style> ... </style> tags in the document's body. However, the HTML specification advises the following:
"A style element should preferably be used in the head of the document. The use of style in the body of the document may cause restyling, trigger layout and/or cause repainting, and hence, should be used with care."
For example, if you want the background of your web page to be black and the text on your page to be white and you also want your horizontal rules (<hr /> tags) to be light blue, then a sample embedded style for that would look like this:
body {
background-color: #000;
color: #FFF;
}
hr {
border: 2px #0FF dashed;
}
</style>
Any styles that are defined in any external style sheet will be overwritten by any styles that are defined in your Embedded Styles.
Inline Styles
Inline Styles are placed in the <body></body> area of your HTML code inside of the HTML tag you want to apply a style to.
Let’s say you wanted to have two (2) <hr/> tags on your web page and that you wanted the first one to be dashed as you defined it in your embedded style but you wanted the second horizontal rule to be red and have a sculpted (ridge) effect. For the first you would use a simple <hr/> tag and let the embedded style apply to it. That <hr/> tag would be rendered like this:
For the second you would use this tag:
<hr style="border: 5px ridge #F00;"/>
Which would be rendered like this:
Inline Styles overwrite any embedded and external styles for the same tags, just as embedded styles overwrite and external styles for the same tags.
CSS Selectors
CSS selectors are used to "select" something in your document (web page). Some examples:
<style>
// Any HTML tag can be a selector
body {
background-color: #000;
color: #FFF;
}
/* Use the # to designate an identifier (unique) */
#main {
border: 2px #0FF dashed;
/* Put a dashed border around the #main div) */
}
/* Use the : to modify a tag's behavior) */
a:hover {
color: #0FF;
/* Change the color of the link to red on mouseover) */
font-size: 12pt;
/* Change the size of the link font to 12pt on mouseover) */
}
/* Use the :: to modify a tag's behavior) */
p::before {
content: " ";
/* Add the section character before each paragraph) */
}
a::after {
content: " " url(/images/new-window.png);;
/* Add the new window icon after each link) */
}
</style>
CSS Comments
Adding comments to your code can help you remember what your code is doing at that statement and will also help others who may need to maintain your code in the future. They are also handy for commenting out certain styles when you are developing your styles.
CSS comments are surrounded by /* */ and can be used to have multiple lines or a single line comment. For example:
body {
background-color: #000;
color: #FFF;
}
/* Make the line 2 pixels tall, red, and dashed */
hr {
border: 2px #0FF dashed;
}
</style>
Task - Add Cascading Style Sheets To Your Web Page
For this task you will login to your web server account and create three (3) new web pages and a *cis375.css* file just as you did in the previous task. One of these web pages should use Inline Styles; the second web page should use Embedded Styles; and the third web page should use a linked style sheet. These web pages should change the default look for the following HTML:
<h1>,<h2>,<h3>,<h4>,<h5>, &<h6><p>- font (
style="color: some-color; font-family: some-font-family; font-size: some-size;") <strong>(style="font-weight: bold;")<table>,<th>,<tr>,<td>
Each of these pages should also have a link back to your first task Home web page.
You should then add three (3) <a> (anchor) tags to your Home Page web page (first task) that opens your CSS web pages.
