WRT235: Writing in Electronic Environments CSS Backgrounds, colors, fonts.
1-05: CSS for Text and Backgrounds
-
Upload
apnwebdev -
Category
Technology
-
view
119 -
download
1
description
Transcript of 1-05: CSS for Text and Backgrounds
![Page 1: 1-05: CSS for Text and Backgrounds](https://reader035.fdocuments.net/reader035/viewer/2022062511/54c78b664a7959b8108b457f/html5/thumbnails/1.jpg)
CSS for Text and Backgrounds
Colin Gourlay & Kevin Vanderbeken
![Page 2: 1-05: CSS for Text and Backgrounds](https://reader035.fdocuments.net/reader035/viewer/2022062511/54c78b664a7959b8108b457f/html5/thumbnails/2.jpg)
Today:
Web Typography
Styling Text
Styling Backgrounds
Styling Links
![Page 3: 1-05: CSS for Text and Backgrounds](https://reader035.fdocuments.net/reader035/viewer/2022062511/54c78b664a7959b8108b457f/html5/thumbnails/3.jpg)
web typography
![Page 4: 1-05: CSS for Text and Backgrounds](https://reader035.fdocuments.net/reader035/viewer/2022062511/54c78b664a7959b8108b457f/html5/thumbnails/4.jpg)
limitations
A reduced selection of fonts No hyphenation Poor control over kerning A lack of control over how the work is
viewed
![Page 5: 1-05: CSS for Text and Backgrounds](https://reader035.fdocuments.net/reader035/viewer/2022062511/54c78b664a7959b8108b457f/html5/thumbnails/5.jpg)
contrast
![Page 6: 1-05: CSS for Text and Backgrounds](https://reader035.fdocuments.net/reader035/viewer/2022062511/54c78b664a7959b8108b457f/html5/thumbnails/6.jpg)
legibility & readability
![Page 7: 1-05: CSS for Text and Backgrounds](https://reader035.fdocuments.net/reader035/viewer/2022062511/54c78b664a7959b8108b457f/html5/thumbnails/7.jpg)
serif / sans-serif / etc.
![Page 8: 1-05: CSS for Text and Backgrounds](https://reader035.fdocuments.net/reader035/viewer/2022062511/54c78b664a7959b8108b457f/html5/thumbnails/8.jpg)
how many pixels in a centimeter?
![Page 9: 1-05: CSS for Text and Backgrounds](https://reader035.fdocuments.net/reader035/viewer/2022062511/54c78b664a7959b8108b457f/html5/thumbnails/9.jpg)
styling text
![Page 10: 1-05: CSS for Text and Backgrounds](https://reader035.fdocuments.net/reader035/viewer/2022062511/54c78b664a7959b8108b457f/html5/thumbnails/10.jpg)
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>
![Page 11: 1-05: CSS for Text and Backgrounds](https://reader035.fdocuments.net/reader035/viewer/2022062511/54c78b664a7959b8108b457f/html5/thumbnails/11.jpg)
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...
![Page 12: 1-05: CSS for Text and Backgrounds](https://reader035.fdocuments.net/reader035/viewer/2022062511/54c78b664a7959b8108b457f/html5/thumbnails/12.jpg)
font, colour & size
![Page 13: 1-05: CSS for Text and Backgrounds](https://reader035.fdocuments.net/reader035/viewer/2022062511/54c78b664a7959b8108b457f/html5/thumbnails/13.jpg)
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...
![Page 14: 1-05: CSS for Text and Backgrounds](https://reader035.fdocuments.net/reader035/viewer/2022062511/54c78b664a7959b8108b457f/html5/thumbnails/14.jpg)
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
![Page 15: 1-05: CSS for Text and Backgrounds](https://reader035.fdocuments.net/reader035/viewer/2022062511/54c78b664a7959b8108b457f/html5/thumbnails/15.jpg)
emphasis & transformation
![Page 16: 1-05: CSS for Text and Backgrounds](https://reader035.fdocuments.net/reader035/viewer/2022062511/54c78b664a7959b8108b457f/html5/thumbnails/16.jpg)
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:
...
![Page 17: 1-05: CSS for Text and Backgrounds](https://reader035.fdocuments.net/reader035/viewer/2022062511/54c78b664a7959b8108b457f/html5/thumbnails/17.jpg)
alignment & justification
![Page 18: 1-05: CSS for Text and Backgrounds](https://reader035.fdocuments.net/reader035/viewer/2022062511/54c78b664a7959b8108b457f/html5/thumbnails/18.jpg)
div { text-align: left; /*center,right,justified*/
}
Alignment and justification:
...
![Page 19: 1-05: CSS for Text and Backgrounds](https://reader035.fdocuments.net/reader035/viewer/2022062511/54c78b664a7959b8108b457f/html5/thumbnails/19.jpg)
styling backgrounds
![Page 20: 1-05: CSS for Text and Backgrounds](https://reader035.fdocuments.net/reader035/viewer/2022062511/54c78b664a7959b8108b457f/html5/thumbnails/20.jpg)
<a href="brochure.pdf" class="pdf">
Download Brochure</a>
Download Brochure
![Page 21: 1-05: CSS for Text and Backgrounds](https://reader035.fdocuments.net/reader035/viewer/2022062511/54c78b664a7959b8108b457f/html5/thumbnails/21.jpg)
image & colour
![Page 22: 1-05: CSS for Text and Backgrounds](https://reader035.fdocuments.net/reader035/viewer/2022062511/54c78b664a7959b8108b457f/html5/thumbnails/22.jpg)
a.pdf { background-color: #FFF; background-image: url(../images/pdf-icon.jpg);}
css/style.css
index.htmlcss/ - style.cssimages/ - pdf-icon.jpg
url() / none
![Page 23: 1-05: CSS for Text and Backgrounds](https://reader035.fdocuments.net/reader035/viewer/2022062511/54c78b664a7959b8108b457f/html5/thumbnails/23.jpg)
image tiling
![Page 24: 1-05: CSS for Text and Backgrounds](https://reader035.fdocuments.net/reader035/viewer/2022062511/54c78b664a7959b8108b457f/html5/thumbnails/24.jpg)
a.pdf { background-color: #FFF; background-image: url(../images/pdf-icon.jpg);}
Download Brochure
![Page 25: 1-05: CSS for Text and Backgrounds](https://reader035.fdocuments.net/reader035/viewer/2022062511/54c78b664a7959b8108b457f/html5/thumbnails/25.jpg)
a.pdf { background-color: #FFF; background-image: url(../images/pdf-icon.jpg); background-repeat: no-repeat;}
repeat / repeat-x / repeat-y / no-repeat
![Page 26: 1-05: CSS for Text and Backgrounds](https://reader035.fdocuments.net/reader035/viewer/2022062511/54c78b664a7959b8108b457f/html5/thumbnails/26.jpg)
position
![Page 27: 1-05: CSS for Text and Backgrounds](https://reader035.fdocuments.net/reader035/viewer/2022062511/54c78b664a7959b8108b457f/html5/thumbnails/27.jpg)
a.pdf { background-color: #FFF; background-image: url(../images/pdf-icon.jpg); background-repeat: no-repeat;
}
Download Brochure
![Page 28: 1-05: CSS for Text and Backgrounds](https://reader035.fdocuments.net/reader035/viewer/2022062511/54c78b664a7959b8108b457f/html5/thumbnails/28.jpg)
a.pdf { background-color: #FFF; background-image: url(../images/pdf-icon.jpg); background-repeat: no-repeat; background-position: right center;}
![Page 29: 1-05: CSS for Text and Backgrounds](https://reader035.fdocuments.net/reader035/viewer/2022062511/54c78b664a7959b8108b457f/html5/thumbnails/29.jpg)
Download Brochure
![Page 30: 1-05: CSS for Text and Backgrounds](https://reader035.fdocuments.net/reader035/viewer/2022062511/54c78b664a7959b8108b457f/html5/thumbnails/30.jpg)
a.pdf { background-color: #FFF; background-image: url(../images/pdf-icon.jpg); background-repeat: no-repeat; background-position: right center; padding-right: 20px; }
![Page 31: 1-05: CSS for Text and Backgrounds](https://reader035.fdocuments.net/reader035/viewer/2022062511/54c78b664a7959b8108b457f/html5/thumbnails/31.jpg)
Download Brochure
![Page 32: 1-05: CSS for Text and Backgrounds](https://reader035.fdocuments.net/reader035/viewer/2022062511/54c78b664a7959b8108b457f/html5/thumbnails/32.jpg)
styling links
![Page 33: 1-05: CSS for Text and Backgrounds](https://reader035.fdocuments.net/reader035/viewer/2022062511/54c78b664a7959b8108b457f/html5/thumbnails/33.jpg)
what should a link look like?
![Page 34: 1-05: CSS for Text and Backgrounds](https://reader035.fdocuments.net/reader035/viewer/2022062511/54c78b664a7959b8108b457f/html5/thumbnails/34.jpg)
a { color: #0070C0; font-size: 19px; font-family: Arial;}
Download Brochure
The class of .pdf seen before, relied on the following kind of rule:
![Page 35: 1-05: CSS for Text and Backgrounds](https://reader035.fdocuments.net/reader035/viewer/2022062511/54c78b664a7959b8108b457f/html5/thumbnails/35.jpg)
But what about interaction?Visited links, hovering links....
![Page 36: 1-05: CSS for Text and Backgrounds](https://reader035.fdocuments.net/reader035/viewer/2022062511/54c78b664a7959b8108b457f/html5/thumbnails/36.jpg)
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
![Page 37: 1-05: CSS for Text and Backgrounds](https://reader035.fdocuments.net/reader035/viewer/2022062511/54c78b664a7959b8108b457f/html5/thumbnails/37.jpg)
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; }
![Page 38: 1-05: CSS for Text and Backgrounds](https://reader035.fdocuments.net/reader035/viewer/2022062511/54c78b664a7959b8108b457f/html5/thumbnails/38.jpg)
next week...
![Page 39: 1-05: CSS for Text and Backgrounds](https://reader035.fdocuments.net/reader035/viewer/2022062511/54c78b664a7959b8108b457f/html5/thumbnails/39.jpg)
CSS workshop