CS 100 (Learn) — CS 100 (Web) — Module 08

CSS :: Properties

In the previous section, we saw many examples of CSS properties, including background-color, font-size and border-color.

In this course, we will explore some of the basic properties. It would be infeasible to discuss them all.

The website w3schools is a valuable resource for finding out more about each property and exploring all of the CSS properties that are available (there are hundreds).

Colours

We have seen how the color and background-color properties can be used to display named colours such as red or blue.

  color: red;

There are often more than one way of specifying a property's value.

There are only a few named colours in CSS and they are limited.

Typically, web designers want more fine-grained control over their colours.

You can specify a specific colour in CSS by using the intensity of each primary colour as a percentage:

  color: rgb(100%, 0%, 0%);

It is more common to specify the value in 24-bit colour with six hex values (two digits each for red, green and blue in that order):

  color: #FF0000;

An alternative is to specify the value in 12-bit colour, with only one hex digit for each of red, green and blue:

  color: #F00;

This 3-digit HEX colour system is often "good enough" and can specify over 4,000 different colour combinations (16 x 16 x 16).

When even more precision is required, then 24-bit colour is used.

Font Properties

The basic font properties are:

Specifying the family (the name of the font, such as Helvetica) is a bit tricky because fonts are often dependent on the device the page is being displayed on. The fonts that are available on Apple, Windows and Android devices are all very similar, but have some differences. Working with fonts can be especially tricky because of legal issues (e.g., they can be copyrighted in some countries). Fortunately, the use of fonts is becoming more reliable as the Internet has matured. Projects such as Google Fonts are providing free fonts defined on the internet that can be used in your website.

For now, to tackle this problem it is best to specify "fallback" fonts that can be used in case the font specified is not available on the device.

  font-family: "Times New Roman", Times, serif;

The above property specifies that the font should be "Times New Roman", but if that is not available, use "Times", and if that is not available, use any font with serifs.

When specifying fonts, it is best to use the websafe font guidelines listed at w3schools.

We saw an example of font-size:

  font-size: 150%;

that specified that the font size was to be 150% (1.5x larger) than the default font on the screen.

For distance measurements such as font-size, it can be a little overwhelming with over ten different units possible.

A common one is to specify exactly the font height in pixels:

  font-size: 22px;

There are advantages and disadvantages to both approaches. Many web designers prefer to specify the number of pixels because it gives them more fine-grained control over how their web page appears. However, if a user is using an accessibility device or has adjusted the default font size in their browser, then specifying the relative size (such as 150%) may cause the text to be more faithfully displayed.

For font-size there are also descriptive values such as small or x-large available.

Layout Properties

After font properties and color properties, the most important properties are all related to the layout of the page, or how the content is arranged.

To understand layout, it is best to think of each HTML element as being enclosed in a "box". If you think about it, each letter on this page has a bounding box, each word has a box, each paragraph has a box, and so forth. Every HTML element has box properties, which include its size (width, height) and its position on the page. The position could be fixed in one place relative to the page, or fixed relative to the browser window, or it can move when text is scrolled or some other specification.

Each box can also have a border, margins and padding. This figure (from w3schools) helps to illustrate how the three are related:

Source: w3schools

The following properties can then be used to control the style of each box:

In the HTML module we saw the rudimentary border attribute of a table

<table border="1">

With CSS we can control the style of a table. In addition, each data element in a table (<td>) can be styled in any fashion.

Links and Hover actions

In the next module we are going to see how web pages can be made more dynamic and interactive.

Some simple interactive behaviour can be achieved by just using CSS.

You may have seen that your web browser colours links that you have already visited differently than links that you have never visited before. You might have also seen websites that change the colour of a link when you hover over the link with your mouse or when you click (active-ate) a link.

CSS allows you to specify a different style for each different "interaction" with a hyperlink.

CSS
a:link    { color: #F2F; }
a:visited { color: #22F; }
a:active  { color: #2F2; }
a:hover   { color: #F22; font-size: 125%; font-weight: bold}
HTML

This is my favourite video. See what happens when you hover over the link.

 

You can specify :hover behaviour for most HTML elements, not just links. This can make your web page seem more interactive when you move your mouse around the page.

However, most touch-screens cannot detect when you hover, so this mode of interaction is becoming less popular.