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
23
Embed
CS125 Spring 2014 Interim Style sheets · CS125 Spring 2014 Interim CSS Syntax Each style sheet contains a sequence of rules. Each rule contains a selector and a declaration block.
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
CS125 Spring 2014 Interim
Style sheetsStyle 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 SyntaxEach 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>
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
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 colorscheme, 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: