Getting started

Using the following HTML as a working example will help us to visualise the many CSS rules we'll demonstrate in this article. Some basic styling has been applied to keep the output neat, but don't worry about these, concentrate on each example's specific rule to understand its effect. You'll encounter separate in-depth demos for some of the more complex rules as you progress.

Note: You may notice that the <h1> present in the following examples is not weighted as bold. Don't worry, the default is that all headers are weighted bold, but the stylesheets for this website are overriding them for purposes further up the chain!

Text

Here are some CSS rules to control the appearance of text.

Colour

In the CSS box above the rule color is applying the value #ff0000 to the element outside the curly brackets – an h1 in this case. The output box shows the title, 'The Universe' (which is marked up as an <h1>) in bright red.

See the previous article about applying colour using different methods.

Font family

Set your website's typeface with this rule: font-family. There are quite a few basic families to choose from, but all should be assigned to serif, sans-serif or monospace. Here are some examples:

The order is based on your preference. Whichever is first in the list will be the one used by the visitor's browser. However, if that typeface isn't available the next typeface in the list is used. If each subsequent typeface isn't available, the last value, sans-serif will be applied, effectively meaning the user's browser will just use whatever sans-serif typeface is available to it. These days though, the majority of internet-enabled devices have access to a plethora of good typefaces, especially Helvetica (in one form or another).

If you're using a web font and have referenced the file elsewhere in your CSS, you assign it as shown below (and in another article), using quotation marks to make sure the element assigned with that CSS value will render in your chosen font:

Note: It always pays to have other typefaces in your font-family list in case something prevents your chosen web font from rendering.

Font style

Make text appear upright, or italicised. By default (excluding headers) all text is set to normal, so you'd only need use it if an element that needs to be normal is inheriting italic styling from a parent element.

Note: See how the <a> tags are italicised too? This is because they are inline elements, so will always go with the flow established by block level elements and their assigned styles – unless you choose to override them.

Font size

Font size can be set in pixels, or proportionally using ems. In this modern digital age it is recommended you use ems to set your type.

Font weight

Like font-style, font-weight is set to normal by default for all text, excluding headers.

Your first and only real option is bold. However, you can also you a numbering system to vary the amount of weight given to text. This is coming back into fashion with the use of web fonts, as many typefaces are made up of different weights and you may require more granular control in these instances. Consult your web font service for more detail.

Line height (known as leading in the real world)

In the world of web leading is called line-height. Use proportional measurements for your typesetting to maximise readability and visual appeal. Consult an experienced typographer (or graphic designer if you can't afford one of those) to get this sorted.

Text align

By default all text is aligned left, so there's no need to write this rule for each and every element that involves text. However, because it's all about the cascade and you may well have aligned text to the right, a child element that is inheriting that rule, may well need it specified as an override. Simple, huh?

Text decoration

Give your text lines, or not. underline is applied by default to all <a> tags.

Note: See how the paragraph text style (line-through) carries on through the <a> tags? Remember, those are inline elements so they inherit from their nearest containing block level element. However, the separate style for those anchors (text-decoration: none;) removes their own default underline (that gets applied automatically because they are HTML anchors). Did you spot the overline style applied specifically to the last link?

Text transform

If you need to override certain aspects of your text, without changing the original HTML, you can make it uppercase, lowercase or capitalised.

A reminder

Here are the rules (and the values) brought together to help summarise how to style text.

Anchors

Hover, focus, active and visited states

CSS enables us to control the appearance of elements during and after interaction, specifically the <a> tag.

The <a> tag can be assigned additional states in CSS and consequently you can offer different styles to the user when interaction occurs.

Styles for an anchor tag

The first set:

Hover

The second set of styles. Note how we write a colon then the word hover, with no spaces.

Our hover styles will temporarily override those in their equivalents in the broader CSS rule for <a> tags, when the user hovers their cursor over an anchor.

Using the two examples above, the hover state styles will change the link's text colour to orange (from blue) and the underline it has will temporarily disappear from view. The link will revert to its original styles after the cursor has been moved away from the link.

Focus

In addition to hover, there is a state called focus. It is activated via keyboard input. Many users can't use a computer's mouse to interact with software and websites, so they rely on keyboard control. On our websites we can show alternative styles to make it clear that anchors can be interacted with when using a keyboard.

It essential to create focus styles for your links, as every website should strive to be as accessible as possible to all people. It's a simple addition that can really help users with particular disabilities.

Here's how you can apply it:

It is best practice to offer a strong, high-contrast focus style for your links to aid users in seeing where they are and that they have interacted with them. Choose a colour scheme that best suits your website's aesthetic.

Active

The next option is one called active. This gets applied when a user activates the link and will be briefly seen before they 'jump' to wherever the link will take them. Here's how to apply it:

Visited

Finally, there is the visited state. This enables you to assign styles to links that have been visited, to help differentiate between those that haven't yet been visited.

Note: You must always write the :active and :visited states after :hover, otherwise your styles will not work correctly.

Take a look at the demo to see how these work in practice.

Layout

Here are some CSS rules for applying layout to elements.

Height

I strongly recommend you avoid applying height or min-height to any HTML element. Our layouts run in to trouble if we don't rely on the content to dictate how high objects are. Unless you're looking to use overflow, more on which further on in this article.

Margin and padding

Read the separate section about how to apply margin and padding. But if you don't want to (or already have) here's a working example using the markup defined at the start of this article (with some other styles thrown in to keep you on your toes):

Overflow

A tricky one to get your head around, but can be very useful when you do want to restrict how an element and its contents are viewed. Imagine that you did want to fix an element's height and width, you could apply overflow (or overflow-x for its width, or overflow-y for its height) to 'hide' the content that is longer than its parent. Switch the value to scroll and you can have a box that scrolls within the page. Think of it like a mask.

Float

The float attribute allows us to position elements within our pages, maintaining the flow of the document. If you want to visually take items out of the layout, use the position rule which is explained next.

We can assign the float rule to elements that come one after the other in the markup and make them appear side by side in the browser.

Positioning

Remember we mentioned the flow of an HTML document and that block-level elements follow one after the other, based on their order in the HTML? Well, there are CSS rules that enable us to 'extract' elements from that flow, and allow us to position them wherever we like. This technique can be awkward to work with initially; take a look at the demo to learn more.

Here are the values that can be called upon:

top, left, bottom, right work with position: absolute; and fixed; to allow us to position elements with pixel precision from any side. You can use percentage values but these will vary depending on the size of the browser window used, so take care if using that type of measurement.

The values relative and fixed will be explained in the demo.

Width

Give an element some width. This CSS rule can come in handy when we use the float rule. Apply a width to the same element that has a float rule and see them sit next to each other (assuming their parent is wide enough to accommodate them in that state).

Borders

Put a border around an element, or only on one side.

Here's the CSS rule for applying a border around all sides of an element:

Take note of how the CSS value is applied. First we write the width of the border we want. In this example it is 1 pixel wide. Next we write the type of border we want. There are a few options available to you here:

• solid
• dashed
• dotted

The final section of the rule is the border's colour. Write this as you would any other CSS colour value.

Side control

A border can be applied all around an element as demonstrated above or individually, for each side. Here's how to do that:

The example above would now only apply a border to the element's top side. Replace top with right, bottom, or left to have more control over your element's sides. Here are the other options:

Remember though, don't write each side's border in full like this if the values all match. Only use this approach if you're trying to achieve unique border effects for each side.

Visual demonstration of background colour, borders, margin and padding

In the diagram above you can see the familiar margin rules being applied to the outside of the element. The thick black bar signifies the edge of the actual element and that a solid border of 5 pixels is being applied on all sides of the element.

The 20 pixels of padding, defined by the dashed line inside the element shows the extend of the padding and how it pushes the text away from the element's border.

Here's the CSS that would need to be written to achieve that effect.

Widths plus borders and padding require subtraction

Our element is actually 300 pixels wide, but we've had to write it as 250 pixels because we need to account for the pixels used on the border and padding. Adding up the left and right values of the border and padding gives us 50 pixels, so we'll need to subtract that from our width value, assuming we wish to keep the actual desired width of 300 pixels. This method is also required when working with fixed heights.