Cascading Style Sheets (CSS) Why do we need them? Separate structure from browser presentation There are many HTML presentation attributes –We want to eliminate the need for these attributes –We want the HTML tags to focus on document structure –We want to standardize HTML specifications Define an entire site’s look and feel in one file –Maintenance is much easier –One change can apply to the whole site –Achieve consistency across the web site Tag related instructions to browsers

Types of Cascading Style Sheets In-line level –Apply to content (e.g. content ) of a single tag –How To: use the style attribute in any tag Document level –Apply to an entire web page –How To: Insert a style tag into the head section External level –Apply to a group of web-pages –How To: Use the link tag to reference a style sheet file Note: In-line styles override document and external styles; document styles override external styles. Hence they cascade.

Style Sheet Syntax Inline: Document Level (The tag must be in section) <!– comment so non CSS browsers will ignore tag { styletype:value; … styletype:value;} tag.stylename {styletype:value; … styletype:value;}.stylename {styletype:value; … styletype:value;} --> External Level (document level syntax without the tag) Examples will follow on subsequent slides

In-line CSS Example This paragraph is uppercase and red. Style types used in this example –text-transform has a value of uppercase –color has a value of red Syntax –Style Type : style value –Separate style specifications using semicolons. –Enclose the style attribute value in quotes. These apply to the content of a single tag

Document Level CSS Example Insert style tag into the head section p {font-size:20pt; font-family: "courier"; text-align:center; font-weight:bold; } Paragraph tags now use the style specifications font size 20 in courier center this paragraph and display bolded

Font Families Separate a series of fonts with commas p {font-family: Lucida, Arial;} Which font will browsers use? –The first one that it knows about –A default if none in the list exists Default families that all browsers recognize –Monospace: all letters have the same width –Others: serif, sans-serif, cursive, or fantasy

HTML Colors Color:#A06033; (A0 red, 60 green, 33 blue) –Value range: ‘00’ to ‘ff’; smaller values are darker Specify colors with hexadecimal (hex) numbers –Hex numbers digits range from 0 to f, not 0 to 9 –A=10, B=11, C=12, D=13, E=14, F=15 –Examples: F9 = 15*16 + 9, 37 = 3* There are web color palettes on the web –Web safe colors look the same on all monitors –Useful so hex codes don’t need to be memorized

Built In HTML Colors ColorNumber Black# Gray# Silver#C0C0C0 White#FFFFFF Red#FF0000 Maroon# Magenta#FF00FF Purple# ColorNumber Blue#0000FF Navy# Aqua#00FFFF Teal# Green# Olive# Lime#00FF00 Yellow#FFFF00

Example with Colors Style tag in the head section h2 {color:red;} h3 {color:#d61130;} Utilize the specifications in the HTML body red text darker red

Example with Fonts Style Tag in head section p {font-style:italic; font-weight:500; font-variant:small-caps; font-size:14pt; line-height:24pt; font-family:Lucida, Arial; } Shorter way to write the same thing p {font: italic 500 small-caps 14pt/24pt Lucida, Arial; }

Other Style Sheet Syntax Style Sheet SpecificationApplies To h1,h2,h3 {font-size:large;}h1, h2, and h3 tags h1#large {font-size:30pt;} #notLarge{font-size:20pt;}Any tag with id="notLarge" a:visited{color:red;}Hyperlink already visited a:link {color: #FF0000;}Unvisited hyperlink a:active {color: #0000FF;}Selected hyperlink a:hover {color: #FF00FF;}Mouse over a hyperlink

Some CSS Styles and Values TypeValue font-familyVerdana, Arial, Serif, "Times New Roman" font-sizexx-small, x-small, small, medium, large, x-large, xx- large larger, smaller, 10px, 20pt, 0.5in font-stylenormal, italic, oblique font-weightnormal, bold, bolder, lighter, 100, 300 font-variantsmall-caps, none text-indent10%, 20cm, 15pt,.5in text-decorationunderline, overline, line-through, blink, none text-transformuppercase, lowercase, capitalize, none text-alignleft, right, center justified Reference:

More CSS Styles and Values TypeValue word-spacing3pt,1cm,.25in letter-spacing3pt, 1cm,.25in margin-top12pt, 2.5cm, 1in margin-bottom12pt, 2.5cm, 1in margin-left12pt, 2.5cm, 1in margin-right12pt, 2.5cm, 1in colorred, #FF0000 background-colorred, #FF0000 background-imageurl(picture.gif`) background-attachmentscroll, fixed Reference:

CSS Classes Style Sheet h1 {font-size:xx-large;} h1.small {font-size:xx-small;}.allTags {font-size:large;} Usage Displays xx-large Displays be xx-small l Any tag can be large

The and tags These tags exist because of CSS –Generic tags that CSS can customize –We can make tags to our own specifications –Eliminate the need for browsers to define new tags tag –Block tag that applies to sections of a document –Example: Displays Red tag –Inline tag that applies to text in a document section –Example: Use doIt style

External Style Sheets Create a text file (Name it with a css extension) Type in the style sheet specifications –Don’t include the style tag –Don’t include HTML comments –CSS comments: /* This is a CSS-comment */ Use link tag in HTML document headers An HTML document can have –More than one link tag –Can have both external and document specifications

More HTML and CSS Help Lots of examples: Documentation –Site for web specification –Site for tutorials and lots of help

Some Review Questions What is a Monospace font? Give an example? What is the advantage of using the font property? How do you use the id attribute with style sheets? How do you change the color of a hyperlink that was already visited? What are differences between inline, document level, and external style sheets? What is a css class? When would you use the and tags? What is a font family?