About CSS

Cascading Style Sheets

Cascading style sheets makes the design part of web design possible. You can't easily move content around in HTML without the aid of CSS. CSS allows you to add cool effects, like drop shadows and borders.
There are several ways to add style elements to a web page.

You can use the Style tag.

The Style tag is placed in the head of an HTML file. It would look something like this.

You can also insert CSS code directly into elemental tags using the style property, for example:
<div style="background-color:#cccccc;">
<p style="font-size:large;">.

The most useful way to import CSS is to create a seperate CSS file. You would put all your style code in this file. Name it styles.css. Then you can link this file to multiple HTML pages. If you want to change the look of your site, all you need to do is change one file.

Objective 4: Creating Styles

The format for creating a style in CSS is pretty simple: name: value; . You type the name of the style then colon, then the value you want to set. Then you close it with a semi-colon. If you want to change the background color you would type "background-color: blue;".
To complete objective 4, go to HTML Dog and look up the following styles: background-color, background-image, color, border-style, padding, width, and height. Type a new HTML file, and include 2 styles under the styles attribute for the <body> tag. Create a <div> tag. Change the background color, size, and padding.

Objective 5: Creating CSS Classes

You can set multiple styles for an HTML element by creating a CSS Class. Classes are used in the <style> tag or css file and refered to by other tags using the class attribute. A class can also refer to all <h2> tags for example. Type a new HTML file. In the <head> of the HTML, insert a <style> tag. Create a class for H1, H2, and H3. Then in the <body> of the HTML, add text in H1, H2, and H3.

Objective 6: Importing CSS File

Go to HTML Dog.com and look up how to link an external css file to an html file. Create a seperate css file, change the color of active and visited links. Import the CSS file into an HTML file you have created.

Objective 7: Visibility and Opacity

There are several new styles that make CSS designer friendly in CSS 3. Go to w3schools.com Look up visibility opacity, and transform. Write an HTML file. change the opacity of a div tag.

HTML Web Design Adventure!