Style Sheets

Style Syntax

Style sheets have their own syntax which is different from HTML, so it is, in some respects a second language to learn. A style sheet consists of a list of style rules that are to be applied to specific HTML tags. Each rule specifies a selector, that selects the tags to be styled, and a declaration block, which contains the styles which are expressed as a series of properties and their values. Each property is separated from its value by a colon and the entire rule is ended with a semicolon, unless it is the last one in the set when it can be omitted. The entire set is enclosed in braces. The names of the properties and their values are defined in CSS syntax which is often hyphenated. White space is ignored between these identifiers so the set can be written with spaces and new lines to keep it readable.

As an example, a style rule to set the text font of the entire body of the page to arial might be written as

body { text-family: arial; }

Then we might make an exception for the text between <h1></h1> tags to be bold and italic with

h1 { text-family: arial; font-weight: bold; font-style: italic }

Or, to make the list more readable, we could write

h1 {
text-family: arial;
font-weight: bold;
font-style: italic;
}

So the complete style sheet in this case would be

body {
text-family: arial;
}

h1 {
text-family: arial;
font-weight: bold;
font-style: italic;
}

We can apply a style to more than one selector at the same time by listing them all. For example the following will set h1 to h5 tags to the same style without changing the sizes, which are inherited from the default browser style sheet.

h1 h2 h3 h4 h5 {
text-family: arial;
font-weight: bold;
font-style: italic;
}

Note that CSS syntax is not case sensitive. You can use Color:234; or color:#234;. The practice throughout this website is to use lower case. The exceptions to this rule are when we have to refer to id values whose case must be maintained. So an id of myDiv must be referred to as exactly that and not mydiv, for example.


Styling Attributes

Styles can be added to any HTML tag by using selectors such as html, body, p, h1, ul, li, img, a, div and so on. In fact any HTML tag can be styled. However, there is often the need to style only one or some of these tags. For example one block of code may have to be styled differently from all the others. We can do this in HTML5 by using the new tags, such as article, to style the entire text of an article, or figcaption to style a figure caption, but for “old” HTML and even some new tags, we have to resort to other measures.

One approach would be to use inline styles to deal with these exceptions but this loses our advantage of being able to restyle our website in a single document, without having to edit each page. A better way is to keep using our style sheet file but select tags more specifically by using the id attribute of the tag.  This does mean we will have to make more use of id attributes but we are going to do this anyway so that we can animate our pages with JavaScript.

The result is that we have two additional selectors. One uses the hash character (#) to identify the unique id of a single tag and the other uses a dot character (.) to identify a group of tags with the same class attribute.

For example if each of our web pages has a <div> tag that acts as a banner at the top of the page we might code it as a div with an id of ”banner”, as


<div id=”banner”>This is the home page</div>

Then the CSS document could style this with a red color as

#banner {
text-family: arial;
font-weight: bold;
font-style: italic;
font-color: red;
}

Or, if there are several divs with class=”code” attributes, we might use

.code {
text-family: “courier new”;
font-weight: bold;
font-style: normal;
text-color: blue
}

Some new features of CSS3 are worth including in this discussion despite the implementation risk associated with recent technology. This is because they are substantial improvements and because they are quite well implemented.

One of these is the radius property which can be added to style boxes to produce rounded corners. You apply this to the border property, for example,

border: solid #008 2px;
border-radius:8px;

The other useful property is the ability to hide an element using the display or visibility property. The display can be set to none to remove the element from the layout entirely or the visibility can be set to visible or hidden which hides the element but does not remove it from the layout.

 

Note that we have set the font-style to normal just in case it has been set to bold in a previous tag. It is always a good idea to reset properties that may have been changed from the defaults. A code section is quite likely to be presented within a styled article, for example.

Layout and Positioning

Although the styling of text is a major factor in improving web ages and making them more consistent in terms of look and feel, the most dramatic effect of CSS is in producing user interface layouts that are not possible with simple HTML, 5 or earlier.

However, it is a slightly complicated topic and a difficult one since layout styles are not consistently implemented in all browsers. So once again the advice is to test your layouts, stick to the most established features and use the ones that work best.

The first concept to grasp is that for styling purposes every page element is assigned to a rectangular display box with a height, width and a position on the screen. Pure text, for example, would be defined in a text block while a div containing text and images would have its own area rather like a small sub-page. Also, since tags can be nested within other tags, so can their style boxes so the layout can become quite complex.

There are four different ways to define the position of a CSS box, namely, static, absolute, fixed and relative. In addition it can be floating.

Static positioning is the default where the box is inserted at whatever point in the text flow the associated tag occurs. It is a form of inline positioning.

Absolute positioning fixes the position of the box relative to the document or to any containing box whose position was also declared.

Fixed positioning fixes a box with respect to the browser window. This too can be superimposed on other boxes but it does not scroll with the document which is convenient if you want to keep something in view.

Relative positioning is relative to the position it would occupy if it were static.

In all but the default first case, the position of a box is defined by left, top, right and bottom properties which are the distances of the box from these four sides of the container. So you can position an element 20 pixels from the top and 10 pixels from the left edge of the document with

#main {
position: absolute;
width: 640px;
height: 480px;
left: 10px;
top: 20px;
}

You can also state a width and height for the box so using these and all four position values could confuse the browser and lead to unexpected results. Normally we would only use two position coordinates. However, there are occasions when it is desirable to center a box in the browser window in which case we can use auto values, for example, to center a box horizontally,

#main {
position: absolute;
width: 640px;
height: 480px;
left: auto;
right: auto;
}

This would keep a 640 by 480 box centered in the display window for all screen sizes and persist even when the window is resized by the user so it is a useful design feature.

It is possible and probably the easiest option to style a complete website with absolute positioning but there are situations in which a fixed position might be useful and when a floating arrangement might be the most suitable.

Boxes can be instructed to float left or right. Float left means align with the last box on the left unless there is not enough space in which case shift to the next position below that box. It is like word wrap applied to boxes. Float right does the same using a right to left flow. And unless cancelled, for example with a clear:both; command, the flow continues throughout the page. This is a way of coping with different display sizes.

Margins and Padding

A box can have margins of blank space outside and padding space inside its perimeter. The margins have the same effects as the top, left, right and bottom properties, and include

margin-top, margin-left, margin-right and margin-bottom

or just margin to set all margins to the same size.

So we might use

margin-left: 10px;
margin-top: 20px

The padding property sets blank space inside the box using a similar syntax,

padding-left: 8px;
padding-top: 10px;

which all looks very simple apart from a minor problem in the way that browsers interpret these values. Some include padding in the width and height parameters while others don’t.

You can also add borders to the boxes to further complicate the measurement of width and height. For example, you can style the four borders separately or all together, as

border: thin solid #000000;

which places a thin solid black border line around the box.


A Styled Audio Player

The "controls" attribute provides a default set of user controls which are good enough for most applications. If a completely different presentation is required then it can be obtained by using JavaScript to create an entirely new control panel. However, if only minor changes are required the audio element can be styled to some extent with a style sheet. The style sheet code is added to the above HTML

<link rel="stylesheet" href="audiostyles.css">

Then the following code produces an audio control panel with a new background color, beveled edges and rounded corners as illustrated in Figure 1.

audio{
background-color:#c90;
width:300px;
height:52px;
border-radius:10px;
border-top:4px solid #ec0;
border-left:4px solid #ec0;
border-right:4px solid #860;
border-bottom:4px solid #860;
}

a styled html audio player
Figure 1. A styled audio control panel.

A Styled Video Player

The default player is good enough for most purposes but if you want to give it a custom look and feel a style sheet can be used. There are two options. One is to style the default as much as possible and the other is to create our own buttons and sliders and assemble them into a new player.

There is not much that can be done to style the default player other than to wrap it in a div container to center it on the screen and add beveled edges and rounded corners. This requires a link in the original HTML file,

<link rel="stylesheet" href="videostyles.css">

And a style sheet,

body {
font-family: arial, sans-serif;
font-size: 16px;
color: #000;
background-color: #345;
}
#player{
margin-top:10px;
width:640px;
height:480px;
margin-left:auto;
margin-right:auto;
border-top:4px solid #eee;
border-left:4px solid #eee;
border-right:4px solid #999;
border-bottom:4px solid #999;
border-radius:8px;
}
video {
width:640px;
height:480px;
}

The outcome is illustrated in Figure 1.

a styled html video player
Figure 1. A slightly styled video player.

A completely restyled player is not possible with only HTML, CSS and some JavaScript without graphics. The controls, such as the HTML5 equivalent of a slider, are not well implemented by most browsers. However, a usable control panel can be constructed with established technology.

Further Reading

You can learn more about CSS3 in my book "Start Programming with JavaScript" published in Kindle and paperback format by Amazon.