CS125 Spring 2014 Interim Style sheets Style sheets have been used for years in desktop publishing to apply typographical styles and spacing to printed media. Cascading Style Sheets (CSS) are a flexible, cross-platform, standards-based language developed by the W3C to provide the functionality of style sheets (and much more) for web developers. For example, you will use CSS to configure text, colors and general page layout. CSS versus HTML: • HTML is a markup language to specify the content/structure of web documents (e.g., this part of the document is a header) • CSS is a language to specify the presentation (look and feel) of web documents (e.g., in this document, headers are displayed with a bold font on a red background) Advantages of using CSS: • Greater typography and page layout control • Style is separate from structure • Styles can be stored in a separate document and linked to from the web page • Potentially smaller documents • Easier site maintenance 3-1
CS125 Spring 2014 Interim CSS Syntax Each style sheet contains a sequence of rules. Each rule contains a selector and a declaration block. Each selector identifies which part of the document will be affected by the style rule, for example, all the <h1> headers, or a subset of the paragraphs, or even a single sentence. Each declaration block contains one or more declarations. Each declaration is a CSS property:value pair followed by a semi-colon. Example: h1 { color: white; background-color: black; } p { margin-left: 100px; margin-right: 20px; } a:link { color: red; } /* unvisited link */ a:visited { color: green; } /* visited link */ a:hover { color: purple; } /* mouse over link */ a:active { color: blue; } /* selected link */ 3-2
CS125 Spring 2014 Interim CSS types The location where the CSS rules are stored defines the type of style sheet that you are using: • Inline styles : Configured in the body of the web page using the style attribute of an HTML tag and thus applies only to that specific element • Embedded styles : Configured in the header section of a Web page using the HTML <style> element and thus applies to the entire web page • External styles : Configured in a separate text file with the .css file extension and using the HTML <link> element in the header section of a web page • Imported styles : Similar to external styles but not discussed in this course 3-3
CS125 Spring 2014 Interim Embedded styles In this case, the CSS rules are inside the <style> element within the header. <!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8"> <title>Embedded CSS example</title> <style> Rendering: h1 { color: white; background: black; } p { margin-left: 15px; margin-right: 200px; } a:link { color: red; } /* unvisited link */ a:visited { color: green; } /* visited link */ a:hover { color: purple; } /* mouse over link */ </style></head> <body> <h1>First Section</h1> <p>This is a paragraph used to demonstrate the use of margin properties as well as the colors of links:</p> <ul> <li><a href="./index.html">Home</a></li> <li><a href="./clients/index.html">Clients</a></li> <li><a href="./contact/index.html">Contact us</a></li> </ul> <h1>Second Section</h1> blah blah blah <h1>Third Section</h1> </body></html> 3-4
CS125 Spring 2014 Interim Specifying colors Computer monitors display color as a combination of red, green, and blue light intensities with values from 0 to 255. Often, hexadecimal numbers (base 16) are used instead of decimal numbers (base 10). For each color component in the RGB color scheme , its value can range from 00 to FF. In the hexadecimal system, the digits are 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F (or 0 to 15). Larger numbers are constructed as follows: 10,11,12,. . . ,19,1A,1B,1C,1D,1E,1F,20,21,. . . ,2F,30,31,. . . ,F9,FA,FB,FC,FD,FE,FF. HTML uses RGB colors represented in hexadecimal indicated by an initial # and followed by three numbers between 00 and FF, one each for Red, Green, and Blue in this order. A table of so-called “web safe colors” can be found at: [of historical interest] http://webdevfoundations.net/color/ 3-5
CS125 Spring 2014 Interim Accessibility and colors Not everyone is able to see or distinguish among colors. In fact, according to http://www.vischeck.com/vischeck , 1 out of 20 people experience some type of color deficiency. Therefore, it is important to choose your colors carefully. Here are some guidelines: Do not rely on color only to convey information. Avoid using red, green, brown, gray, or purple next to each other. White, black, and shades of blue and yellow are easier to differentiate. See the simulation at: http://www.vischeck.com/vischeck/vischeckURL.php 3-6
CS125 Spring 2014 Interim How to choose a color scheme? • Monochromatic http://meyerweb.com/eric/tools/color-blend • Choose from a photograph or other image http://www.colr.org • Other helpful sites: http://colorsontheweb.com/colorwizard.asp http://kuler.adobe.com http://colorschemedesigner.com/ 3-7
CS125 Spring 2014 Interim Specifying colors with CSS As before, you can do so with an embedded style. But you can also use inline styles with the ’ style ’ attribute. <!DOCTYPE html> Rendering: <html lang="en"> <head> <meta charset="utf-8"> <title>Specifying colors in CSS</title> <style> h1 { color: #FFFFFF; background-color: #000000; } </style> </head> <body style="background-color: #9999FF;"> <h1>First Section</h1> <p>blah blah blah</p> <h1 style="color: #00FFFF;">Second Section</h1> <p>blah blah blah</p> <h1>Third Section</h1> <p style="color: #FF0000;">This is a paragraph used to demonstrate the use of foreground colors.</p> </body> </html> 3-8
CS125 Spring 2014 Interim Configuring text with CSS CSS properties for configuring text: • font-family – Configures the font typeface of the text • font-size – Configures the size of the text • font-style – Configures the style of the text, e.g., set to italic style • font-weight – Configures the level of boldness of text 3-9
CS125 Spring 2014 Interim Specifying font sizes 3-10
CS125 Spring 2014 Interim Guidelines for text styles Text is extremely tricky to configure since not everyone has the same fonts installed on their computer. • It is crucial to test your web pages on a variety of client platforms, including different browsers and monitor resolutions. • Pick so-called web-safe fonts (see http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html ) • Sans-serif fonts are easier to read. • For size, do not use the (absolute) pixel (px) and point (pt) unit. • Use the em and percentage font sizes: these are relative to the font size of the parent element and they can be easily enlarged in all browsers by users. The em unit is the height of the letter M in the current font. • When specifying a font family, provide an ordered list ending with a generic family name, as a backup. Example: p { font-family: Arial,Verdana,sans-serif; } 3-11
CS125 Spring 2014 Interim Font families The five generic font families and some sample typefaces: 3-12
CS125 Spring 2014 Interim The <div> and <span> elements These elements group together contents that share the same presentation. The main difference between these elements is that <div> is block-level while <span> is inline-level. Note that the following example also illustrates the text-align property. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>span versus div</title> </head> <body> <div style="text-align: right;"> <div style="font-family: serif;"> Serif: <span style="font-size: xx-small;">xx-small</span> MMM <span style="font-size: x-small;">x-small</span> MMM <span style="font-size: small;">small</span> MMM <span style="font-size: medium;">medium</span> MMM <span style="font-size: x-large;">x-large</span> MMM <span style="font-size: xx-large;">xx-large</span> </div> 3-13
CS125 Spring 2014 Interim <div style="font-family: sans-serif;"> Sans-serif: <span style="font-size: xx-small;">xx-small</span> MMM <span style="font-size: x-small;">x-small</span> MMM <span style="font-size: small;">small</span> MMM <span style="font-size: medium;">medium</span> MMM <span style="font-size: x-large;">x-large</span> MMM <span style="font-size: xx-large;">xx-large</span> </div> </div> </body> </html> Rendering: 3-14
Recommend
More recommend
