Creating your First Styles
You will be taken through the basic steps of creating the following:
- Inline styles
- Internal style sheets
- External style sheets
Creating Inline styles
When you type a CSS rule directly into a page’s HTML, you are basically creating an inline style. Inline styles offer none of the time and bandwidth saving benefits of style sheets. Yet, it proves to be effective when you want to absolutely change the styling on a single element on a single page. To make the style work perfectly, the most important thing includes careful placement of style within the tag that you want to format.
Here is an example that shows you exactly how to do it.
1. In your web page editing program, open the file basic.html
This elegant XHTML file comprises a couple of different headings, a paragraph, an unordered list and a copyright notice inside an <address> tag. You will start by creating an inline style for the <h1> tag.
2. Click inside the opening <h1> tag and type style = “color: red”
The tag will look like the following:
<h1 style= "color: red;">
The style attribute is HTML, not CSS so you are required to use the equal signs after it and enclose all of the CSS codes inside the quotes. Only the stuff inside the quotes is CSS. In this case, you have added a property named color, which affects the color of the text- and you have set the property to red. The colon, however, separates the property name from the property value that you want. Next you will check the results in a web browser.
3. Open the basic.html page in a web browser
Choose File; select Open File, depending on your web browser. Many HTML editors might include a “Preview in Browser” function, which, with a simple keyboard shortcut, or menu option, opens the page in a web browser. It is worth checking your program’s manual to see if it is included in the time saving feature.
When you view this page in the web browser, the headline will now appear red. Inline styles can include a single or multiple CSS properties. You will now need to add another property text.
4.Return to your HTML editor, click after the semicolon following the word “red” and type font-size: 4em;
The semicolon separates two different property settings. The <h1> tag should look like the following:
<h1 style= "color: red; font-size: 4em;">
5. Preview the page in a web browser. For example, click your browser window’s Reload button (but make sure you have saved the XHTML file first)
The headline now gets massive into style. And you already know how labor-intensive inline styles are. It becomes tedious to make all the <h1> headings on a page look like this one could take days of typing and add acres of HTML codes.
6. Return to your page editor and delete the entire style property, which returns the heading tag back to its normal <h1>
Popularity: 76% [?]
Categories: CSS Tutorials, Posted on February 29, 2008 by Choppr | Login