Webpages and Websites CSS Controlling Appearance the Old Way Older webpages use predefined tags - <i> </i> - italic text; <b> </b> - bold text attributes - Tables (and a few other elements) use specialized attributes» <table border bgcolor="yellow"> - Some tags are used only to apply attributes» <font color="#7f00ff face="comic Sans">hello</font> - but attributes are inconsistent between tags Use CSS Cascaded Style Sheets to control the appearance of elements - Precise, standardized, rules instead of inconsistent attributes and elements 1
So, what is CSS? Cascaded Style Sheets - HTML version 4.0 (and later) supports CSS styles in place of other properties. CSS rules consist of selectors that are associated with specified properties, which have values. Selectors are HTML elements, including: - <div> </div> and <span> </span> Internal style the <style > element is part of the webpage s head Individual elements are controlled by rules - element's name, followed by curly braces { } - properties and values listed inside the curly braces <head> <style type="text/css"> </style> </head> p { color: blue; background: yellow; } h1 { font-family: "Comic Sans MS"; color: #30ff00; } 2
Some Powerful Properties These properties can be applied to most elements: font-weight - values: bold, normal, lighter font-style - values: normal, italic, oblique border - specify width, style, color - example: border: 4px dashed gray; width, margin, padding Colors! - Elements can have:» text color» background color color» borders, which have a color - controls text/foreground color background - controls background color CSS properties: font-family serif - Times New Roman, Bitstream Charter sans-serif - Arial, Trebuchet, Luxi Sans monospace - Courier New, Lucida Console fantasy, cursive - Comic Sans MS, Zapf Chancery, Impact, A list of values is allowed. Example: - p {font-family: Arial, Luxi Sans, sans-serif} 3
A Few Font Examples 24pt Cursive: Blackadder ITC AR Decode Brush Script MT Lucida Handwriting 24pt Fantasy : Algerian Castellar Comic Sans MS Old English Text MT Smoke 24pt Serif: Times New Roman Garamond DejaVu Serif 24pt Sans Serif: Arial Tahoma DejaVu Sans 24pt Monospace: Courier New Consolas DejaVu Sans Mono Lucida Console activity Copy the poem from http://montcs.bloomu.edu/~bobmon/readings/ Language/pronunciation_poem.html Some words are the "subjects" of the poem put these in <em>..</em> tags - For example, "tough", "bough", etc. In the document head, make a CSS element for em that changes the font for these words 4
CSS properties: font-size length - pt units (72pt = 1 inch), a standard measure of fonts - px units (pixels), a display-dependent measure percentage (relative to other fonts) - 100% is medium - 120% is common for large absolute size - x-small, small, medium, large, x-large relative size - smaller, larger CSS properties: text color, background Both text color and background color can be controlled - color short for foreground-color - Basic colors: black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal, aqua - Others? experiment Precise color control is possible with advanced techniques - Covered later 5
activity Add a rule to change the emphasized words' colors Add a rule to change the font-size as well CSS properties: border border property takes a trio of values, in order: - width, in pixels or pts - line-style» solid, dashed, dotted, inset, outset, double, groove, ridge - color, specified as for text, background Examples: - p { border: 4px solid #008080 } body { border: 10% dashed #4040ff } 6
activity Add borders to words, paragraphs How can we apply CSS? Internal define styles in the file's <head></head> section - We will focus on this approach Inline add a "style" attribute to a tag - the selector is implied - useful for ad hoc adjustments External define styles in a separate file - an advanced approach, for large websites 7
A CSS Example The <head></head> contains an internal style block, within <style></style> tags. The body contains one occurrence of inline style. Another CSS example source code This HTML document includes the border, font-size, and font-family properties. The next slide shows how two different, older browsers display it. 8
Another CSS Example as displayed by browsers Internet Explorer 6 (on the left) renders list and body borders incorrectly. Firefox 1.5 (on the right) handles lists better, and has a different "body" size. 9