Ysu Programming CSS tutorial - Beginner

Disclaimer

Again, the purpose of this document is not to create a comprehensive manual, but to help you out with some of the early difficulties if you're just learning CSS. If you have questions or found and error, please don't hesitate to contact me!

When used properly CSS is an extremely powerful tool, but learning it properly is not as easy as HTML was. There are positively funny things, which can make you want to tear your hair out sometimes, or stare in awe how simply things can be done. I'll not be able to cover everything. W3C has done it already on definition level, others have tried to cover parts of it to the very minute detail.

If you're in need of a reference you can find a number of them on the web. You'll most likely need one - for a while anyway. Here's one at culturecode or use the good old DevGuru.

So what's the problem?

Ok now you've learned a bunch of HTML tags, you can create a valid HTML page, but what's next? Why can't you create a page fancy looking and having a nice layout? Well, you can. CSS is your friend — if you know how to use it! I remember when I first started experimenting with CSS it felt very alien, very strange concept. But it has became my best friend over the years, it makes my life easier, my sites better.

What's CSS, and what is it for?

Cascading Style Sheets a.k.a CSS is exactly for that purpose where HTML is lacking: efficiently setting the look of your page.

HTML defines the content, CSS will define the look. You can find lots of good (and bad) tutorials on it, so I'll just try to get you started.

CSS can be set to be used on any element or group of elements on a HTML page. This makes it very powerful already. The fact that some definitions cascade down to child elements, makes it even more powerful, once you get a grasp on it. So my advice is: training. Try as many things as possible, try to do them in many ways until you feel confident you really understood it.

Using it you can set font types, elements' color, background & size; margin & padding of boxes... all this with regard to display type, in one place! So in one solution & one location you can define the whole look of the page if it's displayed on screen or if printed. No more need for separate 'print look' on web pages! (if you try to print my site you'll see what I mean)

Usage

You can set the CSS in many ways, even entering the definition directly into the element. It's done by adding the style definition to the tag: style="[definition here]". Example:

<p style="color: red;">This is red text<p>

You can also use definitions - that's the more powerful (call it level 2) way. Creating one definition which can be re-used. Example definition:

p.red { color: red; }

Using this definition is simple:

<p class="red">This is red text<p>

Definitions can be put into your HTML header, or - even better! - outside your HTML file. If you want to put it in your header, you have to enclose it in <style> tags like this:

<style type="text/css">
  p.red { color: red; }
</style>

In this case the definitions will apply and be usable in the HTML file in question. If you intend to use the CSS in multiple files (the benefit is that you can define the look of many pages of the same site to be similar), and want to be able to control changes in one place, the separate file is the good solution.

Put the definition(s) in a file of your chosing, for example cssdefinitions.css. Then all you need is to tell the browser agent to use that definitions file. You can do it two ways, both are good and valid. Both of these include-definitions go into the HTML file head section. Choose your favourite. Altho there are restrictions on the usage of the second you should keep in mind.

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

<style type="text/css">
  @import "cssdefinitions.css";
</style>

Syntax

There are way too many things to mention here, I'll try to tell you the basics only now, and you will pick up the rest as we go, ok?

The basics of CSS definitions

First, you need to specify what are you setting a definition for, then put the declarations between curly brackets: { and }

As you can see you have to use colon (:) for setting the values, which is a bit different from HTML. Get used to it :)

When you're appliying multiple rules to one element, end every declaration with a semicolon. To do it right, end all declarations with a semicolon and you'll never forget to put one there. If you forget the semicolon between declarations, it'll invalidate that part; in other words: it won't work.

You can put these in one line, or multiple lines, as you see fit.

p { margin: 10px; color: black;}

or

p {
  margin: 10px; 
  color: black;
}

These mean the same as if it was two set of rules:

p { margin: 10px; }
p { color: black; } 

You can set one rule to apply to multiple elements too, in this case you have to separate the elements you define for by comma. For example to set the font size for p and div elements:

p,div {font-size: 15px;}

Note: Possible pitfall! You need to specify the whole path definition for each of the elements in this case! For example to get the definition to apply to all p.red (<p class=red>) and all div.red in the div.content:
div.content p.red, div.content div.red { color: red; }
is required. This won't do that:
div.content p.red, div.red { color: red; }
It will instead set all p.red in the div.content, and all div.red anywhere!
It may be confusing now, but if you just put this in some back-pocket in your brain it'll come handy — or read this tutorial again a later time. :)

What can I declare a rule for?

Multiple things. HTML elements, classes, or elements identified by an ID (remember, of these only one per page is allowed).

Examples:

Define all image tags to have no border:

img { border:0; }

Define the p tags to have 10px margin and black color (we've seen this previously):

p { margin: 10px; color: black;}

Define all elements with class set to 'emphasis' to be bold italic and red :

.emphasis { font-weight: bold; font-style: italic; color: red; }

which means, if I define this (using the CSS mentioned above):

<p>Some parts of this text <span class="emphasis">are set to be emphasised!</span></p>

It'll look like this:

Another syntax rule was used here. the '.classname' means '*.classname'. A wildcard is applied and it's matching any type of element.

And a bit trickier: define all p tags in the 'content' div to have 10px margin and justified text:

div.content p {margin:10px; text-align: justify;}

This is where the power of CSS start to surface...:)

Measurements

Length

Again, a difference from HTML. Here you need to define what kind of measurement you meant when you set a length unit.

Take a simple width setting for a <div> tag for example. The HTML looks like this:

<div>My little narrow div</div>

You can set the size with the 'width:' and a measurement. it can be set as pixels or percentage - or a few other things!
I'll use the real and correct CSS definition here. As the current part of the page is in a div with a class=tutorial here's the definition and the result below:

 div.tutorial div.narrow { width: 60px; border: 1px solid black;} 

I've put a border on it as well, to better show the effect. The surrounding dashed line shows the size of a normal full-width <div> tag.

You can use a number of other length measurement units I don't want to go into all the detals here.

Most of the time the best to use is pixels, especially when you're fitting design, or percentage (simply set it like this: 'width:50%').
Pixels are relative to screen this will result in differences sometimes. For example font sizes will be relatively smaller on screen with a lower relative dpi (dot-per-inch) ( for example: same size screen set to a higher resolution).

Note: If you're setting a zero-length, the measurement is not necessary. Just put the 0 there.

Color

Setting colors is easy, you have more options again. The good old 'color name' like 'red' — be careful and check which colors are actually supported.

A few more things

It's wise to define many parameters of an element if one is defined. For example, if you define a color for your page, you should define the background-color as well, and vice-versa. It's only a wise precaution as some browsers may be set for example to have gray background. If you define the color:gray only, these people will not see anything on their screen when visiting your site. Many-many pages are lacking seriously in this regard.