Post on 27-Jan-2015
description
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>
<sub></sub><sup></sup><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