eXtensible Hyper Text Markup Language

INFO202 Lynda Hodgson Summer 2010

Let’s do it with Style Cascading Style Sheets are used to vary color.  . They work. font. frames and other presentation stuff have been “deprecated” in favor of CSS. but should be avoided. italics. size and other properties of elements in your page(s)  CSS eliminates redundant coding   Define the rules only once  CSS helps you keep all pages in your site consistent  Use the same rules on every page Note to those with html experience: elements for bold.

color: #FF0000} Properties: the aspect of the element being set    enclosed in brackets separated by commas have values  Specified after the colon  Terms with spaces are enclose in quotes . font-style: italic.Anatomy of a Rule Selector: element tag or part of the page to which the rule is applied Property values: the real “specifics” of the aspect H1{ font-family: “Arial Black”.

So where do I put the rules?  Let’s start with External Style Sheets  You can build one that works for ALL of your company’s pages!  Open a new Notepad file Enter all the rules you need (yes. you can have many of them in one Style Sheet)  Save as a .css file    Add the extension to the filename Remember to select “all files”! .

Here is an example     Separate the rules for the same selector with a semicolon Pepper liberally with comments to help you figure out what you were trying to do later! Color names “Safe” fonts .

please! If you can do better. SHOW ME!  .Link the structure with the presentation Name of your style sheet No comments about my artistic design capabilities.

line through. overline) indent boldness style (italics) All font properties at once Background image For a complete list.Other Properties you should know          font-size align “decorate” text (underline. refer to the W3C .

put it in an external CSS to eliminate redundant code .Let’s add an Internal/Embedded Style   External CSS file  specify styles that are inherited by all pages that use it Are coded in the <head> of the page Apply only to the page that contains the embedded style Will override any style property specified in an external file Should be limited only to page-specific formatting!  Internal/Embedded Styles     If multiple pages will use it.

How do I set it up? Set up the style tags Add the rule(s) .

Fancier stuff  Using style classes When you have one type of tag but want to use multiple different styles.  Can be used with external or embedded styles  .

Inline Styles USE SPARINGLY IF AT ALL  For occasional short text that is unique in the overall web site and unlikely to be used elsewhere  Specify the style right in the tag!  <p style="color: green. font-family: serif "> This is a short text </p> Style is an attribute of the tag Rules are used like attribute values .

What about changing a word? Set up a style that “spans” something other than the usual elements.  Span is a special type of element  <p> This sentence contains a <span style="font-size:150%"> big </span> word </p> Span tags Rule .

Embedded/Internal Style sheet Inline Style Inline using the <span> tag .Altogether now...

What about your inheritance? Scope Elements on all pages  Browser Defaults  External Precedence Used if there are no overrides Elements on a single page  Embedded Overrides external styles Single element  In-line Overrides all other styles .

Your turn You now have the tools to “enhance” your pages.  Time to get to work!  .

Sign up to vote on this title
UsefulNot useful