You Are Here: Home »Tutorials»General »   Basic css Friday November 21st 2008

Basic CSS

Introduction

Cascading Style Sheets (CSS) are basically files used to define the 'theme' of your website, although once you get past the basics CSS isn't just limited to the styling of pages but can define your entire layout. Using external stylesheets can save a lot of time and effort, and make it easy to make changes that can apply throughout your whole site by just editing one file.

I don't think anybody wants to type out the same code over and over again in the head of each page, well you don't have to. Another major benefit is that users only need to download a stylesheet once as opposed to defining styles individually in every page where the code would be downloaded for each of them.

First the "running order" of styles used on your pages. If you define more than one style for a particular part of your page, they would take the following order:

  • Inline Style
  • Internal Style Sheet
  • External Style Sheet
  • Browser Style

Inline Style being styles defined inside your tags in the page, Internal Style Sheets are styles defined within <style> tags in the page, External Style Sheet - your .css file and Browser Style being the browser default.

For example, if you defined a background colour inside your <body> tag and one in an external .css file, the colour named in the body tag would overide the other. However, CSS allows the use of an !important declaration and any rules marked with this keyword would take precedence other others, meaning a rule such as background-color:green !important defined in a stylesheet would overide any bgcolor definitions within the body tag, this is a useful note to remember but lets get back to the beginning.

Syntax

The CSS format is in three parts:

id { property: value }

The id is basically the HTML tag that you want to define the style within, the property is the element you want to change and the value is what you want to change it to, example:

body { background: #ddd }

body specifies the body tag, it's the background that we want to change and we're changing it to grey (#ddd) more on the reason for the shortened hex colour code a little later.

When you want to define more than one property for an id, you need to seperate each by a semicolon, for example if i wanted to give all my tables a black background and white border, i could use:

table {border: 1px solid white;background: black;}

But to make things easier to read, you can also use seperate lines:

table {
        background: black;
        border: 1px solid white }

If you want to define the same rules for different id's you can seperate each by a comma, like so:

body, table, p { background: grey }

Including The File

Once we've created the stylesheet we need to save it with a .css extension. Unlike you would when defining styles directly in your page you should not include any <style> tags within stylesheets, just the rules themselves.

If you're saving the file in notepad or word include quotes around the filename when you save e.g "theme.css" otherwise a .txt extension will be added by the program. The same applies to certain text editors that are configured to add a default extension.

To include the stylesheet in your pages, just use the following, in your <head> section (say you saved your file as 'theme.css')

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

Obviously if you save the file in a directory like /themes/, use the correct path in relation to the page the stylesheet is being included in e.g href="./themes/theme.css"

The Basic Elements

Backgrounds

Background color: It's recommended that you specify a default background colour in your stylesheets, it'll be rare but not everybody has their default background colour as white. To set a background colour you can use the format background-color examples:

body { background-color: white }
body { background-color: #fdfdfe }

Background images: For a background image, you can use the format background-image example:

body { background-image: url(images/background.gif) }

Background properties: As well as just naming the image to use as a background there's also several background properties that can define how the image is displayed, such as 'repeat' 'position' and 'attachment'

Repeat - if the background image you use is not large enough to fill the space, then by default it will repeat or 'tile' untill it does, and if you're just using a single background picture rather than an effect you might not want this to happen, you can stop the image repeating itself by using:

background-repeat: no-repeat;

Also, if you do want the image to repeat but only across or down the page you can use either of the following:

background-repeat: repeat-x;
background-repeat: repeat-y;

repeat-x will repeat across the page only, repeat-y will repeat down the page only.

Position - if the image you're using is not large enough to fill the space it will be positioned in the top left by default, you can change this using background-position examples:

background-position: top center;
background-position: bottom left;
background-position: center center;

Any of the following position name values can be used

  • top left
  • top center
  • top right
  • center left
  • center center
  • center right
  • bottom left
  • bottom center
  • bottom right

and also ....

  • x-% y-% (states the position on the page in percentages)
  • x-pos y-pos (states the position on the page by pixels)

For example:

background-position: 10% 50%;
background-position: 100px 200px;

Attachment - you can choose if you want your background image to scroll with the page, or stay fixed with the following:

background-attachment: fixed;
background-attachment: scroll;

So lets say we want to use the image 'bg.gif' on our page, want it positioned at the top center of our page, don't want it to repeat/tile and want it to scroll with the page (so it's always in view) this is how it might look in our .css file:

body {
         background-repeat: no-repeat;
         background-attachment: scroll;
         background-image: url(bg.gif);
         background-position: top center }

But we can be a little lazy here, and also cut down on the size of our stylesheet because there's a way to group all of our background properties together, we could just use:

body { background: url(bg.gif) no-repeat scroll top center }

Additionally, when just defining a single rule you can also just use background for example background: black would have the same effect as background-color: black

Text & Font

Text colour: This is how we would define a particular colour of text in different parts of our pages:

p { color: blue }
table { color: red }

Just two examples, the first would set any text inside paragraph tags <p> to blue, and the second would set any text inside your tables to red.

Spacing: Not something that's used very often but you can actually set the spacing between letters on your pages inside your stylesheets with the following:

p { letter-spacing: 1cm }

Align: To align the text inside the specified part of your pages to left, right or center by default:

p { text-align: left }
p { text-align: right }
p { text-align: center }

Decoration: Used mostly for links rather than normal text, we can set the text decoration as normal, overlined, underlined or with a strikethrough:

p { text-decoration: none }
p { text-decoration: overline }
p { text-decoration: underline }
p { text-decoration: line-through}

All the examples above would make the said changes to any text inside our paragraph tags (<p>) just change as needed for different sections of your pages.

These are only the most common text properties, there's some that i've not covered, such as 'transform' which can transform text to all lower or uppercase letters, 'indent' would indent the text from the edge of the page by x amount, and one or two others. I'll try and get a more advanced .css tutorial up at some point, this is really to just help you understand the basics, but you can always find plenty of stuff on google if you need to know more about these properties.

Font: something i used to often forget, when you specify a font type in your stylesheets, we use 'family' rather than 'face' which is what you would use when naming a font from tags on your page, like <font face="">

So to specify a particular font type (again in the examples inside your paragraph tags) we would use:

p {font-family : arial, tahoma, verdana}

Or whichever font you want to use, 'arial' being the primary choice here and the others defined if the first choice isn't available to the user, otherwise they would see thier browsers default.

Font size: There's different ways you can define the size of the font in your stylesheets, with point (pt) values (like you would in MS word)

p { font-size: 7pt }
p { font-size: 10pt }

And so on ... but you can also set the size by percentage of the browser default, e.g:

p { font-size: 100% }
p { font-size: 150% }

Or by pixel sizes:

p { font-size: 7px }
p { font-size: 10px }

It's a good idea to always define a default font size within your body rules, this way if you overlook any elements in your page there will always be a 'backup' value that keeps things tidy, infact the same should be said for other font values (like the font-family)

Font weight: To set a different variant of the font on our pages:

p { font-weight: bold }
p { font-weight: normal }

You can also use number values here (the higher the number the bolder the font)

p { font-weight: 300 }
p { font-weight: 900 }

Again there's one or two i missed, like 'variant' which would set lower or uppercase letters and 'style' to set italic, normal and so on.

Like with the background values, when you're setting more than one font value you can group them, for exmaple:

p { font: bold 12px arial, tahoma, verdana }
Links

Something you'll most likely always want to change on your pages is the style of the links and would probally want to include a hover effect of some type. Lets say we want our links to be blue as they sit on the page, and change to yellow as people hover the mouse over, this is what we could use in our stylesheet:

a:link { color: blue }
a:hover { color: yellow }
a:visited { color: blue }

There's also 'a:active' this would be the colour of the link as people click on it, i don't normally bother with this value, by default it will take on the colour of 'a:link', note that the order of these rules (link, hover, visited) is important.

Now that's just setting the colour but you also probally want to set the font type, size and also mabye remove the underline from the links, here's a general example:

a:link {
    color: #778899;
    text-decoration: none;
    font: bold 10px geneva, verdana, arial, sans-serif }

a:hover { color: #adc6df }
Short Format Colour Values

Just a quick note on this, when you define a colour as a hex value in your styles in certain cases you can make use of the 'short format' values for example the colour white (hex value #ffffff) can be defined as #fff

This works by taking on the first, third and sixth value of the colour, so #ffff00 could become #ff0 or #999000 could become #990 and so on. Colour values can also be defined in the RGB format, eg: color: rgb(255,255,255)

The Class Element

This is one of the best things about CSS, the ability to set multiple styles to use on one page all within the same file. Here's the easiest way i can explain it.

Lets say you want to put two different types of tables on your page, the first with a black background and white border, and the second with a blue background and yellow border, well you already know that you need to use table { property: value } but here's how to set styles for different tables, basically you can give them a name or 'class'

table.black {
background: black;
border: 1px solid white }
         
table.blue {
background: blue;
border: 1px solid yellow }

Now you can see we've given the two styles names (black and blue) seperated by a dot (.) then when we come to adding the tables to our pages we use the class element to say which style we want to use within our <table> tag, example:

<table class="black" border="1">
<tr>
<td>my content</td>
</tr>
</table>

This table would have a black background and white border as defined in the stylesheet, but if we replace class="black" with class="blue" it'll be given a blue background and yellow border

You can use class elements like this for anything you define in your stylesheets, and there's no limit to the number of different classes you can have, as another example, if you want all your links on your page to be black, but some yellow when people hover over and some blue, in your stylesheet you could have:

a:link { color: black }
a:hover { color: yellow }
a:visited { color: black }
a.blue:link { color: black }
a.blue:hover { color: blue }
a.blue:visited { color: black }

Now any links you use on your page will take on the first set of values as default but if you were to use <a class="blue" href="page.html"> then that particular link would take on the second set of values and change to blue when somebody hovers over. Take some time to play with this and learn what you can about how the class element works, because it's very useful.

Unlike in the example above, it's generally a good idea to define class names relevant to the content that they are displaying (like 'news' or 'welcometext'), using colour names like blue or black, or sizes such as 'large' or 'small' means that if you later change the style of your pages those classes may not make any sense.

I know it seems a little contradictive talking about stylesheets then giving values like border="1" directly in the HTML tag of the above example. In order for our white or yellow border to display the border must have a defined size value greater than 0 else it wouldn't display but this should really also be defined within your stylesheets. You can read more about setting table border styles in the table border styles tutorial, the same methods infact can be applied to borders for other elements also.