CSS Tutorial

Chapter 5

CSS Tutorial

CSS stands for "Cascading Style Sheets CSS is the sister HTML that allows you to style your web pages An example would be a change in style words in bold standard HTML, you can use the tag like this ... <b>:

This works very well and there is nothing wrong with that in itself, except that now, if you want, for example, change all the text that you originally put in bold to emphasize, you do not have to go to each location on each page and edit the tag.

Another disadvantage may be found in this example: you want to make the text above in bold style to Verdana and change its color to red you need a large amount of code wrapped around the text:

It is verbose (verbose) and helps to make your messy HTML. With CSS, you can create a custom style and also set all its properties, give it a name, and then "tag" your HTML code to apply these stylistic properties:

And between the header </ head> at the top of your web page you insert this CSS code that defines the style we have applied:

The above line of code links your external style sheet called "myFirstStyleSheet.css" for the HTML document. You put this code in the header between </ head> of your web page.

To create an external style sheet, all you need to do is create a simple text document (on Windows, right-click and select New -> Text Document). Then move a file type txt css .. You can change the file type just by changing the file name extension. The extension of the file name on Windows tells the computer what type of file it is and allows the computer to determine how to handle the file when, for example, you try to open it.

You probably guessed it, CSS files are especially (especially) formatted text files in much the same way that HTML pages. There is nothing special or different about the file itself, but rather the content of the file makes it a CSS document a CSS document.

When working with an external document CSS there are some points to remember:

You will notice that in the above example I applied a CSS style to a tag <h2>. This tag defines the size of the text that the envelope size that is predefined in the browser (eg 10 pixels). When you apply a CSS class to it, the CSS code overrides the default size that you would normally get with a label <h2> for the size specified in the CSS class. So now you can see that the CSS can replace the default HTML tag!

In the examples above, I have code where I define my CSS CSS classes, then "apply" the various elements of the page. Another way to apply CSS is globally redefine an HTML tag to look a certain way:

What is CSS code set the font style and size <h1> all of a sudden. Now you do not have to apply a CSS class that we've done before at any <h1> because they are automatically all affected by the CSS style rules.

Here is another example where I give the whole page bigger margins:

body {margin-left: 15%; margin-right: 15%;}

As you can see, you can change all the tags and change the way it looks! This can be very powerful:

div {

background: rgb (204,204,255);

padding: 0.5em;

border: 1px solid # 000000;

}

Located in the code above, all <div> </ div> tag will now have a background color of "rgb (204,204,255) and having padding 0.5em and a thin border is 1 pixel solid black.

To explain a few things about the foregoing:

CSS color can be expressed in several ways:

In Hex -> eg: # 000000 - it's black and this: # FF0000 is red.

By rgb -> rgb (204,204,255) is a light blue-violet color.

With named colors like "red" or "blue"

I generally use hexadecimal color since I am familiar with them or I just use named colors. Thus, the last example can be rewritten as follows:

div {

background: green;

padding: 0.5em;

border: 1px solid # FF0000;

}

So instead of "rgb (204,204,255) ', I just said" green. "

Using RGB (RGB is the acronym for 'Red Green Blue') and Hex color, you can really get the exact color you want easily when you know your codes. Fortunately, many programs (such as Dreamweaver) to provide easy to use color pickers for you so you do not need to know the values ​​for the code.

In this example, I'll show you the code "cool" CSS allows you to create a link rollover effects without images:

: Link {color: rgb (0, 0, 153)} / * for unvisited links * /

: Visited {color: rgb (153, 0, 153)} / * for visited links * /

: Hover {color: rgb (0, 96, 255)} / * when mouse is over link * /

: Active {color: rgb (255, 0, 102)} / * when the link is clicked * /

The CSS above will link to change your color when someone hovers their mouse over, spills instantly without images! One important note with the above code is that it is important that the style declarations are in the right order "link-visited-hover-active", otherwise it may break in some browsers.

CSS is very powerful and allows you to do things you can not do with standard HTML. It is now well supported in all modern browsers and is a must learn tool for web designers.

The above examples are just a small sample of what you can do with CSS, but it should be more than enough for you to start styling your pages well. As with many technologies, CSS has a lot of ability that most people will not need to use often or not at all. Do not get caught in the trap of thinking that if a feature / function available, you should use it.