Lesson 6

CSS Basics

OBJECTIVE

This lesson will be our introduction to applying some basic CSS rules to give your website some pizzaz! For instance, you will be able to change font styles and their color, change the way boxes appear using border styles and sizes, and finally control the overall way content boxes interact with each other using floats and auto sizing. These auto settings can be exciting to view when you change the window browser size, but first we need to understand the underlining and process of how these things work.

PREREQUISITE

Before we can start, you should have a good understanding of advance HTML techniques such as creating divs with classes or ids because we will be referring to these important elements when applying CSS rules.

What is CSS and what does it stand for?

CSS stands for (Cascading Style Sheets), which it's main purpose is to literally style the HTML document to make it look good. The example below shows a skeleton version of a basic HTMLlayout with no properties assigned and looks pretty bland.

This time the HTML doc was given the styles to change the font family, and to change it's color too. Even the background and boxes have colors now too, just like the colored illustration.

What are the three ways for applying CSS rules?

The best three ways of applying CSS rules are as follow:

1. In-Line / These are tags using the Style attributes directly inside the HTML code.

Here are some simple and even more complex examples you can try out for yourself:

<p style="color: red; background-color: black; font-style: bold">This text is Red on a black background box</p>

<p style="color:green; font-size:24pt; font-family:Tahoma, Geneva, sans-serif">This text is Green with a point size of 24 and the Font Family is Tahoma, Geneva sans-serif</p>

2. Internal / Internal allows you to ad a Style tag with assigned properties to any IDs, Classes, and Elements such as P tags, H tags, and A tags. This is nice for simple and straight to the point pages with very little element use. For anything more complex, you'll want to use an external file which will be explained soon. For now here are some quick examples to get you started.

First, to get your styles to work we need to use an Open and Closed Style tag which looks like this <style><⁄style> and in the open tag section we want to ad the Type which in this case will be type="text/css" that tells the browser to be prepared to use styles. One last item is the media="screen", which says it will be for just this page. Finally the code should look like this:

Now we can apply properties to the whole page using corresponding names such as Body with a background color of blue with white text. Here is a simple first Style test you can try out in the "Give It A Try" section. This style should be placed right before the body section of your HTML page such as:

3. External /External CSS coding is the best option for working with large websites because CSS codes can get very long at times and you do not want spend all your time scrolling down to that one change, so it's much easier to just link an external file with all your CSS rules. Here is the linking code used to link the CSS file. This link should always appear right under your title tag which should look like this:

"link" -This is the physical link to the external CSS file with the hyper reference link.

"Type" - Indicates what kind of style sheet this is, in which case will be a Text file with CSS rules.

"Media" - Specifies what type of media or divices are being used and what types values can be assigned to in CSS.

"Rel" - Lets the browser know that this file is related to this document.

Structure / Now we need to look over the CSS structure because CSS has it's own set of syntax which includes three main features, Selector, Properties & Values which then uses the { } to place the Properties & Values in.

Here is what a typical CSS structure looks like:

"Selector" -A Selector is a link to any HTML tag such as a Body, Div, Header, H, and P tags which doesn't need the opening < or >.

"Properties" -This is the physical link to the external CSS file with the hyper reference link.

"Values" -This is the physical link to the external CSS file with the hyper reference link.

p {
   font-size: 18pt;
   color: #8D1919
   text-align: center;
}