Style sheets Style sheets have been used for years in desktop - - PowerPoint PPT Presentation

▶

Aug 31, 2022 15 likes •246 views

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

SLIDE 1

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

SLIDE 2

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

SLIDE 3

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

SLIDE 4

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> 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>

Rendering:

3-4

SLIDE 5

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

SLIDE 6

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

SLIDE 7

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

SLIDE 8

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> <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>

Rendering:

3-8

SLIDE 9

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

SLIDE 10

CS125 Spring 2014 Interim

Specifying font sizes

3-10

SLIDE 11

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

SLIDE 12

CS125 Spring 2014 Interim

Font families

The five generic font families and some sample typefaces:

3-12

SLIDE 13

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

SLIDE 14

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

SLIDE 15

CS125 Spring 2014 Interim

Class selectors

So far, all of our embedded CSS rules have used HTML element names, e.g., <h1> or <p>, as selectors. What is the down side of these selectors? If you would like a common style for a variety of HTML elements, you could use an inline style for each one of them. However, it is much better to declare an embedded rule with a class selector, that is a selector starting with a period, as follows:

.myclass { color: #FF0000; } // ALL elements in myclass will be red

r even:

p.myclass { color: #FF0000; } // all PARAGRAPH elements in myclass will be red

Now, to add any HTML element to myclass, use the ’class’ attribute, as follows:

<div class="myclass"> ... </div> // this div element is in myclass <span class="myclass"> ... </div> // this span element is in myclass <div> ... </div> // this div element is NOT in myclass

3-15

SLIDE 16

CS125 Spring 2014 Interim

Class selector example

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Class selector example</title> <style> .important { font-weight: bold; } .very_important { color: #FF0000; } </style> </head> <body> <p> This is a normal paragraph containing <span class="important">an important phrase</span> and then more innocuous stuff. </p> <p class="important"> However, this whole paragraph is <span style="font-weight: normal;">very</span>, very, <span class="very_important">very</span> important. </p> <ol> <li class="important">The first item is more important</li> 3-16

SLIDE 17

CS125 Spring 2014 Interim <li>than the second or</li> <li>the last items</li> </ol> </body> </html>

Rendering:

3-17

SLIDE 18

CS125 Spring 2014 Interim

Multiple class selector example

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Multiple class selector example</title> <style> .important { font-weight: bold; } .urgent { text-decoration: underline; } .warning { color: #FF0000; } .corrected { text-decoration: line-through; } </style> </head> <body> <p>blah blah blah</p> <p class="important urgent"> This is an important paragraph that contains time-sensitive information.</p> <p>blah blah blah</p> <p class="important urgent warning">This is an important and urgent warning.</p> <p>blah blah blah</p> <p><span class="corrected urgent warning">This is an urgent warning</span> that is not in effect any longer.</p> </body></html>

Rendering:

3-18

SLIDE 19

CS125 Spring 2014 Interim

Id selectors

Any HTML element may be assigned an id using the attribute by the same name. No two elements in a document may have the same id. So, if you have a style that applies to a single area of your document, you may identify this element with a unique id attribute and then define a CSS rule as follows:

... <style> ... #footer { font-style: italic; } /* note the # sign instead of the period */ ... </style> ... <body> ... <p id="footer">...</p> </body>

Could we use an inline style for the last paragraph instead of an id selector?

3-19

SLIDE 20

CS125 Spring 2014 Interim

External style sheets

What are the two types of styles that we have studied so far? Recall (slide 3-3) that there is a third way to take advantage of CSS, namely to store style rules in a separate file and then to reference this file within your HTML document. What would be the advantage(s) of doing so? An external style sheet must:

Be stored in a text file whose name ends with the extension .css
Contain ONLY style rules: no HTML allowed!
Be referenced in an HTML document using the <link> element, as follows:

<link rel="stylesheet" href="common_style.css">

3-20

SLIDE 21

CS125 Spring 2014 Interim

External style sheets: Example (1/3)

Contents of file mystyle.css:

body { background-color: #6699FF; } #nav { text-align: center; } #footer { font-style: italic; }

CSS validator at: http://jigsaw.w3.org/css-validator/

3-21

SLIDE 22

CS125 Spring 2014 Interim

External style sheets: Example (2/3)

Directory structure for a multi-page web site: web_site____________ / / \ \_ \ / / \ \ \ index.html CV.html personal.html contact.html mystyle.css Contents of file index.html:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>My web site - Home</title> <link rel="stylesheet" href="mystyle.css"> </head> <body> <p id="nav"><a href="index.html">Home</a> | <a href="CV.html">CV</a> | <a href="personal.html">Personal</a> | <a href="contact.html">Contact Info</a> </p> <hr> 3-22

SLIDE 23