CSS for Text and Backgrounds

Colin Gourlay & Kevin Vanderbeken

Today:

Web Typography

Styling Text

Styling Backgrounds

Styling Links

web typography

limitations

A reduced selection of fonts No hyphenation Poor control over kerning A lack of control over how the work is

viewed

contrast

legibility & readability

serif / sans-serif / etc.

how many pixels in a centimeter?

styling text

The good:

<br />

<h1></h1> .. <h6></h6><p></p><a></a>

<tt>Teletype text</tt>

<u></u><li></li><ol></ol>

<blockquote></blockquote>

<code></code><kbd></kbd><samp></samp>

...And more more more!...

Know the text related elements?

The ugly:

<i>Italic text</i><b>Bold text</b><big>Big text</big><small>Small text</small>

The bad:

<applet></applet><basefont /><center></center><dir></dir><font></font>

<embed /><noembed></noembed>

<layer></layer><menu></menu>

<s></s> <strike></strike><xmp></xmp>

<u></u><shadow></shadow>

body {    color: #000000;    font-family: Helvetica, Arial, sans-serif; font-size: 12px;}

p { color: #333; }

h1, h2, h3 { color: # 1B87A4; };

We write our CSS styling rules:

By attaching a base rule we can override elsewhere to the body, we reduce work, and utilise inheritance.

Now for more detail on styling...

font, colour & size

p {    font-family: “Helvetica Neue”, Arial, sans-serif; color: #000000; /*Lets get a little silly...*/ font-size: 1.875em; /*Desired size in px (30px) / Default inherit size(16px)=1.875em */

font-size: 1en; /*Half of an em!*/

font-size: 150%; /*easy to understand relative unit*/

font-size: 12pt; /*yadda yadda*/

font-size: 0.8cm; /*Works! But doesn’t get used for screen - unpredictable!*/

font-size: 18px; /*Quite defined but less scaling*/

/*etc etc*/}

Font, “color” & size:

For text related elements there are properties we can use to control the basics – font, colour and size...

Font, “color” & size:

The Web Fonts... In the degrading pattern of similar families:

• Helvetica, Arial, sans-serif• "Arial Black", Gadget, sans-serif• "Comic Sans MS", cursive• "Courier New", Courier, monospace• Georgia, serif• Impact, Charcoal, sans-serif• "Lucida Console", Monaco, monospace• "Lucida Sans Unicode", "Lucida Grande", sans-serif• "Palatino Linotype", "Book Antiqua", Palatino, serif• Tahoma, Geneva, sans-serif• "Times New Roman", Times, serif• "Trebuchet MS", Helvetica, sans-serif• Verdana, Geneva, sans-serif• Symbol,• Webdings,• Wingdings, "Zapf Dingbats"• "MS Sans Serif", Geneva, sans-serif• "MS Serif", "New York", serif

emphasis & transformation

p {    font-weight: bold; /*normal,900,300,etc*/

text-decoration: underline; /*overline,line-through,blink*/

font-style: italic; /*normal,oblique*/ text-transform: capitalize; /*uppercase,lowercase*/}

Emphasis and transformation:

...

alignment & justification

div {    text-align: left; /*center,right,justified*/

}

Alignment and justification:

...

styling backgrounds

<a href="brochure.pdf" class="pdf">

Download Brochure</a>

Download Brochure

image & colour

a.pdf { background-color: #FFF; background-image: url(../images/pdf-icon.jpg);}

css/style.css

index.htmlcss/ - style.cssimages/ - pdf-icon.jpg

url() / none

image tiling

a.pdf { background-color: #FFF; background-image: url(../images/pdf-icon.jpg);}

Download Brochure

a.pdf { background-color: #FFF; background-image: url(../images/pdf-icon.jpg); background-repeat: no-repeat;}

repeat / repeat-x / repeat-y / no-repeat

position

a.pdf { background-color: #FFF; background-image: url(../images/pdf-icon.jpg); background-repeat: no-repeat;

}

Download Brochure

a.pdf { background-color: #FFF; background-image: url(../images/pdf-icon.jpg); background-repeat: no-repeat; background-position: right center;}

Download Brochure

a.pdf { background-color: #FFF; background-image: url(../images/pdf-icon.jpg); background-repeat: no-repeat; background-position: right center; padding-right: 20px; }

Download Brochure

styling links

what should a link look like?

a {     color: #0070C0;     font-size: 19px;     font-family: Arial;}

Download Brochure

The class of .pdf seen before, relied on the following kind of rule:

But what about interaction?Visited links, hovering links....

a {} /*Base element*/

a:link { } /*fresh new happy link on the page*/

a:visited { } /*links we clicked already in our history*/

a:hover { } /*We’ve got our mouse over it!*/

a:active { } /*Clicked this & waiting on next page to appear*/

the :hover pseudo-selector

a {     color: #0070C0;     font-size: 19px;     font-family: Arial; text-decoration: underline;}a:link { color: #0070C0;}a:visited { color: #659D32; }a:hover { color: #FF0000; text-decoration: none;}a:active { color: #333333; }

next week...

CSS workshop