Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Introduction to Cascading Style Sheets <style type="text/css" media="screen"> <!-body { font-family: Arial, Geneva, sans-serif; background-color: white; color: black} p { width: 550px; } h1 { text-align: left; } h3 { font-size: 1em; display: run-in; } h2 { text-align: center; background-color: #FFF8E1; color: #800000; font-size: 1em; margin-bottom: .18em; } ul { list-style: square; width: 520px; } em { font-weight: bold; background-color: #FFFFFF; color: #800000; font-style: normal; } .smalltext { font-size: 40% } .bar { background-color: #ffcc00; color: #000080; font-size: x-small; width: auto;} a:link { color: #000080; background-color: #ffffff; } a:visited { color: #404040; background-color: #ffffff; } a:active { color: #ff0000; background-color: #ffffff; } a.bar:link { color: #000080; background-color: #ffcc00; } a.bar:active { color: #ff0000; background-color: #ffcc00; } a.bar:visited { color: #404040; background-color: #ffcc00; } --> </style> WVU OIT Technical Support Services 293-4444 (Help Desk) oit.wvu.edu/training/classmat/css/ Instructor: Kathy Fletcher Table of Contents Table of Contents ............................................................................................................ ii What are style sheets? .................................................................................................... 1 How CSS Works .......................................................................................................... 1 Why use style sheets? ................................................................................................. 1 How to add style sheet rules to your web page ............................................................... 2 Linked or External Style Sheet .................................................................................... 2 Activity 1: Apply a variety of external style sheets to the sample html file ................ 2 Inline or Local Style Sheet ........................................................................................... 2 Activity 2: Add an inline style .................................................................................... 3 Embedded or Global Style Sheet................................................................................. 3 Activity 3: Create a simple embedded style sheet .................................................... 3 Text Properties ................................................................................................................ 4 Activity 4: Add style rules to control text appearance ............................................... 4 Margins, Indent, Alignment.............................................................................................. 5 Borders............................................................................................................................ 5 Shorthand properties ....................................................................................................... 5 Activity 5: Margins, Alignment, Indent ...................................................................... 6 Activity 6: Borders .................................................................................................... 6 Class ............................................................................................................................... 6 Pseudo-class for links ..................................................................................................... 6 Activity 7: Class and Pseudo-class for Links ............................................................ 7 Validation ........................................................................................................................ 7 Create different style sheets for print and screen ............................................................ 7 Using Style Sheets in Dreamweaver ............................................................................... 8 References ...................................................................................................................... 9 ii Intro to CSS What are style sheets? A Style Sheet is a set of rules that allow you to control how your web document will appear in the web browser. How CSS Works CSS overrides the browser's default settings for interpreting how tags should be displayed, letting you use any HTML element indicated by an opening and closing tag (including the <p> tag) to apply style attributes defined either locally or in a style sheet. Structure of a Rule Style sheets contain rules. A rule has several component parts. The first part of the Rule (<p> <H1>) is called the Selector. This tells the browser which element on the page to work with. The curly bracket pair contains the Declaration, which is comprised of a Property (color) and a Value (#333333). Here's the basic syntax of a rule defined: Selector { property: value } Examples: P {font-family: Times, 'Times New Roman', serif; font-size: 80%; color: red; } You can specify several properties on one rule: H1 { font-family: Times, serif; color: black; font-size: 2em; } You can group tags in the selector portion: H1, H2, H3 { font-family: Times, 'Times New Roman', serif; } You can also be very specific by using a contextual selector. In the example below, the rule will only be applied to emphasized text inside of a Heading1 tag. In the Document: <h1>Heading <em>One</em></h1> The Rule: H1 EM { color: maroon; font-style: italic; } The Results: Heading One Why use style sheets? create a set of web pages with consistent appearance easier maintenance – make changes in one place separate page structure from page appearance ADA compliance reduce web page file size reduce your reliance on non-standard tags such as <center> and <font> 1 How to add style sheet rules to your web page There are different ways to apply style sheets to an HTML document. Linked or External Style Sheet Use a single style sheet (in a separate file, saved with the .css suffix) to define multiple pages. A typical .css file is a text file containing only style rules (No javascript comments, no HTML or anything else, only CSS), as here: P {font-family: non-serif; font-size: medium; color: red} H1 {font-family: serif; font-size: x-large; color: green} H2 {font-family: serif; font-size: large; color: blue} To apply a linked .css style sheet ("stylesheetname.css" in the example below) to an HTML page, a <link> tag is added to the page header: <link rel="stylesheet" href="/pathname/stylesheetname.css" type="text/css"> Creating a linked style sheet allows you to define your CSS rules in one place. Linked style sheets ease web page maintenance, reduce file size, and increase accessibility. Activity 1: Apply a variety of external style sheets to the sample html file 1. Open the file vita.html in Notepad and in Internet Explorer 1 . The files you will use in today's workshop are in the CSS folder in C:\OIT_Workshops\. 2. Enter or copy the link statement into the HEAD section, after the title statement. <link rel="STYLESHEET" type="text/css" href="style.css"> 3. Save the file and refresh your web browser. 4. Edit the link statement to refer to style2.css. Save the file and refresh the browser to see how a different style sheet can change page appearance. 5. Repeat for style3.css Inline or Local Style Sheet This means you specify a CSS style at this specific point for this specific tag in this specific document, like this: <p style="color: #FF6600;">paragraph in orange text.</p> 1 To open any html file in IE in this training lab: 1. Go to C:\OIT_Workshops\CSS\ double-click the vita.html file. 2. Or: open IE and make it fit on only part of the screen. 3. Open My Computer from the desktop. Open the C:\OIT_Workshops\CSS\ folder. 4. Drag the vita.html file on top of the open browser window. 2 Intro to CSS Activity 2: Add an inline style 1. Open the file.html in your editor and browser. 2. Change the heading & document contents, and add a second heading. 3. Make the heading blue with a pink background by adding the below inline style to the H1 tag. <h1 style="color: blue; background-color: pink;"> 4. Type your name and email address at the bottom. 5. Save your changes and refresh your web browser. Embedded or Global Style Sheet This style sheet must go in the <head> </head> section of your document and defined within the <style> and </style> tags. This style sheet applies to the entire document. Use when a single document has a unique style. <style type="text/css"> <!-h1 { font-family: Arial, sans-serif; color: red; background-color: white; } p {color: #000088;} --> </style> Note: The HTML comment tags <!-- and --> are used to prevent style sheet content from displaying in old browsers that don't support style sheets. This will be the technique we will use for the rest of the workshop. Activity 3: Create a simple embedded style sheet Set body text and body background colors in file.html. <style type="text/css"> <!-body { color: #000080; background-color: #ffffcc; } --> </style> Note on precedence: In cases where inline, embedded, and linked style definitions conflict, the most specific style sheet will generally take precedence: inline overrides embedded, embedded overrides linked. Inline style attributes overrides all. 3 Text Properties font-family: Arial, Helvetica, Verdana, Geneva, Tahoma, sans-serif Times, 'Times New Roman', serif Courier, "Courier New", monospaced 'Lucida Handwriting', 'Comic Sans MS', Technical, 'Zapf Chancery', cursive 'Curlz MT', Jokerman, Keypunch, Klingon, fantasy font-size: percentage of default font size: e.g. 200% | 40% pt: points – e.g. 36pt | 14pt | 18pt (potential problem for macintosh browsers) em: the size of the letter m in that font – e.g. 2em | 1.75em | .5em xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller font-weight: normal | bold bolder | lighter 100 | 200 … 700 | 800 | 900 font-style: normal | italic | oblique text-decoration: none | underline | line-through line-height: controls the "leading" or white space between lines pt em percentage normal p { font-family: Arial, Helvetica, sans-serif; font-size: 1em; color: navy; background-color: white; line-height: 2em;} h1 { background-color: yellow; font-size: 1.75em; } em { font-family: Times, serif; font-size: larger; font-weight: bolder; font-style: italic; color: yellow; background-color: transparent; } Activity 4: Add style rules to control text appearance 1. Change the appearance of your paragraphs, your list item text, your headings. 2. Use the line-height property on your paragraph for extra white space between lines. 4 Intro to CSS Margins, Indent, Alignment • • • • margin-top margin-right margin-bottom margin-left Can specify as length in pixels, em, as a percentage, or as "auto". p { margin-top: 0.25em; margin-right: 1em; margin-bottom: 0.25em; margin-left: 1em;} text-indent: length (in pixels, points, inches, or em) or as a percentage; default is 0 p { text-indent: 3em; } p { text-indent: -4em; padding-left: 4em; } text-align: left | right | center h1 { text-align: center; } Borders • • • border-style: none | dotted | dashed | solid | double | groove | ridge border-width: thin | medium | thick border-color: specify a color as for text and background p { border-style: solid; border-width: medium; border-color: #ffcc00; } h1 {border-style: solid none none none; } • border-top, border-right, border-bottom, border-left Specify the width, style, and color – order doesn't matter here. h1 { border-top: thick solid silver; border-right: 0.25em dotted black ; border-bottom: 10px double gray; border-left: 3px dashed red; } Shorthand properties p { margin: 0.25em 1em 0.25em 1em; } .25em top 1em right .25em bottom 1 em left (just think of the word "TRouBLe") p { margin: 0.25em 1em; } same as above; use if you want top & bottom the same & left/right the same em { font: italic bold 2em Helvetica, sans-serif; } font: list font-style | font-weight | font-size | font-family order is important! font-size and font-family are required p { border: thick silver solid; } 5 Activity 5: Margins, Alignment, Indent 1. Using margin properties, set margins for your paragraph and for your list items. 2. Center your heading using the text-align property. 3. Indent your paragraph. Activity 6: Borders 1. Add a box around your paragraph. 2. Add a line above your heading or your list. Class Create a custom rule that you can use in multiple locations. Note the period in front of the class name. .warning { color: red; background-color: transparent; font-weight: bold; } Type some text here <SPAN class="warning">warning goes here</SPAN> more text here. .bar { background-color: #ffcc00; color: #000080; font-size: x-small; width: auto;} <p class="bar"><a href="http://www.wvu.edu/~cir/" class="bar" >OIT</a> > <a href="../../../index.html" class="bar">Support Services</a></p> Pseudo-class for links • • • • a:link -this is a link that has not been clicked, nor is a mouse pointer hovering over it a:visited -this is a link that has been clicked before, but has no mouse on it a:active -this is a link that is in the process of being clicked a:hover -this is a link currently has a mouse pointer hovering over it/on it a:link { color: blue; background-color: transparent; text-decoration: none; } a:visited { color: orange; background-color: transparent; text-decoration: none; } a:active { color: red; background-color: lime; text-decoration: underline; } a:hover { color: #DC143C; background-color: #F0F8FF; text-decoration: underline; } a.bar:link { color: #000080; background-color: #ffcc00; } a.bar:active { color: #ff0000; background-color: #ffcc00; } a.bar:visited { color: #404040; background-color: #ffcc00; } 6 Intro to CSS Activity 7: Class and Pseudo-class for Links 1. Create your own Class declaration and use it on your page. 2. Modify your links' appearance using the a:link, a:hover, etc. rules and test them in your document. Validation "You can save a lot of time and effort simply by running your CSS through a validity checker." 2 • W3C CSS Validator: jigsaw.w3.org/css-validator/ • WDG CSScheck: www.htmlhelp.com/tools/csscheck/ Create different style sheets for print and screen <style type="text/css" media="print"> <!-P, li {font-size: 12pt; font-family: Times, serif; } h1 { font-size: 18pt; font-family: Times, serif; font-weight: bold; color: black; background-color: white; } h2 { font-size: 14pt; font-family: Times, serif; font-weight: bold; color: black; background-color: white; } h3 { font-size: 12pt; font-family: Times, serif; font-weight: bold; color: black; background-color: white; } ul { list-style: square; page-break-inside: avoid;} em { background-color: white; color: black; font-style: italic; font-weight: bold; } .bar {display: none;} .break {page-break-after: always;} .smalltext { font-size: 75% } --> </style> <style type="text/css" media="screen"> <!-body { font-family: Arial, Geneva, sans-serif; background-color: white; color: black} p { width: 550px; } h1 { text-align: left; } h3 { font-size: 1em; display: run-in; } h2 { text-align: center; background-color: #FFF8E1; color: #800000; font-size: 1em; margin-bottom: .18em; } ul { list-style: square; width: 520px; } em { font-weight: bold; background-color: #FFFFFF; color: #800000; font-style: normal; } .smalltext { font-size: 40% } .bar { background-color: #ffcc00; color: #000080; font-size: x-small; width: auto;} a:link { color: #000080; background-color: #ffffff; } a:visited { color: #404040; background-color: #ffffff; } a:active { color: #ff0000; background-color: #ffffff; } a.bar:link { color: #000080; background-color: #ffcc00; } a.bar:active { color: #ff0000; background-color: #ffcc00; } a.bar:visited { color: #404040; background-color: #ffcc00; } --> </style> Refer to: www.geocities.com/kfletche.geo/css/etdlist3.htm for how these styles work. 2 Cascading Style Sheets, Eric A. Meyer, page 396 7 Using Style Sheets in Dreamweaver When you are editing a file in Dreamweaver, if you have a stylesheet in the Templates folder, you can add a link statement in the <head> section of your web page: <link href="Templates/bw.css" rel="stylesheet" type="text/css" media="screen"> If the file is saved in a deeper folder in your web site, the href portion will have a longer path name: <link href="../../../Templates/bw.css" rel="stylesheet" type="text/css" media="screen"> If you are editing a new file, you will have to save it before the style sheet will be accessible. Click on the CSS Styles tab in the Design palette if it is not already on top. Expand the list of styles if you need to by clicking on the + sign next to the file name. Select the text you wish to apply the style to. If there is a style associated with an HTML tag, you just have to assign that paragraph format to the text. For instance, I could click once on my heading paragraph, then go to the Format select box in the Properties template and select Heading 1. The characteristics of that HTML tag would be applied to the text. You can also click on the html listed on the tag selector area of the status bar to select the text. For instance to select my first paragraph, I could click on the <p> on the status bar Right click on the selected text and click on CSS Styles from the shortcut menu. Then select the style you wish to apply. What you see on your list will vary depending on what customized classes were created in the style sheet. An alternative technique is to select the text, right click on the style name in the CSS Styles palette, and choose Apply from the shortcut menu. 8 Intro to CSS References CSS: The Definitive Guide, Third Edition, Eric A. Meyer, O'Reilly, 2006; ISBN: 0-596-52733-0 www.oreilly.com/catalog/csstdg3/ Eric Meyer on CSS: Mastering the Language of Web Design, 2002; ISBN: 978-0-7357-1245-4 www.ericmeyeroncss.com More Eric Meyer on CSS, 2004; ISBN: 978-0-7357-1425-0 more.ericmeyeroncss.com So You Want Cascading Style Sheets, Huh?, Joe Burns, HTML Goodies www.htmlgoodies.com/tutors/ie_style.html Cascading Style Sheets Tutorials, John Pollock, The Web Design Resource www.pageresource.com/dhtml/indexcss.htm (warning – there will be one persistent pop-up ad box – just close it when you’re done). Cascading Style Sheets Home Page links to tutorials, supported browsers, authoring tools, specifications, and news about CSS: www.w3.org/Style/CSS/ Web Design Group CSScheck: www.htmlhelp.com/tools/csscheck/ CSS Usenet Group: www.faqs.org/faqs/www/stylesheets/authoring-faq/ HTML Writers Guild: CSS FAQ www.hwg.org/resources/faqs/cssFAQ.html Kathy Fletcher's CSS eClass assignments: www.geocities.com/kfletche.geo/css/ 9