Website Development & Management Working with Style Rules Instructor: John Seydel, Ph.D. CIT Fall

Student Objectives Upon completion of this class meeting, you should be able to: Use the style element to specify presentational aspects Explain what a selector and a declaration do in a style rule Specify styles  Within document head Via tag Via links to external files  Inline via the style attribute Explain why stylesheets are “cascading”

How to Set/Modify Web Page Displays Use display elements Typically inline elements Also, (misuse) tables, headings, etc. Mixes presentation and content on pages (XHTML is moving away from this) Most have been deprecated (e.g., ) Provide specification in xmlns Incorporate style rules (CSS)

Style Rules Customize HTML tag definitions Create custom look/theme Provide more control over how pages look Provide information on formatting Can be Embedded: within... tags External: separate file; use tag Inline: using the style attribute within XHTML tags (deprecated) Cascading Style Sheets (CSS): concept incorporates cascading levels of precedence

A Quick Overview Thus, there are two valid ways to specify style rules, both within the document element External file (use element) Use the element All three modify the same display properties Typical properties modified: font-family font-size text-align margin-left Others... Syntax for style rules Always property1:value;property2:value;... Example: font-size:10pt;text-align:center

Working with Style Rules Typically two parts Selector (e.g., body, h1, table, a:link) Declaration (e.g., align:center, font-size: 28px) Example: body {background-color:teal} Typical format selector { attribute:value; attribute:value }

When & Where to Specify Styles Ideally, specify once Using separate file When multiple documents use same styles Creates “theme” Same concept as server side includes Use embedded approach (in of document) for page-specific styles

Containers for Style Rules The... tags... declarations go here... Separate files Refer to text file using tag  Within... tags  Example: <link rel=“stylesheet” href=“styles1.css” type=“text/css” > Contents should be just declarations (i.e., no tags) Should use.css extension

Multiple Versions: Classes Use classes to define more than one version of a style Example: declaring styles table.nav {background:aqua} table.other { background:yellow; text-align:center } Example: calling style classes...

Classes for Various Structural Elements Specification Define as class without element selector Often call from within or tag Example:.subhead { font-size:28px; margin-top:12px; margin-left:20px; line-height:32px; }...

Using the Element Overcomes problems with lack of support for pseudo elements Contained in the element Use style attribute within opening tag Applies style info to all content between opening and closing tag For limited occurrences of desired display characteristics Typically

Style Rules Example body {background:coral}.copy { color:Black; font-size:11px; line-height:14px; font-family:Verdana,Arial,Helvetica,sans-serif }.subhead { font-size:28px; margin-top:12px; margin-left:20px; line-height:32px; }

Styles Affecting Links Links attributes (use pseudo-classes) a:link a:visited a:active a:hover Selectors (i.e., properties) include: background (color) color font-family text-decoration (underline, overline, strikethrough, none)

Styles Affecting Text General: background, color Also: Common font properties  font-family  font- size  font- style  font- weight  line-height Common text properties  text-align  text-indent  text-decoration See Appendix C for possible values

Styles Affecting Boxes: Margins & Borders Set for:,, For margins, specify Which margin: left, right, bottom Use: pixels (px), in, cm, points (pt) Examples body {margin: 100px 100px 50px} div {margin-left:10%;margin-right:5%} For borders Specify: type (e.g., groove), width, padding Example:.box {border:groove;border-width:thin;padding:2px} content...

Customizing Lists Use To set all properties: list-style To set properties individually:  list-style-image  list-style-position  list-style-type Most common is the image Values: none, inherit, url Example: li {list-style-image:url(images/ball.gif)}

Review: Style Odds & Ends Recall format for style rules Selector  Type: describes default element  Attribute: defines specific classes of elements  Descendent: what happens when two or more selectors are used together  External: in development (not well supported) Declaration Inheritance Site management issues Indentation

References for Style Specification HTML textbooks Duckett: Chapters 10 & 11, Appendix C Proffitt & Zupan: Chapter 15 and Appendix B Examples of what styles can achieve General overview of styles wdvl.internet.com/Authoring/Style/Sheets/ Complete reference summary for style syntax Materials that are no longer available (!): webreview.com/pub/guides/style/style.html webreview.com/wr/pub/guides/style/mastergrid.html

Summary of Objectives Use the style element to specify presentational aspects Explain what a selector and a declaration do in a style rule Specify styles Within document head  Via tag  Via links to external files Inline via the style attribute Explain why stylesheets are “cascading”