Web Site Design Intermediate – COMP 135 – Spring 2013
Week 4 :: CSS Basics
Styling Text
Logical and presentational styles
It is easy to confuse the difference between logical and presentational elements because
browsers will often display them in the same way. A logical markup element describes what the
content is and a presentational markup element describes what the content looks like. For
example the logical emphasis element (<em>) can be used inline to tell us that a certain group of
words should be <em>emphasized</em> but it will look the same as text marked up with the
presentational italic element, (<i>). Below is a summary of various logical and presentational
tags with notes on usage. Where applicable, use the logical tag and use CSS to style for the
appearance of its presentational equivalent:
Logical tag
Presentational
tag
Usage and Display
<strong>
<b>
To denote emphasis. Displays as bolded text.
<em>
<i>
To denote emphasis. Displays as italic text.
<ins>
<u>
The logical tag simulates the word-processing
equivalent of inserting text. The presentational tag
denotes underline; use CSS text-decoration
property with value underline instead if you want a
pure underline.
<del>
<s> or <strike>
Both types of tag simulates the word-processing
equivalent of deleting text. Use the CSS property
text-decoration with value line-through to replace
the presentational tag.
<big> and <small>
To resize inline text. Use the <span> tag with
appropriate CSS styling.
<tt>
Displays text in a monospaced.
<sup>
Denotes a superscript. Displayed as a raised
character.
<sub>
Denotes a subscript. Displayed as a lowered
character.
1
Web Site Design Intermediate – COMP 135 – Spring 2013
Week 4 :: CSS Basics
<code>
Denotes a code sample. Displayed in the default
monospaced font.
<kbd>
Denotes text entered by the user and displayed in
a monospaced font.
<samp>
Denotes a programming sample and displayed in a
monospaced font.
<cite>
Indicates a citation or reference to another
document. Displayed in italics
<dfn>
Used to denote the first use of a term and is
displayed in italics.
<abbr>
Used to provide the full form of an abbreviation
through the title attribute. Provides accessibility to
the full term in assistive technology browsers and
tool tips for normal browsers. Displayed with a
dotted underline in Firefox when a title attribute is
used.
<acronym>
Used to provide the form of an acronym through
the title attribute. Provides accessibility to the full
term in assistive technology browsers and tool tips
for normal browsers. Displayed with a dotted
underline in Firefox when a title attribute is used.
Well-formed markup
You might wonder why we would want to use these logical tags when the <i> tag would suffice
for those that appear in italics. Indeed, most of the logical tags are not used generally for most
web documents. Physical appearance alone misses the point of HTML. Using the relevant
elements for the appropriate structure of a document can help in CSS styling if you want to
override the default display of the element. This is much harder to do if you wanted to
distinguish a citation from a definition if both are marked by the <i> tag.
Using CSS for styling text
Font colours
The color property is used to set the text colour. It takes a single value in a number of forms:
hexadecimal of the form #RRGGBB (where RR is a red hexadecimal colour value, GG is a green
2
Web Site Design Intermediate – COMP 135 – Spring 2013
Week 4 :: CSS Basics
hexadecimal colour value and BB is a blue hexadecimal colour value), keywords or RGB. There
are seventeen common colour keywords: aqua, black, blue, fuchsia, gray, green, lime, maroon,
navy, olive, orange, purple, red, silver, teal, white, and yellow. Also, browsers have long
supported the 140 colours from the X11 colour chart the full list which available at
en.wikipedia.org/wiki/X11_color_names.
p {
color : #000000;
}
p {
color : black;
}
p {
color : rgb(0,0,0);
}
Font families
The font-family property can be used to specify a list of font faces you want to style your
text with, starting with your first choice and ending with a fallback generic family if the fonts in
the list are not on the user's computer. Which font depends on the user's operating system and
the fonts they have installed and what software they've installed. By specifying a list of
possibilities we allow for this diverse font population.
h1 {
font-family : Arial, Helvetica, sans-serif;
}
p {
font-family : Georgia, “Times New Roman”, serif;
}
pre {
font-family : Courier, “Courier New”, Monaco, monospace;
}
Multi-word font family names need to be enclosed in quotation marks but not single word
names.
Font sizes and line height
Font size is set using the font-size property and specified with a length value. Length values
in CSS in most instances requirement a unit of measurement. These length values are either
absolute or relative:
h1 {
font-size : 2em;
}
3
Web Site Design Intermediate – COMP 135 – Spring 2013
Week 4 :: CSS Basics
p {
font-size : 12px;
}
Absolute length values are fixed and independent of a user's text zoom setting or window
size. A lot of designers set font sizes with pixels (px) because our operating system renders text
in pixels. Until the introduction of text zoom in Internet Explorer 7, Microsoft's browser was the
only modern browser that could not resize text set in pixels and that hindered accessibility.
Word-processing users are familiar with points and you might be tempted to use them but it is
really only suitable for print. The one exception is style sheets designed for printing, which we
will deal with later in the course. Hence it was often recommended that relative values such as
ems (em) and percentages should be used because it allowed the user to resize the text easily.
You could use keywords such as xx-small, x-small, small, medium, large, x-large, and
xx-large. However different browsers define the sizes differently and there is no consensus on
what each size is in relation to each other.
The graphic design term leading has an equivalent CSS property called line-height.
p {
font-size : 100%;
line-height: 1.5;
}
p {
font-size : 14px;
line-height: 20px;
}
The values can be a number, length or percentage. The difference between font-size and
line-height is that line-height is applied to the leading or the space between lines of text.
With line-height half the value is applied above the text and half the value is applied below it.
In the case of a number value the font-size is multiplied by the line-height number value
to get the actual line-height. For example if the font-size is 10px and the line height is just
1.5, then the effective line-height is 15px. One consideration for line-height is that if the
line-height is a percentage value and is inherited, the child element that inherits the value
uses the actual value pre-calculated for the parent. If the line-height value is the unitless
multiplier value than it is inherited as expected.
Font-style, font-weight, and font-variant
The font-style property allows you to set italic or oblique. The font-weight property lets
you set the font heavier or lighter, and although there are many gradations of thickness you will
4
Web Site Design Intermediate – COMP 135 – Spring 2013
Week 4 :: CSS Basics
generally use bold or normal (the default). The font-variant property lets you set a value of
small-caps to de-emphasize upper-case letters in abbreviations and acronyms.
CSS font property shorthand
All these properties can be shortened with the CSS font property. This will save you some
typing in the long run. There are some rules to follow because not all browsers get the order
right. Values are separated by spaces (font-family values are still separated by commas).



Font size should be specified before font family.
Any values omitted use the default setting.
The font-style, font-weight, and font-variant should be placed at the beginning of
the rule before the font-size value.
 The font-size and line-height values can be combined as font-size/lineheight. e.g. 12px/1.5 means font-size: 12px and line-height: 1.5.
A complete example would be like this:
p {
font : italic small-caps bold 12px/1.5 Georgia, “Times New Roman”, serif;
}
Text Layout Properties
CSS provides other properties for text layout settings for alignment, word and letter spacing.
Also there's a font styling property for decorating the text with adornments.
text-align
Text can be aligned using one of four values with the text-align property:




left
right
center
justify
text-indent
The first line of a paragraph is often indented or "outdented" to contrast it with the rest of the
paragraph block. Specify a positive value for the text-indent property indents the first line
whereas a negative value creates an "outdent".
letter-spacing and word-spacing
CSS lets you expand or condense the spacing between letters and words. The letter-spacing
and word-spacing property can take a length value (but not a percentage value) where a
positive value expands the spacing and a negative value condenses it. Using em units is
preferable to pixels because it affords a better proportional spacing when text zoom is used.
5
Web Site Design Intermediate – COMP 135 – Spring 2013
Week 4 :: CSS Basics
text-decoration
The text-decoration property allows us to add to or change the text with strike through, under
line, over line, and blinking (which we hope you never use). This property takes one or more
space separated values:





underline
overline
line-through
blink
none
Background Properties
Element background properties can be specified in a number ways.
background-color
The background-color takes the same values as the color property plus one more — the
keyword transparent. A transparent background-color means the content behind an
element is visible through the element.
background-image
The background-image property is used to add a background image to an element. You might
use it to add a textured pattern, icons, or bullets to a list. The background image can be a single
large image, which can be tiled horizontally, vertically or both. The image can also be positioned.
The image is added to the element by specifying the value in a URL:
body {
background-image: url("path/to/image.png")
}
background-repeat
The background-repeat property determines how an image is repeated:




repeat — Default value repeats image in both directions.
no-repeat — Image shown only once.
repeat-x — Image repeated horizontally not vertically.
repeat-y — Image repeated vertically not horizontally.
background-position
The background-position property allows us to specify where to place an image or where to
start a repeat from. There are a number of values we can use.
6
Web Site Design Intermediate – COMP 135 – Spring 2013
Week 4 :: CSS Basics
Keywords
The background-position property can take one or two keywords. If one keyword is used it
applies to both horizontal and vertical positions. If two keywords are use the first is for the
horizontal position and the second one for the vertical position:





top —The image is placed, or repeats, vertically from the top down.
center — The image is placed, or repeats, horizontally from the centre of the element
left and right, and vertically from the centre of the element up and down.
bottom — The image is place, or repeats, vertically from the bottom up.
left — The image is placed, or repeats, horizontally from the left-hand side of the
element to the right.
right — The image is placed, or repeats, horizontally from the right-hand side of the
element to the left.
Length Values
We can specify one or two length values to specify where the image is placed or repeated from.
Note we cannot place an image along the right side of an element with a length value unless the
width of the element is fixed.
Percentage Values
Percentage values allow us to specify the placement of the background image in a more subtle
way. Unlike the length value a percentage value does not specify a vertical or horizontal offset
from the top or left of the element. Using this example:
background-position: 60%
means that the image is aligned from a point 60% from the left edge of the image horizontally
with a point 60% from the left edge of the element.
background-attach
The background-attach property can be used to "fix" an image in place so that when the content
of the element is scrolled the image remains in a fixed position in the background. It can take
the keyword values, the default scroll or fix.
Shorthand background Property
Just as with the font property the background property is shorthand for all the above
background properties. Unlike the font property the order of the values is not important.
However it is important not to mix the shorthand and regular properties in a single statement
because the shorthand sets all values including defaults that are not specified.
7
Web Site Design Intermediate – COMP 135 – Spring 2013
Week 4 :: CSS Basics
The Box Model
Concepts






Block level elements can be modeled as a box having four sides: top, right, bottom, and
left. This creates a set of CSS properties that we can modify. This is the basis of what is
also known as the CSS Box Model.
The width property value sets the length between the left and right sides of our
content box and the height property value sets the length between the top and
bottom sides of the our content box. Parallel sides (left/right, top/bottom) always have
the same length. When these properties are not specified for an element their default
width is the length of the longest line of content and the distance between the ascender
and descender of the type face, respectively.
The margin is the space between the borders of two elements. Setting the margins to a
value of 0 removes any gaps between adjacent elements.
The border is a line that surrounds the element and is normally invisible unless the
border property has a color, width and style specified.
The padding is the space between the inside of the border and the content of the
element.
The content and background is the area in the centre of the element box. All other CSS
properties (font, text, color, background, etc) apply to whatever is in the content area.
This area can be text, forms, lists, and images. The background properties also extend to
the padding area but not into the margin. For example if the background-color
property was set to a value of orange, only the padding and content areas would be
coloured orange.
8