Skip to: site menu | section menu | main content

{the ultimate: css generator;}
Currently viewing: CSS-Generator.com: » Home » Article - CSS Basics

Apr22nd. Generate your own CSS style sheet code with this free code generator.
CSS Generator Wizard Maker - customizing cascading style sheets.

Articles

Support:

Download:

Polychromatic:

CSS Basics

CSS Generator Wizard

Using Cascading Style Sheeting within your HTML documents is not as difficult has you may think. It can be a bit confusing when we start talking about selectors and decorations and classes and elements...But it really isn't that hard to master and when you do, you'll be wondering why you haven't tried using it before!

For the purpose of this tutorial, we'll begin with using the STYLE HTML element. The STYLE tag should go between your <head></head> tags of your document, but they can actually be inserted within the body if need be.

<head>
<style type="text/css">
   BODY{background-color:white;}
   H1{color:blue;}
</style>
</head>

In the above example code, we find the STYLE tags, two "SELECTORS" (BODY & H1), and two "DECLARATIONS" (background-color & color).

The statements within the curly brackets ({}) are what we call "rules". The first one sets the background color of the document's body to white and the second rule sets the color of the H1 element to blue. All rules are enclosed within curly brackets and each rule ends with a semi-colon (;). Rules do not have to be on separate lines, but it makes your code much easy to read if you do so.

If you're not yet totally confused, let's try to understand "Parent" and "Child" elements. Since the H1 element is a child of the Body element (it resides within the body tags) and since it's background color was not defined, it inherits or obtains the background color rule that was defined for the Body. So, the H1 element's background color is white.

Let's add some more declarations and some body parts...

<head>
<style type="text/css">
   BODY{
   background-color:white;
   font-family:"courier new",georgia, serif;
   font-size:10pt;
   margin:3px;
   }
   H1{color:blue;}
</style>
</head>
<body>
<h1>CSS is Awesome!</h1>
<p>Learning to Develope with Style.</p>
</body>

We see above that we have added a few elements to the body of the document. The H1 element displays "CSS is Awesome" in the color of blue, the font of "courier new", and it's inherited background color of white.

What about the Paragraph element? That, my friend, inherits everything from the body element!

Okay, CSS2 has more than 100 different properties, so how do we know which properties to set for a particular HTML element? Using a CSS reference chart or a program like CSS-Generator.com's generator wizard, will be of great help. After awhile, you' begin to memoirize most of them. Some tips to help you to remember are: Think about the element. If its like a box (TABLE, DIV, PARAGRAPH, BODY, SPAN, IMG, etc.) then it can have a border, margin, padding. If it can contain text, then its a good posibility that it can have a text-align, line-height, letter-spacing, etc.

Now for some heavy stuff. What if you have two different type of Paragragh styles that you' like to define? Let's say you want one paragraph to align its text on the left and the other to align its text on the right? Heres how...

<style type="text/css">
.leftAligned{
   text-align:left;
}
.rightAligned{
   text-align:right;
}
</style>"

You see two sets of rules here. The first one, we named "leftAligned" (you may use any name you'd like for these "classes") and the second one is "rightAligned". These classes must begin with a period (.). All we have to do is to specify which "class" to use for our Paragraph:

<p class="rightAligned">
This text is going to be right aligned.
</p>
<p class="leftAligned">
This paragraph will align its text on the left.
</p>

See what we did? Also notice that we did not include the period (.) in the class name. You can also associated an element with a class. P.leftAligned will associate the class "leftAligned" with only a paragraph, thus allowing you define a different class named "leftAlign" for some other element.

One very important issue we must cover. At the beginning of this article, we put our CSS declarations within the HTML document. For maximum flexibility it is highly recommended that you put your styles in a separate external document, commonly called a "style sheet". Please see the article Linking Style Sheets to HTML for more information.

You create a style sheet simple by creating your style rules on a separate document, with out the <style><style> tags and then save the document with a .css extension. example:

/*
this is a style sheet
You can use comments within
tags likes these...
*/
   BODY{
   background-color:white;
   font-family:"courier new",georgia, serif;
   font-size:10pt;
   margin:3px;
   }
   H1{color:blue;}
/*
we'll save this file naming it "style.css"
*/

And, very important here, we'll reference it into our HTML document by putting the following line with the <head></head> tags:

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

And finally, (yewh!) we can also define property styles INLINE. Though it is not recommended, this method can be used in a pinch to define a special need. It's done like so:

<p style="width:60%;text-align:justify;line-height:110%;letter-spacing:1px;">
All right already!
</p>



Enjoy!

Back to top