Cascading Style Sheets

Cascading style sheets (CSS) are used to:

Students should be aware that the area of CSS covers far more than the contents of these notes. The notes only cover some of the more immediately useful aspects of CSS.

How Do Style Sheets Work?

A style represents a set of instructions that recommend to a web browser how to draw a webpage. Styles do not force a browser to display a webpage in a particular way. They merely recommend to the browser how the webpage should be displayed.


Defining Styles

There are three ways of defining a style. It can be placed into:

  1. any HTML tag (e.g. the <body> or <p> tags);
  2. the <head> element of a HTML document;
  3. an external .css file.

Styles are dealth with slightly differently when declared as external, in the <head> element or as part of a tag.

Tag Styles

Tag styles need only hold the statement part of the style, as the identifier is the tag itself. Within tag styles replace the curly brackets with quotes. For example:

<p style = "font-size:20px;">

More than one style property can be assiciated with a tag, as shown below.

<p style = "font-size:20px;color:blue">

Write code to make a h1 text red and size 50, as shown here.

Tag styles are useful for debugging. However, tag styles should never be used in the release version of a website, as they do not seperate the content from the look and feel and they are not maintainable.

Header styles

External styles have two parts:

    1. an identifier, which states one or more tag types it affects;
    2. a statement, which tells the browser how to draw the tags' elements.

Header styles have to be tagged as being a style. This is done in the <head> section using the <style> tag.

For example:

<head>
<title>Demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
p
{
  font-size : 70px;
}
</style>
</head>

More than one style property can be associated with an header style's element, as shown below.

<head>
<title>Demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
p
{
  font-size : 70px;
  color     : green;
}
</style>
</head>

Tag styles are used extensively in these notes. This is only so that students can copy complete examples for learning pupposes. However, header styles should never be used in the release version of a website, as they are not maintainable.

Write code to include a header style sheet that makes all h1 tags text green and size 70.

External Styles

External styles are declared in the same way as header ones.

For example:

p
{
  font-size : 60px;
}

More than one style property can be associated with an element, as shown below.

p
{
  font-size : 40px;
  color     : red;
}


To include an external style in a HTML document, insert the following tag into the <head> element of the document.

<head>
<title>Demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href = "name_of_style_file.css" rel = "stylesheet" type = "text/css">
</head>

Write code to include an external style sheet that causes all p tags to be yellow and size 30px.

Style Scope Cascading

Style scope cascading refers to the way in which the scope of a style cascades through a HTML document. The scope of a style depends on where the style is declared. The scope cascading rules are:

Style Syntax

A style is made up by combining one or more properties. Each property has a property name followed by a colon and then the value for that property.

Some properties take a number of values. In such cases, the values are separated by a comma or a space.

As with HTML, white space can be used to make a style sheet easier to read and write.

As with HTML, CSS is NOT case sensitive.

CSS Comments

Use /* to open a comment and */ to close a comment.

Note: you cannot use the JavaScript // in CSS

CSS Properties

All properties have the form of a property name followed by one or more values.

Various categories of property include:

Text Style

The text style properties affect how text appears on a webpage. They include:

color

This property sets the text colour of an element. Color is set using either a keyword or a hexidecimal number. Keywords include the obvious colours, such as:

Hexidecimal numbers must be preceeded by an # and be six digits in length. The six digits represent the amount of red (first two digits), green (middle two digits) and blue (last two digits). For example:

p
{
  color:#FF00FF;
}

Insert the code above into a webpage to see it working.

Using hex numbers, change the colour of the text to light gray.

font-family

The font-family property helps to ensure that text looks the way it was intended to on various platforms. This property specifies a hierarchical list of preferred fonts that a browser should use to draw an element. The browser will use the first font in the list that is installed on the system it is running on.

Because none of the desired fonts may be on the system a browser is running on, CSS introduces the idea of a font family. A font family is a generic name for a type of font. The specified font families are:

The font-family property is a list of font names and font family names. Each item in the list is separated by a comma.

Font names should be capitalized (for example, Ariel, not ariel). When the name of a font is more than one word, it should be quoted, as in "Times New Roman".

body
{
  font-family:fantasy;
}

Insert the code above into a webpage to see it working.

Write code to make text red and monospace, as shown here.

An external font-family can be used in a webpage. It can either be contained in:

  1. an CSS file that is hosted by the external provider's.
  2. be in a font-family file.

External provider's CSS fonts are included in the same way that any other css file in included in a file. Once the external provider's CSS file has been linked, its fonts can be used. Google offers a set of free fonts, called Google Web Fonts (GWF).

Example of an external css font-family (Run Example)

<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>External Provider CSS Font Family Example</title>

<!-- link to the external css font -->
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">  <!-- NOTE: The 'T' in Tangerine must be uppercase -->
<style>
body
{
  font-family: tangerine;
}
</style>
</head>

<body>
<h1>A Google font.</h1>
</body>
</html>

External css fonts require that the webpage is connected to the internet. Quite often, people who browse on mobile devices will download a webpage when they have coverage and then view it later, when they might not have coverage. In this case, external css fonts will not work

Write code to insert some other external css font-family into a webpage. Hint: http://www.google.com/fonts. When viewing the fonts in the google fonts webpage, make sure to set the "Preview Text:" menu to "Font Name".

Font family files include files use the css @font-face rule to connect a font file to a webpage. To use the @font-face rule, you must download a font. Font Squirrel (http://www.fontsquirrel.com/fonts/list/find_fonts) contains a large set of fonts. Font files can be of type "ttf" or "otf" or "woff".

Example of a font_face font-family (Run Example)

<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Font-Face Example</title>
<style>
@font-face 
{
  font-family : font1942;
  src         : url(1942.ttf);
}

body
{
  font-family : font1942;
}
</style>
</head>

<body>
<p>A font-face font.</p>
</body>
</html>

Face-fonts do not require a link to an external file. Therefore, it is preferable to use @face-fonts rather than linking to an external css file.

Write code that uses two different font-faces: one each for h1 and p, as shown here.

Write code that uses an external provider's CSS file for the <p> tag, a font-face style for the <h1> tag and a default font for the <h2> tag, as shown here.

font-size

The font-size property specifies how large text appears on a webpage. The font-size property can specify the size of a text element in several units:

p
{
  font-size:50px;
}

Insert the code above into a webpage to see it working.

Px and em are the two most commonly used font-sizes. Research both of these and explain the advantages/disadvantages of each over the other.

In addition, font-size can be specified using both relative and absolute keywords. The following are the relative keywords:

The seven absolute keywords (that match the seven HTML sizes) are:

font-weight

The weight of a font is how bold it is. The font-weight property affects how heavily text is drawn on a webpage. Font-weight can take two kinds of values:

keywords

Give an example of where a relative font-weight would be useful.

numerical values

What happens if you give a numerical value of 1?

What happens if you give a numerical value of 1000000?

font-style

The font-style property specifies the style of the font that is to be applied to an element. Font-style can take the value:

text-decoration

The text-decoration property specifies a number of effects. Text-decoration can take one or more of the values:

p
{
  text-decoration:line-through;
}

Write code to remove the underline from hyperlinks, as shown here.

text-transform

text-transform specifies if text should be capitalised. Text-transform can take the value:

p
{
  text-transform:capitalize;
}

font-variant

The font-variant property specifies if text should appear in small capitals. Font-variant can take the value:

p
{ 
  font-variant:small-caps;
}

Insert the code above into a webpage to see it working.

Text Layout

Text layout properties affect how text is laid out on a webpage. These properties are specific to text, providing control over things like line height and letter spacing. The text layout properties are:

letter-spacing

The letter-spacing property gives you control over the space (kern) between characters. Letter-spacing can be specified in any length unit. Negative letter-spacing can be used to make characters appear more closely together.

word-spacing

word-spacing gives control over the space between words (track) in text. Word-spacing can be specified in any length unit. Negative word-spacing can be used to group words closer together.

line-height

The line-height property sets the distance between adjacent lines.

line-height can be specified in a number of ways:

vertical-align

The vertical-align property gives control over how elements align vertically within an element. Vertical-align can be specified by either:

Write code to align a label with the top of a textarea, as shown here.

text-indent

Traditionally, in many documents, the first line of every paragraph is slightly indented. text-indent enables you to control how the first line of any element is indented, or outdented. text-indent can be specified using either percentage or length values. We can control outdent by giving text-indent negative values. When a percentage value is used, the indent or outdent is that percentage of the width of the parent element. The text-indent property affects only the first line of an element. To indent an entire paragraph or other element, use the margin property.

text-align

text-align allows you to specify how the contents of an element should be aligned. text-align can be one of:

Write code to text-indent and justify several paragraphs, as shown here.

Size

We can set the width, height, min-width, min-height, max-width and max-height of an element.

Modify the text-indent and justify code above, so that the paragraphs are all 300px wide.

Write code to set the size of an image to be 100px wide by 300px high, as shown here.

What happens if you only set the width of the image?

Border

Any element may have a border, of varying widths, colours and styles. Elements can have different borders set to a different style, width and colour.

The border properties are:

Each border property always has three values associated with it.

To define the same border properties for each side of an element, use the border property.

{
  border : thin red solid;
}

More than one border property can be set in a style. For example, to give the top edge of an element a thin, red solid border, and the bottom edge a thick black dotted border we"d use the following:

{
  border-top    : thin  red   solid;
  border-bottom : thick black dotted;
}

Write code to place a thick black solid border around an image, as shown here.

An outline is similar to a border, having a thickness color and style. An outline is meant to be used to highlight an element.

Write code to place a thin black solid border and a thick red dashed outline around an image, as shown here.

Margin

Any element can have a margin. A margin is the space between an element and the elements to its top, left, bottom and right. The margin properties are:

The margin properties set the size of the top, left, bottom, right and all margins respectively.

Margins can be specified as either:

Padding

Any element can have padding. Padding is the space between the edge of an element (its border) and its contents. There can be padding to the left, top, bottom and right of any element. The padding properties are:

Padding sizes can be specified in the same way as margins.

Write code to place 20px padding, 50px margin and a thin black border around the images in a webpage, as shown here.

Background

Background properties affect how the background of an element appears. Any element can have a background image or color. Background images can repeat vertically, horizontally, both (the traditional tiling effect of background images in the <body> of HTML webpages) or not at all (enabling easy "watermark" effects). A background image can either scroll or remain fixed while the webpage scrolls.

The background properties are:

background-color

background-color specifies the colour of the background of an element. Any element can be given a background colour. background-color is specified as either a color value, or as transparent.

background-image

Any element can have a background image. To set the background image of a webpage, set the style of the webpage's "body" tag, as shown below. Note that you do not place quotes around the filename.

<style>
body
{ 
  background-image:url(my_image_file_name);
}
</style>

Write code to use an image as a webpage background to a webpage, as shown here.

background-repeat

With the traditional background image associated with the body of a webpage, where the background image is smaller than the width and/or height of the webpage, browsers "tile" the image both horizontally and vertically.

Using styles we can specify how a browser treats background images when the width and height of the image is less than that of the element.

background-repeat can take the following values:

Write code to use a non-repeating image as a webpage background to a webpage, as shown here.

background-size

The width and height of the background image can be set. The background-size can also be set, so that it either fully contains the image (the image will scale so that the whole image is visible) or the background covers the element (the image will scale so that the image widht matches the element width or the image height matches the element height).

Scale a background image, so that it covers the entire webpage, as shown here.

Scale a background image, so that it is fully contained within the webpage, as shown here.

background-position

Set the position of the background image. The position for x and y can be:

left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
x%   y%

Write code to place a background image at the top centre of a webpage, as shown here.

background-attachment

With traditional background images in the body of HTML documents, when the webpage is scrolled, the image scrolls too. Using styles, we can specify that the background image should not scroll, but rather remain fixed as the webpage scrolls.

background-attachment can take one of two values:

Write code to place an image in the same position when a webpage scrolls, as shown here.

background

background is a shorthand property that lets you set any or all background properties at once.

The background property takes exactly the same types of values as the properties described in this section. To specify more than one background property using the background shorthand, the various background values are separated simply by spaces.

For example, the background property

background : url(image.jpeg) fixed no-repeat top center

is the equivalent of

background-image      : url(image.jpeg);
background-attachment : fixed;
background-repeat     : no-repeat;
background-position   : top center;

Cursor

User interface properties allow the shape of the cursor to be set based on the object that it is hovering over. This property sets the shape of the cursor when the mouse is hovering over a selected element. The cursor can be specified as one of several keyword values, or as a URL that points to a file of type .cur (a cursor resource file).

For example, to set the body cursor to crosshair, use the code below:

body
{
  cursor:crosshair;
}

Write code to allow the user to see select and demonstrate each of the cursors, as shown here.

A user defined image can be used as a cursor, as shown below.

body
{
  cursor:url(images/bulls_eye.gif); 
}

When using a user-defined cursor, you should include the position of the cursor hot-spot. In the example below, the hotspot is at the centre of the image (where the image size is 50 by 50 pixels). You should also include a fall-back, in case the browser cannot display the image. In the example below, the fall-back has been set to auto.

body
{
  cursor:url(images/bulls_eye.gif) 25 25, auto; 
}

Write code to set the cursor to be a smiley image, as shown here.

 
<div align="center"><a href="../../versionC/index.html" title="DKIT Lecture notes homepage for Derek O&#39; Reilly, Dundalk Institute of Technology (DKIT), Dundalk, County Louth, Ireland. Copyright Derek O&#39; Reilly, DKIT." target="_parent" style='font-size:0;color:white;background-color:white'>&nbsp;</a></div>