Cascading Style Sheets

INTRO

Cascading Style Sheets (CSS) is used to redefine the look and behavior of the pages.CSS allows you to define a property once and automatically updates all pages using that property with the style sheet linked to the page. Majority of sites now use CSS. Anyone that has used MySpace and bling their page has used CSS to do it. This article is broken down into different areas. My examples are simple, however you can take multiple areas in here and combine them together. That’s one of the many great things about CSS

SYNTAX

CSS has 2 parts to its syntax, a Selector and a Declaration. An example looks like the following:

h1 is the selector, color: black is the declaration. Color is the property, Black is the value.
After declaring this, anytime you use the h1 tag, the text will be black assuming you external linked it to your page as you will learn next. The text would normally be black by default, but you can change the color to whatever you want.
You can declare more than one property for a tag. Example:

each declaration is separated by a semi colon. You can also specify your own selectors called id and class selectors. It is also a good idea to comment your pages to keep it neat and organized. /* This is the proper way to comment */ Learn it, use it, love it.

APPLYING CSS TO YOUR PAGE

There are a couple ways to apply css to your page. Depending on how much you plan to use CSS will depend on which way you link CSS to your page.

1. In-line
2. Internal
3. External

The first way is in-line, attribute style. If you read my XHTML article, you learned attributes are used to define how a tag looks/behaves. The in-line way is used within an html tag like so:

So within the body tag you set the background color using hexadecimal value which is preferred method for setting your color values.
The second way is internal, tag style. This is using the

tag within your

tag. This will alter the properties of this page only. Example shows how to implement this into your page in the proper structure:

This defines the body tag to have your background color black.
Third way to apply your css to your page is through external link. Using external links is very helpful since you only need to write the code once, and just link it to every page you have keeping all your pages looking the same. Here’s an example of how your link will look inside your code:

Notice that the is a self closing tag so there is no need for the closing tag. In this example, this assumes that the style sheet filename.css is in the same directory as the current page. If you are organizing your server with folders you will need to give the file path of the style sheet from your ACTIVE page.

Text

Text properties in CSS has a few options for you to add more to your text than just your standard text. Here is a list of some options for Text:

1. text-align
2. text-indent
3. text-spacing
4. word-spacing
5. text-transform
6. text-decoration

Text align is pretty much the same as the align attribute in HTML. You can align text left, right, or center. However, there is a fourth option for text align in CSS, justify. the justify value allows you to stretch each line so both the left and right margins are straight. This is commonly used in newspapers. Here are a couple examples of using text-align:

The examples above should be self explanatory. Also notice how i have the selector and opening bracket on one line, code on the second line, and closing bracket on the third. This is good coding practice, however does not have to be done like this you can have the whole code on one line if you like, like so:

But I always use line seperations. If you get into computer programming with C/C++ you will want to pick up this coding practice.

Text indent is pretty self explanatory, create an indent at the beginning of a line. Text indent can be defined with pixels or percent:

OR

Text spacing allows you to define the space length between characters:

This will create spaces between every character used in the paragraph tag

Text word-spacing is just like the text spacing, except it defines the spaces between words instead of each character.

Text transform changes the capitalization of the text. This comes in handy when needing to change the capitalization of certain tags.Text transform comes with 3 options:
1. capitalize
2. uppercase
3. lowercase
The uppercase and lowercase are self explanatory. Captialize will capitalize the beginning letter of each word.

Text decoration sounds fancier than what it really is. All it is, is the option to have an overline, underline, or line-through the text:

Background

You have a few option when setting your background. You can set either a color or an image. To set the background color you would use the background-color property:

To set a background image you would use the background-image property. You havea a few options when using the background-image property.
background-repeat
background-position
background-attachment

With background-repeat, you can repeat the pattern of the image across your page by default, repeat going vertically (y axis), or repeat going horizontally (x axis).
With background-position, you can set where your image will appear on screen. the values of this can be set in pixels, percent, or keywords:

And your third option, background-attachment, you can set your image to scroll with the page or stay fixed.

Classes

Now were going to learn about classes, yay. Classes is one of the main reasons CSS is so useful. Classes allows you to set multiple values for the same tag. So for example if you wanted to have your paragraph tag to sometimes have big font with a different color lettering, you could set it in one class and then set different values for the paragraph tag in another class, and just call them when needed. Best way to learn is by example, so here we go:

Now that you have your values set, lets see how to use them in your webpage

Margin/Padding
Margin and Padding are pretty much the same thing, however they are different and you need to know the difference between the two. Margins define the space around the entire page, whereas padding defines the space between the border and the content. Margins and padding values are set the same ways with top, right, bottom, left. Example:

Pretty self explanatory. Top property defines the space between the borders and content from the top of the page, left/bottom/right guess what they define?? The border property sets a border around the page giving within the specified margin values. You can also use shorthand when setting margin/padding values. And remember the order is top right bottom left. Here is the shorthand version of the example above:

Lists

As you learned i the XHTML article in the zine’s January issue, you can use lists to set an order of importance or to just show a list of items. With CSS you can add more style to your lists by changing the look of the list icons. So, you have ordered list “ol” and unordered list “ul”. Heres your options for ul:

Not alot of options, just acouple. Now here’s some for ol

Pay close attention to the ones that say “Not supported in Internet Explorer”. You should really consider not using these when creating your pages, however I wanted to show you that you did have the option. Now here’s some examples of apply these to your list:

Don’t forget about classes. You can predefine several different lists for you to use. You can also use images in your list instead of these options. Images can be used in both list types. Syntax is pretty much the same as the other lists, only instead of list-style-type you use list-style-image. Heres a quick example:

Well this article has covered some of the basics of CSS and how you can use it to manipulate your pages. If you enjoyed this article and want to continue to learn web development, i strongly encourage you to read up more on CSS and other features not covered in this article. There is so much more you can do with CSS that was not covered in here. Well i hope you enjoyed this article.

Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17