Creating an Internal Style Sheet

1. With the file basic.html open it in your text editor, click directly after the closing </title> tag. Then hit Return and type <style type= “text/css”>

The HTML should look like the following:

    <title>Basic web page</title>
    <style type= "text/css">
    </head>

The opening <style> tag marks the beginning of the style sheet; you will follow this tag with a CSS selector that marks the beginning of your first style

2. Press the Enter or Return key and type h1 {

The h1 indicates the tag to which the web browser should apply the upcoming style

The bracket thing after the h1 is called an opening brace, and it marks the beginning of CSS properties for this style. In other words, it says: ‘the fun stuff comes right after me”

3. Press Enter [Return] to create a new line, hit the Tab key and type color: red;

You have typed the same style property as the inline version - color - and set it to red. The final semicolon marks the end of the property declaration

4. Press Enter [return] again and add four additional properties, like:

    font-size: 2em
    font-family: Arial, sans-serif;
    margin: 0;
    border-bottom: 2px dashed black;

Each of these properties adds a different visual effect to the headline. The first two assign a size and font to the text, the third removes space from surrounding the headline, and the last property adds a line underneath the headline.

Your work on this style is completed, so next you will indicate its end.

5. Press Enter [return] and type a single closing brace on the last line: }

As the partner of the opening brace that you had typed in step2, this brace’s job is to order the web browser “here ends this particular CSS rule.” All you need to wrap up the style sheet is a closing tag.

6. Press Enter [Return] and type </style>

The closing </style> tag marks the end of the style sheet. And guess what? You have just now created an internal style sheet. The code in your page should now look like the following:

<title>Basic Web Page</title>
<style type= "text/css">
h1 {
    color: red;
    font-size: 2em;
    font-family: Arial, sans-serif;
    margin: 0;
    border-bottom: 2px dashed black;
}
</style>
</head>

7. Preview the page in web browser

You can preview the page by opening it in a web browser or opening it in a browser window, then just click the Reload button.

Now you will add another fascinating style.

8. Back in your text editing program, click after the closing brace of h1 style you just created, press return and then add the following rule:

p {
    color: #003366;
    font-size: .9em;
    line-height: 150%;
    margin-top: 0;
}

This rule formats every paragraph on the page. You do need to worry about what the CSS property is doing.

9. Preview the page in a web browser.

The processes that you have worked through are CSS in a nutshell: Start with an HTML page, add a style sheet and create CSS rules to make the page look great.

Popularity: 43% [?]

Categories: CSS Tips, CSS Tutorials, Posted on February 20, 2008 by Choppr | Login