Understanding Cascading Style Sheets (CSS)
| Previous | Table of Contents | Next |
| Understanding JavaScript Cookies | JavaScript and CSS - Dynamic Styles and Layers |
| Purchase and download the full PDF version of this JavaScript eBook for only $8.99
|
To fully understand the power of JavaScript it is first necessary to understand Cascading Style Sheets (CSS). If you are already familiar with CSS then you can safely skip this chapter and move on to the next chapter (JavaScript and CSS - Dynamic Styles and Layers).
Whole books have been dedicated to learning CSS and there is far more to CSS than can be covered in this chapter. The purpose of this chapter, therefore, is to provide a basic understanding of CSS and convey enough information to enable you to work with CSS and JavaScript to create dynamic styles and layouts in your web pages.
Contents | ||
What are Cascading Style Sheets for?
Cascading Style Sheets allow us to specify the style of the content in a separate file which can be changed such that modifications are reflected in all pages that include that style sheet.
With the introduction of CSS it is now possible to define the document structure and content in HTML, while controlling the style and appearance using CSS.
Embedding CSS Styles into a Web Page
CSS styles can be embedded in an HTML document using the <style> tag as follows:
<style type="text/css">
H1 {color: red;}
</style>
The above style setting has the effect of making all <H1> headers in the web page appear in red.
Importing an External Style Sheet into a Web Page
Whilst it is possible to include all your CSS styles by embedding them into each HTML page this, to a certain degree, defeats one of the main objectives of CSS. It is much better to place the styles in a separate CSS file and import that file into each web page. This means that a change to the overall style only needs to be made to the external file in order for the change to take effect in all pages that include it.
First, we can create our external CSS file. This is the same concept as outlined for embedding the styles into an HTML file, except the <style> tags are not required. For example we can create CSS filed myStyle.css as follows:
H1 { color: red}
H2 {font-weight: bold }
To include our style sheet into a web page we simply use the <link> tag:
<link rel="stylesheet" type="text/css" href="myStyle.css">
Creating CSS Rules
Each element of a style sheet is known as a rule. To create a rule, simply specify the HTML tag that is to be modified by the style (such as the <H1> tag in the above example), followed by a list of properties and settings contained in braces.
For example to change the font style setting of the <p> tag simply write the following rule:
P { font-style: italic; }
It is also possible to specify more than one property per rule by using ; separators:
P { font-style: italic; color: green }
Further, it is also common to apply a single rule to multiple HTML tags by comma separating them:
P, H1, H2, H3 { font-style: italic; color: green }
Setting Styles for Individual Elements
To set the style for an individual HTML element in a web page, simply include the style rule inside the HTML tag. The following HTML tag specifies a color rule for just the current <P> tag:
<p style="color: green;">This is a text paragraph</p>
Setting Styles using the id Attribute of an HTML Element
When defining an HTML tag it is possible to assign that tag an id. For example we might create a heading element with a mainText id:
<P id="mainText">This is the main text</h1>
Having defined the id we can now create a CSS rule specifically for this element id by prefixing the id with a # character:
#mainText {color: blue; font-style: normal}
Now the tag that has the matching id will inherit the style for that id.
Using Classes with CSS Rules
The techniques we have looked at so far are good for specifying styles for either all tags of a certain type, or for individual tag (either by id or by specifying a style by embedding it into the HTML tag itself). The class attribute can be used when a style needs to be applied to a range of tags. A class style rule is specified by prefixing the class name with a dot (.):
.introtext {color:red; font-size: 12px}
Having specified the rule, we need to then reference the class in our HTML elements:
<P class="introtext">This is the intorduction</P>
Any HTML tag in which we reference the class intotext will inherit those style settings.
Summary
In this chapter we have provided a basic overview of Cascading Style Sheets. In the next chapter (JavaScript and CSS - Dynamic Styles and Layers) we will explore how to make dynamic changes to the style of a document using CSS combined with JavaScript.
| Purchase and download the full PDF version of this JavaScript eBook for only $8.99
|
| Previous | Table of Contents | Next |
| Understanding JavaScript Cookies | JavaScript and CSS - Dynamic Styles and Layers |
