CSS for Text and Backgrounds<br />Colin Gourlay & Kevin Vanderbeken<br />
Today:<br />Web Typography<br />Styling Text<br />Styling Backgrounds<br />Styling Links<br />
web typography<br />
limitations<br /><ul><li>A reduced selection of fonts
No hyphenation
Poor control over kerning
A lack of control over how the work is viewed</li></li></ul><li>contrast<br />
legibility & readability<br />
serif / sans-serif / etc.<br />
how many pixels in a centimeter?<br />
styling text<br />
Know the text related elements?<br />The good:<br /><br /><br /><h1></h1> .. <h6></h6><br /><p></p><br /><a></a><br /><sub...
We write our CSS styling rules:<br />By attaching a base rule we can override elsewhere to the body, we reduce work, and u...
font, colour & size<br />
Font, “color” & size:<br />For text related elements there are properties we can use to control the basics – font, colour ...
Font, “color” & size:<br />The Web Fonts... In the degrading pattern of similar families:<br /><ul><li>Helvetica, Arial, s...
"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</li></li></ul><li>emphasis & transformation<br />
Emphasis and transformation:<br />...<br />p {<br />    font-weight: bold;/*normal,900,300,etc*/<br />text-decoration: und...
alignment & justification<br />
Alignment and justification:<br />...<br />div {<br />    text-align: left;/*center,right,justified*/<br />}<br />
styling backgrounds<br />
<ahref="brochure.pdf"class="pdf"><br />	Download Brochure<br /></a><br />Download Brochure<br />
image & colour<br />
Upcoming SlideShare
Loading in...5
×

1-05: CSS for Text and Backgrounds

692

Published on

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
692
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • On the Web, designers have much less control over presentation than they do in other media. This is most obvious when it comes to document canvas properties such as size, resolution, and contrast. There are also severe limitations on the quality of Web typography.
  • Limitations of web typography include:A reduced selection of fontsNo hyphenation, making full justification look ugly when a column of text gets narrowPoor control over kerning (ie, the spacing between the letters)A lack of control over how the work is viewed—designers must account for a wide variety of screen sizes, resolutions and environmentsOther subjects that deserve an introduction are contrast, legibility, and readability, so we&apos;ll go through these now...
  • As you already learned earlier on in the course, one of the most important changes that comes with CSS was the ability to separate presentation, or the way things look, from semantics, or what things mean. The CSS background image is among the most important tools you have at your disposal, because it lets you apply decorative images to particular parts of your HTML without adding any extra weight to your HTML. Previously, authors (that’s you!) were forced to fill their code with img tags.CSS and in particular the background property keep your HTML free from presentational clutter. Redesigns and other transitions, in the life of sites built with modern methods, can then be completed much more smoothly. You’ll be able to update your entire site by changing only the style sheet, rather than recoding every HTML page. Depending on the size of your site, this can be a substantial saving.In this section we’ll show the basics of how CSS background images work, including applying a background image via CSS, adjusting its placement as well as tiling it vertically or horizontally.
  • Set the background-image by showing the browser where to find the image, using the URL. For example; url(alert.png). Note that the path is prefaced with they keyword url and wrapped in parenthesis. This syntax is important to the browser understanding that you mean to indicate a location.Valid values include a URL, none, or inherit.There are several ways to indicate background-color, including RGB values and keywords. Most people use hexadecimal notation, a pound/hash symbol (#) followed by six characters. The first pair indicates the red levels, and the second and third indicate the green and blue levels respectively—#RRGGBB.Many colour picker tools will help you find the hexadecimal notation of a given colour. Pure red, for example would be #FF0000.
  • Images can be tiled vertically, horizontally, or both, to fill the entire width or height of an HTML element. Use background-repeat to instruct the browser to repeat a background image.Valid values include repeat, repeat-x, repeat-y, and no-repeat.
  • Images can be displayed anywhere within the borders of the HTML element on which they are applied. Use background-position to precisely place your images for visual effect and layering.There are many useful ways to indicate background position, keywords and numeric values. Keywords (such as top and bottom) are very useful and easy to read. Pixel values are very precise, but don’t adapt to changing heights and widths.
  • When percentages and pixels are used, the starting point is always the top left corner of the HTML element, although the way image positioning works with pixels and percentages is rather different. Pixels always move the image a set number of pixels towards the bottom and right of the containing box (or towards the top and left if they are negative values), regardless of the size of the image and the containing box. Percentages on the other hand move the image a percentage of the difference between the containing box size, and the image size. If the image and the containing box are the same size, percentages won’t move the image at all.
  • Valid values include length (generally in pixels), percentage (of the width of the element), and the keywords top, right, bottom, left, and center. Note that center can be used to indicate both vertical and horizontal center. Note also that you can mix percentages and pixels in rules, but not keywords and pixels or keywords and percentages.
  • Transcript of "1-05: CSS for Text and Backgrounds"

    1. 1. CSS for Text and Backgrounds<br />Colin Gourlay & Kevin Vanderbeken<br />
    2. 2. Today:<br />Web Typography<br />Styling Text<br />Styling Backgrounds<br />Styling Links<br />
    3. 3. web typography<br />
    4. 4. limitations<br /><ul><li>A reduced selection of fonts
    5. 5. No hyphenation
    6. 6. Poor control over kerning
    7. 7. A lack of control over how the work is viewed</li></li></ul><li>contrast<br />
    8. 8. legibility & readability<br />
    9. 9. serif / sans-serif / etc.<br />
    10. 10. how many pixels in a centimeter?<br />
    11. 11. styling text<br />
    12. 12. Know the text related elements?<br />The good:<br /><br /><br /><h1></h1> .. <h6></h6><br /><p></p><br /><a></a><br /><sub></sub><br /><sup></sup><br /><tt>Teletype text</tt><br /><u></u><br /><li></li><br /><ol></ol><br /><blockquote></blockquote><br /><code></code><br /><kbd></kbd><br /><samp></samp><br />...And more more more!...<br />The ugly:<br /><i>Italic text</i><br /><b>Bold text</b><br /><big>Big text</big><br /><small>Small text</small><br />The bad:<br /><applet></applet><br /><basefont /><br /><center></center><br /><dir></dir><br /><font></font><br /><embed /><br /><noembed></noembed><br /><layer></layer><br /><menu></menu><br /><s></s> <strike></strike><br /><xmp></xmp><br /><u></u><br /><shadow></shadow><br />
    13. 13. We write our CSS styling rules:<br />By attaching a base rule we can override elsewhere to the body, we reduce work, and utilise inheritance.<br />body {<br />    color: #000000;<br />    font-family: Helvetica, Arial, sans-serif;<br /> font-size: 12px;<br />}<br />p { color: #333; }<br />h1, h2, h3 { color: #1B87A4; };<br />Now for more detail on styling...<br />
    14. 14. font, colour & size<br />
    15. 15. Font, “color” & size:<br />For text related elements there are properties we can use to control the basics – font, colour and size...<br />p {<br />    font-family: “Helvetica Neue”, Arial, sans-serif;<br />color: #000000;<br /> /*Lets get a little silly...*/<br /> font-size: 1.875em; /*Desired size in px (30px) / Default inherit size(16px)=1.875em */<br />font-size: 1en; /*Half of an em!*/<br />font-size: 150%; /*easy to understand relative unit*/<br /> font-size: 12pt; /*yaddayadda*/<br />font-size: 0.8cm; /*Works! But doesn’t get used for screen - unpredictable!*/<br /> font-size: 18px; /*Quite defined but less scaling*/<br /> /*etc etc*/<br />}<br />
    16. 16. Font, “color” & size:<br />The Web Fonts... In the degrading pattern of similar families:<br /><ul><li>Helvetica, Arial, sans-serif
    17. 17. "Arial Black", Gadget, sans-serif
    18. 18. "Comic Sans MS", cursive
    19. 19. "Courier New", Courier, monospace
    20. 20. Georgia, serif
    21. 21. Impact, Charcoal, sans-serif
    22. 22. "Lucida Console", Monaco, monospace
    23. 23. "Lucida Sans Unicode", "Lucida Grande", sans-serif
    24. 24. "Palatino Linotype", "Book Antiqua", Palatino, serif
    25. 25. Tahoma, Geneva, sans-serif
    26. 26. "Times New Roman", Times, serif
    27. 27. "Trebuchet MS", Helvetica, sans-serif
    28. 28. Verdana, Geneva, sans-serif
    29. 29. Symbol,
    30. 30. Webdings,
    31. 31. Wingdings, "Zapf Dingbats"
    32. 32. "MS Sans Serif", Geneva, sans-serif
    33. 33. "MS Serif", "New York", serif</li></li></ul><li>emphasis & transformation<br />
    34. 34. Emphasis and transformation:<br />...<br />p {<br />    font-weight: bold;/*normal,900,300,etc*/<br />text-decoration: underline; /*overline,line-through,blink*/<br />font-style: italic; /*normal,oblique*/<br />text-transform: capitalize; /*uppercase,lowercase*/<br />}<br />
    35. 35. alignment & justification<br />
    36. 36. Alignment and justification:<br />...<br />div {<br />    text-align: left;/*center,right,justified*/<br />}<br />
    37. 37. styling backgrounds<br />
    38. 38. <ahref="brochure.pdf"class="pdf"><br /> Download Brochure<br /></a><br />Download Brochure<br />
    39. 39. image & colour<br />
    40. 40. css/style.css<br />a.pdf {<br /> background-color: #FFF;<br /> background-image: url(../images/pdf-icon.jpg);<br />}<br />index.html<br />css/<br /> - style.css<br />images/<br /> - pdf-icon.jpg<br />url() / none<br />
    41. 41. image tiling<br />
    42. 42. a.pdf {<br /> background-color: #FFF;<br /> background-image: url(../images/pdf-icon.jpg);<br />}<br />Download Brochure<br />
    43. 43. a.pdf {<br /> background-color: #FFF;<br /> background-image: url(../images/pdf-icon.jpg);<br /> background-repeat: no-repeat;<br />}<br />repeat / repeat-x / repeat-y / no-repeat<br />
    44. 44. position<br />
    45. 45. a.pdf {<br /> background-color: #FFF;<br /> background-image: url(../images/pdf-icon.jpg);<br /> background-repeat: no-repeat;<br />}<br />Download Brochure<br />
    46. 46. a.pdf {<br /> background-color: #FFF;<br /> background-image: url(../images/pdf-icon.jpg);<br /> background-repeat: no-repeat;<br /> background-position: right center;<br />}<br />
    47. 47. Download Brochure<br />
    48. 48. a.pdf {<br /> background-color: #FFF;<br /> background-image: url(../images/pdf-icon.jpg);<br /> background-repeat: no-repeat;<br /> background-position: right center;<br /> padding-right: 20px; <br />}<br />
    49. 49. Download Brochure<br />
    50. 50. styling links<br />
    51. 51. what should a link look like?<br />
    52. 52. Download Brochure<br />The class of .pdf seen before, relied on the following kind of rule:<br />a {<br />     color: #0070C0;<br />     font-size: 19px;<br />     font-family: Arial;<br />}<br />
    53. 53. But what about interaction?Visited links, hovering links....<br />
    54. 54. the :hover pseudo-selector<br />a {} /*Base element*/<br />a:link { } /*fresh new happy link on the page*/<br />a:visited { } /*links we clicked already in our history*/<br />a:hover { } /*We’ve got our mouse over it!*/<br />a:active { } /*Clicked this & waiting on next page to appear*/<br />
    55. 55. a {<br />     color: #0070C0;<br />     font-size: 19px;<br />     font-family: Arial;<br /> text-decoration: underline;<br />}<br />a:link {<br />color: #0070C0;<br />}<br />a:visited { color: #659D32; }<br />a:hover {<br />color: #FF0000; <br />text-decoration: none;<br />}<br />a:active { color: #333333; }<br />
    56. 56. next week...<br />
    57. 57. CSS workshop<br />
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×