Internal Style Sheets- CSS Tutorial 6

Hi, I take it that you’ve mastered the font-size and text-transform elements by now and are ready to tackle something a little heartier.

Good! Let’s jump into Internal Style Sheets.

All the same elements and values apply as they did above, we will just list them differently. Instead of being directly “inline” in the html code, we’ll place the css in the head of our document, in-between the <head>and</head> tags.

We start by placing the following opening and closing css tag in the head of our page

All CSS code will be placed between the two tags.

In our Internal Style Sheet and our External Style Sheet, we will now use the following syntax.

selector {property: value}

The property and value tags are the same as with our inline, like when we set our property “color” to the value “red”. Our “selector” above was the <p> (paragraph). We actually were defining it when we use <p style=

The selector is basically our html tag we want the css to affect. Like now, I could leave the individual paragraph tags alone in the html and just add the following between my css open and close tags in the head

Now anywhere I typed, as long as it was a normal paragraph, the text would be red. We can also set multiple values as we did before but since we aren’t confined to being “inline” now, we can go ahead and enter after each semi-colon ; to help make things easier to read.

Where it was…

font-family:serif; font-size: medium; text-decoration: none;

It’s now

font-family: serif;
font-size: medium;
text-decoration: none;

The only other thing we need to do here is tell it which selector to define and show where the property and value begin and end for the paragraph selector.

We do this by first naming our selector, followed the the opening tag, which is { we will then place our code and close with }

It doesn’t matter if the {} are on the same line as above with our {color:red} or as follows.

p {
color: red;
font-family: serif;
font-size: medium;
text-decoration: none;
}

</style>

Now, let’s expand on that and add a background color. Since our background will affect the body of the page, we will want to use the “body” selector. If we were doing this without css, the body tag is where the background properties would be defined. Like this..

Now, we can define in css like this.

body {
background: #000000;
}

I’ve highlighted the selector in red, the property in green, the value in blue and bolded the opening and closing tags.

Tags: cascading, CSS, internal style sheets, Web Design, web development