Standard HTML lists are usually pretty boring – a few indented lines with bullets or numbers down the left side. However, with the power of CSS, you can really get creative with your lists! Read on for details…
CSS
Using Style Sheets to make your web building faster and easier.
CSS Positioning
In this tutorial I’ll show you how to position images, text, and other elements on your page using CSS.
If you’ve been building Web pages for some time, it’s likely that you use HTML tables for laying out your pages. This used to be the only way to control the position of elements on the page. However, CSS2 (CSS level 2, the latest version of CSS at the time of writing) provides new ways to control positioning. CSS gives you control down to the pixel level, and it can also do some things which were harder or impossible to do with tables.
Controlling Background Images and Colours
This tutorial shows you how to work with the various CSS background properties. Using CSS, you can specify things like:
- The background colour to use for a Web page, table, paragraph, etc
- The background image for a Web page, table, paragraph, etc
- Whether the background image scrolls with the page, or is fixed on the screen
- Whether the background image repeats
- The position of the background image
Adding a nice coloured or graphical background to your Web pages is a quick and easy way to spice up your site. However, it’s also very easy to make Web pages look horrible, or even unreadable with the wrong type of background! The section at the end of the tutorial will help you avoid some of the common pitfalls associated with backgrounds.
[Read more…] about Controlling Background Images and Colours
CSS Text Properties
In this reference we will look at how to control text appearance using style sheets. CSS gives you precise control over typography in your Web pages, allowing you to set parameters such as the spacing between lines, words and even letters, and the alignment and indenting of text.
We’ll look at the different text properties that can be used with CSS, and explain each property with some real-world examples. Each example is displayed as it would render in your browser.
There are eight properties that can be used to control text appearance – word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, text-align, text-indent and line-height. Let’s look at each of these properties in turn.
CSS Font Properties
In this reference we will look at how to control font properties using style sheets. This is a really useful feature of CSS because it means that you can avoid having all those <font> tags in your Web pages, and it allows you to easily control all your fonts simply by editing one style sheet file.
We’ll look at the different font properties that can be used with CSS, and explain each property with the aid of some real-life examples. Each example is shown as it renders in your browser.
There are six properties that can be used to control fonts – font-family, font-style, font-variant, font-weight, font-size and font. Let’s look at each of these in turn.
CSS Units
This reference lists all the units that can be used within CSS level 1 style sheets. The units are used to specify things like distances and colours.
The units can be grouped into four types: length units, percentage units, colour units and URLs.
Introduction to CSS
Style sheets (or to give them their full title, cascading style sheets or CSS) are becoming more and more common on the Web. They were first introduced in a limited form to Internet Explorer 3.0, and are recognised by nearly all modern browsers.
This tutorial will show you what style sheets are, when to use them, and (hopefully) how to use them!