Basics of CSS

codemonkey · Aug 14, 2009

Part I - Foundation

Want to learn the basics of CSS? Well you have come to the right place.

CSS is a language structured to make HTML easier to control and more powerful.

Usage

To use CSS you can use an external file or embed it straight into an HTML file.

External
Pros: Easy to manipulate lots of pages
Cons: Requires ability to make .css files

To use an external file you need to create a new file, let's call it stylesheet.css in the same directory as your HTML file. All the CSS code should go in stylesheet.css.

In the HTML file you need to put the following code below the <head> tag.

Code:

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

Put that on every page you want the CSS to affect.

Internal
Pros: Embedded directly into the HTML file.
Cons: Can only affect one page, to affect multiple you have to copy and paste code into each page.

To use CSS inside the HTML document you need to go to the <head> section of your HTML document and right below it add:

Code:

<style type="text/css">
</style>

In between the <style> tag is where your CSS code goes.

CSS Comments

To make a comment you use /* */ like this:

Code:

/* This is a comment in CSS, it does not affect anything in the page */

Modifying Tags

Now we come to some practical stuff, modifying tags.

Code:

p
{
color: red;
}

What this does is make the content of every <p> tag red.

p - defines the tag used (you can do this with any tag, except <a> which is special and we will get to later)
{ - declares the starting of attributes
color - declares that the font color of the <p> tag is going to be modified (this is called an CSS attribute)
: - shows that the attribute is over, and the value is the next thing coming up
red - the value for the "color" attribute
; - ends the statement

Common Attributes

Here's a list of some common attributes:
color - changes the font color
text-align - changes the alignment of the text (center, left, right)
font-size - changes the font size
font-family - changes the font type (Arial, Tahoma, etc.)
font-weight - changes the amount of boldness (bold, bolder, lighter)
background-color - changes the background color
font-style - changes the font style (italic, normal, oblique)

Measurement Attributes

When declaring the value of an attribute that involves measurement (font-size, width, height) you have to include a unit UNLESS the value is 0.

Common Units are px (pixel) and cm (centimeter).

Example Usage:

Code:

b /* Bold tag */
{
font-size: 24px; /* notice there is NO SPACE between the number and the unit */
}

Multi-Value Attributes

Some CSS attributes require more than one value.

For example:

Code:

ul /* unordered list element */
{
border: 1px solid black;
color: red;
}

As seen in the above, each value is separated by a space.
1px - Thickness of border
solid - Type of border (solid, dotted, ridge, inset, outset, groove, dashed, double)
black - Color of border

Borders

Borders are very unique when it comes to CSS besides having a multi-value attribute.

With borders you can specify a border on only certain sides, for example:

Code:

p
{
border-top: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid black;
}

That adds a border side to each side except the bottom. You could set the values to be different to have a multi-colored border, or something like that.

Here's the easier and shorter way though to do the same exact thing as the previous example.

Code:

p
{
border: 1px solid black;
border-bottom: none;
}

All this does is make a border on all sides, then removes the border on the bottom to produce the same effect as before, however you save a couple bytes of space.

Part II - Classes and IDs
Classes and IDs make it possible to use CSS to change something, without changing all of a tag.

Classes

Code:

.CoolRedClass /* The period, ".", before "CoolRedText" indicates that it is a class you are defining, not putting a tag name  */
{
color: red;
font-style: italic;
}

Code:

<div class="CoolRedClass">This text is red (and italic)</div>

<p class="CoolRedClass">This text is also red (and italic)</p>

<div>This text is not red or italic</div>

<p>This text is not red or italic</p>

The CSS only affects tags that have the attribute class="class", not all tags.

Classes should be used when the class will be used more than one time, example:

Code:

<div class="myclass">Ahoy world!</div>
<div class="myclass">wuts up?</div>

However, it's not necessary for a class to be used more than once.

Identifiers (IDs)

IDs are practically identical to Classes, except they have a different method of usage, and you can only use an ID once.

Code:

#CoolRedID /* The number sign, "#", before "CoolRedID" indicates that it is a ID you are defining, not putting a tag name  */
{
color: red;
font-style: italic;
}

Code:

<p id="CoolRedID">This text is red and italic.</p>

Remember: Only use IDs ONCE.

You might be wondering why you would ever want to use an ID instead of a class, and that is because of JavaScript; I won't go into the details but it is good practice.

Tag Specific Classes

If you want to make a Class only be able to affect one tag, or have different effects on different tags so that this would happen:

Code:

<p class="myclass">This text is red</p>
<div class="myclass">This text is blue, yet it has the same class as the previous</div>

You can do this with Tag Specific Classes.

Here's the code for it:

Code:

p.myclass /* p is the tag and myclass is the class */
{
color: red;
}

div.myclass
{
color: blue;
}

___

This concludes part two of Basics of CSS.

Part III - Links and Events

In this part we learn how to modify links and make dynamic content with hover event.

Modifying Links Attributes

Links are a bit different to modify then other tags.

To modify a link you need to use this code:

Code:

a:link
{
/*All CSS attributes here */
}


/*for a class use:*/

a.myclass:link
{
/* attributes here */
}

And if you want to change how it looks when visited or when it's hovered upon:

Code:

a:link
{
color: white;
}

a:visited
{
color: gray;
}

a:hover
{
color: blue;
}

You can also use :hover with other tags besides <a>, for example:

Code:

p:hover
{
background-color: yellow;
}

That gives a highlighting effect when you scroll over the contents of a <p> tag.

___

This concludes part three of the Basics of CSS.

Part IV - Misc.

Asterisk
The asterisk (*) can be used to fill in CSS attributes for all tags that don't already have them specified.

For example:

Code:

*
{
color: red;
}

div
{
color: blue;
}

Code:

<p>This text is red</p>
<div>This text is blue</p>

Multiple Classes

You can use multiple classes on an element by seperating them with a space, for example:

Code:

.redcolor
{
color: red;
}

.bluebackground
{
background-color: blue;
}

Code:

<div class="bluebackground redcolor">This has a blue background and is red.</div>

Quick CSS

There is a third way of using CSS directly in the HTML, for those who want CSS to effect only one specific instance of a tag.

Here's how it works:

Code:

<div style="color: red; /*other css properties*/">This text is red</div>
<div>This text is not red</div>

As you can see it only affects one tag.

Attribute and Value List

You can find a great list with all attributes and values here.

___

This concludes the Basics of CSS tutorial by me, thanks for reading!

You may not redistribute this tutorial without my permission.

UndeadDragon · Aug 14, 2009

I think you should also add that you can assign the child of a parent elements' style, so you don't have to give everything classes and ids. Example:

Code:

<html>
<head>
<title>CSS Test</title>
<style type="text/css">
#container
{
border: 1px;
}
#container p
{
color: #f00;
}
</style>
</head>
<body>
<div id="container">
   <p>This is red text</p>
</div>
</body>
</html>

codemonkey · Aug 14, 2009

I think I'll make a more advanced tutorial with that, and link to that at the end of this one.

It would also have advanced selectors and some CSS3 thrown in.

JerseyFoo · Aug 14, 2009

#container p ~ any paragraph within element of id

#container > p ~ child paragraph of element of id

But old IE doesn't do it right. Writing Efficient CSS

And you can't have a tutorial on CSS without addressing id-spec, come on.

Basics of CSS

codemonkey

Code monkey not crazy, just proud.

UndeadDragon

Super Moderator

codemonkey

Code monkey not crazy, just proud.

JerseyFoo

1/g = g-1

Settings Notifications

Options

The Helper Discord

Staff online

Members online

Share this page

Affiliates

Network Sponsors

Basics of CSS

codemonkey

Code monkey not crazy, just proud.

UndeadDragon

Super Moderator

codemonkey

Code monkey not crazy, just proud.

JerseyFoo

1/g = g-1

Log in

The Helper Discord

Staff online

Members online

Share this page

Affiliates

Network Sponsors