CSS Introduction
In this lesson, you will learn about how CSS can be used to format your web pages.
If you missed part one, please review it before you begin this section.
Prioritizing CSS and HTML tags
When using CSS, certain tags take precedence over others. Here’s how the tags are prioritized:
HTML tags override all other tags.
CSS inline tags override embedded and linked tags.
CSS embedded tags override linked tags.
CSS linked tags won’t override any other tags.
Formatting CSS Tags
CSS tags are formatted like this:
selector {property: value;}
The selector is a browser command and is followed by a property. The property is a word describing the selector, which further instructs the browser. The value specifies the value of the property.
Although this may sound a little confusing, CSS is formatted much like standard HTML. Let’s compare the two formats:
HTML
CSS
As you can see in the comparison diagram above, the Element is equivalent to the Selector, the Attribute is equivalent to the Property and the Values are the same.
Inline Cascading Style Tags
Inline cascading style tags are used within standard HTML code using the STYLE parameter. The following example will remove the underline of an individual link:
- HTML Code
- HTML code viewed within an HTML document:
<a href="http://www.yourdomain.com" style="text-decoration: none">Your Link</a>
- Browser View
- HTML coding viewed through a web browser:
The STYLE parameter is added directly to your original HTML link code.
Inline style tags enable you to specify how each individual link will look.
Embedded Cascading Style Sheets
Embedded cascading style sheets (CSS) can perform the same tasks as the inline style tags. However, the coding is placed between the
and tags within your HTML. You can specify how your entire page will appear including links, fonts, text and more, simply by using embedded style tags.The following example will display your active text links (after a link has been clicked on) in a specific color. The hover color (when the mouse is placed over the link) will be displayed in an alternate color and the underline will disappear.
<style>
<!–
a:active { color:#0000FF; text-decoration; }
a:hover { color:#FF0000; text-decoration: none; }
//–>
</style>
Notice the code is placed within the comment tags? Comment tags look like this:
<!–your text–>
The comment tags are used to prevent older browsers that don’t support style tags from displaying the CSS codes within their page.
The great thing about embedding style codes is that you can create your own classes of code. What this means is that you can specify different styles throughout your page and then call them within your page.
For example, you can add a class of code to a paragraph selector like this:
<style>
<!–
p.padding {padding-left: 5px;
padding-right: 5px;
font-family: Arial;
font-size: 10px;}
//–>
</style>
Notice the text highlighted in bold? This is a class name that was just made up. You can call it whatever you’d like. Simply add .yourtext following your selector.
To put this style into action or call it, simply place the following code within your HTML where you would like the style to be used:
<p class="padding">
Keep in mind, the text you place after your CSS selector (.yourtext) must be the same name as the code you place to call the style.
For example, if your class code looks like this:
p.text
the code you use to call the style will look like this:
<p class="text">
See how that works?
Linking CSS
The linking CSS method involves creating a file that defines specific styles. This CSS file can be used throughout your entire website to specify everything from body styles and headings to paragraphs and HTML tables.
This file might look something like this:
BODY {font-family: Arial;
font-size: 12px;}
H1 {font-family: Georgia;
font-size: 16px;
font-weight: bold; color: blue}
P { font-weight: normal;
color: blue}
This file should be saved as style.css and uploaded to your server where you store your HTML files.
When using a style sheet, you must place a link to your style.css file within your HTML between your <head> and </head> tags like this:
<html>
<head>
<title>Your Page Title</title>
<link rel=stylesheet href="http://www.yourdomain.com/style.css" type="text/css">
</head>
<body>
Page Content
</body>
</html>
You can link to your style sheet within as many of your pages as you would like. This will give you the ability to update all of your pages at one time, simply by changing the styles within your style.css file.
This concludes the CSS Introduction lesson. In the next lesson, you will go over creating a basic HTML page.