CSS Tutorial - Getting ready for CSS - Get the CSS code into action

How to get the CSS code into action

The CSS styles consist of definitions for designs for objects in the HTML page. CSS definitions, or styles, can affect single HTML tags, or whole sections marked up with tags like <div> or <p>. They affect the look and behaviour of those parts, either by changing the design for general HTML tags (like you can change the behaviour of the HTML tag <h1> (for a headline)) or you can address specific sections by giving them an ID in the HTML page and adressing only certain tags (not changing all <h1> tags in general, but only those named in the HTML page).

There are three different ways of placing a CSS style.

With "style" directly inline, as part of the HTML tag that one wants to change
normally not recommended, since it doesn't only sound like just a new way of the old HTML content-and-design-in-one-place potpourri, it is effectively just like that, and that's what we wanted to get away from, right?
<p style="color:red">This text is supposed to be in red color</p>
All CSS styles together placed in the header of the HTML page (in the <head></head> section). You have to start the definitions with this: <style type="text/css"> and ending it with </style> (you might have seen that already or it also looks a lot like the section where you can find JavaScript functions).
You either affect specific tags in general, like change all H2 (headline) tags from having the size in 20 pixels and being centered on the page to having the size in 30 pixels, in red and aligned to the left. This you can easily do by giving the name of the tag, and then putting the new styles into curly brackets, like so:

<head>
<style type="text/css">

/* this makes all headlines addressed as <h2> in the HTML page appear large red left-aligned */
h2{

font-size:30px;
text-align:left;
color: red;
}

</style>
</head>
<body>

<h2>Hopefully this headline will appear in large, red letters, aligned to the left on a browser</h2>

</body>

We have put h2 as the tag to get new styles, and we have put the new styles between the curly brackets, each style separated from the next by a semicolon.

If you don't want to change the styles for all appearances of a certain tag, but only of a few specific ones, then you have to address that a bit differently:
Let's say we have four paragraphs on our page, and we have put each paragraph in a separate <div>. If we would do like in the example above (div instead), then we would change the looks of all those eight paragraphs. What if we want to address only the first two, for example?
For that we have classes. A class, is nothing but a group of styles specified. And to tell the browser, which of the multitude of objects on the page are supposed to read a certain class (and act/look according to the styles therein), we have to give those objects a name, and then put that name again in the definition of the class, in the styles section.
To stick with our example with the four divs, it has to look like this:

<head>
<style type="text/css">

div.special{

color:red;
background-color:white;
font-weight:900;
}

</style>
</head>
<body>

<div class="special">
Hello, I am container #1, and I have a class called 'special' so my text should be bold, red on white background.
</div>
<div class="special">
Hello, I am container #2, and I have a class called 'special' so my text should be bold, red on white background.
</div>
<div>
Hello, I am container #3, and I don't have any class or style attached, so I am just looking plain normal.
</div>
<div>
Hello, I am container #4, and I don't have any class or style attached, so I am just looking plain normal.
</div>

</body>

It should look like this (assuming the page is in general black whith white text):

Hello, I am container #1, and I have a class called 'special' so my text should be bold, red on white background.

Hello, I am container #2, and I have a class called 'special' so my text should be bold, red on white background.

Hello, I am container #3, and I don't have any class or style attached, so I am just looking plain normal.

Hello, I am container #4, and I don't have any class or style attached, so I am just looking plain normal.

The advantage is, that by defining classes and referring to those classes by <div class="classname"> is obvious:
One has to define the style only one time, no matter how many times you will need elements to look that way. Also when you want those elements to look suddenly different, you have to change it only one time. With the first version (putting the CSS code into the HTML tags), you'd still have to go and add the looks to each single occurence of that object that you want to have those special looks.
This second way here takes the styles away from the HTML code, but it still leaves you with having to open each single HTML page when changing something. That's okay, if you define very specific styles, that you will normally only need in that page (like a certain table, or maybe a specific background/foreground color definition that will only affect this page). But in general, it's best to use the third way:
All CSS styles in separate .css files, completely away from the html pages
That is the best idea, since it will leave you with defining every different look (style) just one time, and therefore having to change it only in one place when the need arises.
<head>

<link rel="stylesheet" type="text/css" href="styles/general.css" />

</head>
<body>

<p class="red">Hopefully this text will appear in red on a browser</p>

</body>

The CSS code itself in that separate page will then look exactly the same way as what is shown between the <style> / </style> tags in of the second variation above.