1 / 13

Cascading Style Sheets

Cascading Style Sheets. Class 1, Lecture 1 Rachel A Ober rober@ccs.neu.edu. What is “CSS”?. CSS stands for “Cascading Style Sheet” It is used to define how HTML is displayed. Styles can be stored in external style sheet documents and in the document itself.

kieran-shaffer
Download Presentation

Cascading Style Sheets

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Cascading Style Sheets Class 1, Lecture 1 Rachel A Ober rober@ccs.neu.edu

  2. What is “CSS”? • CSS stands for “Cascading Style Sheet” • It is used to define how HTML is displayed. • Styles can be stored in external style sheet documents and in the document itself. • Style Sheets were implemented in HTML 4.0 to fix the problems caused by Netscape and Internet Explorer who were coming up with different tags to display content. CSS is a standard developed by the W3C to separate content from display.

  3. Why is CSS Important in Design? • HTML was originally developed so that different sections of the document were divided up with different tags. • The two major browsers, IE and Netscape, constantly added new tags that they supported, such as <font>. • This caused a problem where design in the document could not be separated from the content. • What if I have over 100 pages, and now I need to change one design element that’s hard-coded into each document?

  4. Let’s Compare… • We can accomplish the same design by using HTML tags, OR we can separate the content from design by setting up a style sheet. • What if I have 50 documents and want to change the color of the word “different”?

  5. The HTML… uh, eww? • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> • <html> • <head> • <title>Untitled Document</title> • <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> • </head> • <body bgcolor="#999999" text="#000000" link="#663333" vlink="#FF00FF" alink="#999933" leftmargin="3" topmargin="3" marginwidth="3" marginheight="3"> • <h1><i><font color="#9933CC">This is a Header</font></i></h1> • <p align="center">This is a paragraph with some text.</p> • <p>Hey, I have a <a href="http://www.cnn.com/">link</a>!</p> • <p>What about some <b><font color="#FF0000">bold</font></b> and some <font color="#990099">different</font> • <font color="#0000CC" size="+7">colors</font>.</p> • <table width="75%" border="1" cellspacing="10" cellpadding="10"> • <tr> • <td><p align="center">OOh, <font size="3">what</font> about a table?</p></td> • </tr> • </table> • </body> • </html>

  6. New HTML… • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> • <html> • <head> • <title>Untitled Document</title> • <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> • <link href="example2.css" rel="stylesheet" type="text/css"> • </head> • <body> • <h1>This is a Header</h1> • <p class="center">This is a paragraph with some text.</p> • <p>Hey, I have a <a href="http://www.cnn.com/">link</a>!</p> • <p>What about some <b>bold</b> and some <span class="purple">different</span> • <span class="bigandblue">colors</span>.</p> • <table> • <tr> • <td><p class="center">OOh, <span class="big">what</span> about a table?</p></td> • </tr> • </table> • </body> • </html>

  7. a { color: #663333; } a:visited{ color: #FF00FF; } a:active{ color: #999933; } body { color: #000000; background-color: #999999; margin: 3px; } b { font-weight: bold; color: #FF0000; } h1 { font-style: italic; color: #9933CC; } table { padding: 10px; margin: 10px; width: 75%; border: 10pt solid; } .center { text-align: center; } .purple { color: #990099; } .bigandblue { font-size: 40px; color: #0000CC; } Our Style Sheet All we need to change!

  8. Side by Side Comparison…

  9. How to Include CSS… • In a separate, linked file included in the header • <link href="example2.css" rel="stylesheet" type="text/css"> • Within the file header • <style type="text/css"> • <!-- • body {font-family: "Times New Roman", Times, serif;} • --> • </style> • Inline • <p style="color: #000000; text-align: center">This is a paragraph with some text.</p>

  10. What Can I Manipulate? • Pre-Defined Tags • <p>, <b>, <i>, etc… • Pseudo-Classes • a:visited{color: #FF00FF;} • Pseudo-Elements • p:first-letter {color: #0000CC;} • Your Own Classes and IDs The “:visited” part is considered a “pseudo-class” The “:first-letter” part defines the first letter of the paragraph. All paragraphs in the doc will have the first letter blue.

  11. Classes Vs. IDs • There are two ways to identify your own created style in a document. • Classes are used for a site-wide style. Perhaps I want a class called “header” that I use on all of my pages. • IDs are used for very specific content. Perhaps I want the second paragraph in “index.html” to have a certain style.

  12. Classes Denoted with a “.” p.center {text-align: center;} <p class=“center”>…</p> IDs Denoted with a “#” p#blue {color: #0000CC;} <p id=“blue”>…<p> How to Use Them Note: Do not start Classes or IDs with a number! It won’t work in FireFox

  13. Lab #1: Recreating Styles • http://cpu.rachelober.com/lab1 • Objective: • Get familiar with styles and how to use them. • Look at the HTML and try to find a way to convert it into a style sheet. • The customer wants a style, how do you go about designing it? • Stock Images for use: • http://cpu.rachelober.com/stock

More Related