Class 4 – Style Sheets
What is CSS?
CSS is short for Cascading Style Sheets and gives both Web site developers and users more control over how pages are displayed.
When did they appear?
In 1996, the W3C first recommended the idea of Cascading Style Sheets (CSS) to format HTML documents. .
Cascading Style Sheets (CSS)
In this lesson, you will learn how to create style sheets and apply them to your HTML pages.
What are they?
They are a set of rules that determine how the styles are applied to the HTML tags in your documents.
What are the W3C Recommendations?
The CSS recommendation describes the following three types of style sheets: Embedded Inline Linked
Let’s look at each one:
Embedded
Embedded: The style properties are included (within the <style> tags inside the <head> tag) at the top of the HTML document.
A style assigned to a particular tag applies to all those tags in this type of document.
All the styles are defined at the top of the HTML document within the <head> tags because they contain information about the entire document.
Embedded Style Example
<head><style type="text/css”> p {font-family: georgia, serif; font-size: x-
small;} hr {color: #ff9900; height: 1px } a:hover {color: #ff0000; text-decoration:
none} </style></head>
Inline Styles
Inline: The style properties are included throughout the HTML page. Each HTML tag receives its own style attributes as they occur in the page.
Inline Styles con’t
Using inline styles, the <style> tag becomes the style attribute.
Multiple style properties are still separated by semicolons, but the entire group of properties for each tag is grouped within each HTML tag.
This type of style sheet is fine for documents in which you need to apply styles to only one or two elements, but you wouldn't want to do all that work when you have a lot of styles to add.
In-Line Style Sheet Example
<body><p style="color:blue; font-size:16pt"> This is text in a paragraph that follows the
change of style designated by an in-line style change. This style change applies only to this paragraph and requires a closing tag! </p>
<p>This is the same text in a paragraph without a change of style designated by an in-line style change. This style change uses default font sizes and all default settings. </p>
</body>
External/Linked
External style sheets hold all the style properties in a separate file. You then link the file into each HTML document where you want those style properties to appear.
<head><link rel=“STYLESHEET” type=“text/css” href=“mystyles.css">
</head> Where the stylesheet.css is your css document that
holds all the rules for any page that has this link.
With this method, you create a separate file called mystyles.css (for cascading style sheet) that contains all your style properties.
Changes
Because you can apply style sheets to as many HTML documents as you like, making changes takes a matter of minutes rather than days
Defining the Rules
Style sheet rules are made up of selectors (the HTML tags that receive the style)
and declarations (the style sheet properties and their
values). In the following example, the selector is the body tag and
the declaration is made up of the style property (background) and its value (black).
This example sets the background color for the entire document to black.
body {background:black}
Anatomy of a Statement
Style Syntax
As we mentioned earlier, for a long time there was no such thing as a "web standard". As a result browsers have been very forgiving of HTML that is not written according to the syntax of any one grammar.
CSS on the other hand has always been a very specific standard.
Style Syntax
This means that if you don't get the grammar right, browsers will not be lenient on you. Either your style sheet will not work at all, or it will work in unexpected ways.
In the example above you saw what the parts of a style sheet are, and an example of how they are put together.
Referring to the example above, here are some simple rules to follow to get your style sheet right every time.
Style Syntax
1. Every statement must have a selector and a declaration. The declaration comes immediately after the selector and is contained by a pair of curly braces.
Style Syntax
2. The declaration is one or more properties separated by semicolons.
Style Syntax
3. Each property has a property name followed by a colon and then the value for that property. There are many different types of value, but any given property can only take certain values as set down in the specification.
Style Syntax
4. Sometimes a property can take a number of values, as in the font-family example above. The values in the list should be separated by a comma and a space.
Style Syntax
5. Sometimes a value will have a unit as well as the actual value, as in the font-size example above. You must not put a space between the value and its unit.
Style Syntax
6. As with HTML, white space can be used to make your style sheet easier to read and write. You should use spaces as in the example above.
Style Sheet Dependence
Style sheets, when used properly, can be an effective tool for providing a unique and attractive presentation, while still allowing a page to be accessible to all users.
However, as soon as a page's message becomes dependent on the style sheet, the page has become a failure on the Web.
Style Sheet Dependence
Style sheets were designed to allow the author to influence the presentation, but not to control it.
Style sheets can be overridden by users who may choose--or require--their own style sheet.
For these reasons, authors who depend on a certain style will find their pages inaccessible to a significant portion of users.
Style Sheet Dependence con’t
Poor uses of style sheets are demonstrated in many so-called CSS galleries. One common hack that has appeared in various places is that of the "drop shadow."
This is created by using negative margins, and involves a large amount of dependence on the style sheet. When the style sheet is removed, either at the user's discretion or by using a browser that does not support CSS, the page is often unusable.
As an example, take a look at the next slide - SpaceGUN Magazine, a fictional magazine featured in Microsoft's CSS Gallery.
Using Microsoft Internet Explorer with style sheets enabled, the presentation is certainly unique and eye-catching:
SpaceGun Magazine
Style Sheet Dependence con’t
But as soon as style sheets are disabled, the result is very different, even using the same browser:
Style Sheet Dependence con’t
Style Sheet Dependence con’t
Quite clearly, the page is unusable on the Web due to its drop shadows and other negative margin tricks that leave many readers with a jumbled mess. The example also shows that dependence on style sheets is a recipe for failure. A Web document is not effective if it is not accessible.
Style Sheet Dependence con’t
Style sheet designers should take care to always ensure that their Web pages are in no way dependent on the style sheet. Some authors have tried to use the WingDings font to produce glyphs without the hassle and added download time of actual images.
Style Sheet Dependence con’t
While the motive of reducing download time is admirable, such authoring is dependent on the user having the WingDings font and on the style sheet being enabled--conditions that can never be assured on the World Wide Web.
More on Rules
If you want to apply the same rules to several HTML tags, you could group those rules together, as in the following example:
body, td, h1 { background:black; color:white }
Too confusing?
This part can be confusing but just remember
Remember ANY HTML tag can serve as a selector and have stylesheets declarations attached to it.
But what if you want something more complex than that?
What if you wanted body text to be green for the first paragraph, purple for the second paragraph, and gray for the third?
Classes
That's where classes come in. You could create three different classes of p, each one with a different stylesheet declaration. The rules (either embedded in the HTML document or in an external stylesheets file) would look like this:
p.first { color: green }p.second { color: purple }p.third { color: gray }
Classes con’t
And your HTML code would look like this: <p class="first">The first paragraph, with
a class name of "first."</p><p class="second">The second paragraph, with a class name of "second."</p><p class="third">The third paragraph, with a class name of "third."</p>
What to use?
In designing your Web site, use a linked/external style sheet to describe your most frequently used styles (the ones that will be formatted in the same fashion for all of the pages in your Web site), such as the heading tags and link tags.
Use embedded style sheets to describe the formatting of tags that will remain the same within a single document, or set of documents, such as special table settings or page margins.
Use the inline style sheets to describe the formatting of tags that vary, such as for a special callout or sidebar….But you really shouldn’t use the inline at all!
It can get confusing very quickly
The order in which styles are read by the browser matters. If you had a case of two style properties affecting the exact same selector, the last property to be read would be the one that would apply. In this example, all paragraphs would be yellow:
p { color: blue; } p { color: yellow; } In the above example p is the selector, color
is the property, blue is the value andEverything inside the { the declaration }
Deprecated
What does it mean…..exactly?
With the advent of CSS, the W3C now discourages the use of many tags from earlier versions of HTML. The tags that they discourage are “deprecated”
Just don’t use them because when they finally do go away, the browsers won’t be able to see read your code
Deprecated Tags & Attributes(examples)
Tags (not to use): <font…
Attributes: size, color, face <font size=x>Where x= 1 (smallest) to 7(largest)
</font> <font color=x>Where x = word or color number
</font> <font face=x>Where x=Any installed font; e.g.,
Arial </font>
More tags not to use
<center> …</center><div align=“center”> …</center>Attributes:
background (with <body> tag align (with <p> tag)
Declarations(What can be changed)
color:color name or hex code
font-family:familyname e.g., Arial, Times New Roman, or …. other choices: serif, sans-serif, cursive,
fantasy, monospace.
Declarations
font-size: ‘size’ where ‘size’ can be
a number to multiply by font-size a percentage of font-size an absolute value in pixels, points Can be words like xx-small
Declarations
font-style:italic | oblique | normal
font-weight:bold | bolder | lighter or any number 100 to 900 (400 = usual bold)
Declarations
background-color:transparent background-color: a color you choose background-image: URL to an image
Add as attribute to <body…> tag Use an image url(xxx.xxx)
Add attribute ‘repeat’ to tile• repeat-x to tile image horizontally only• Repeat-y to tile image vertically only
Declarations
Aligning Text text-align:left | right | center | justify
<… style=“text-align:”…> Replaces Deprecated Tags
<center>…</center><p align=“left”> <p align=“right”>
Resources
On my website, www.agrapicapproach.com there are many links, under the Class 4 heading, for material that you will find helpful.
In this class I only gave you the basics but style sheets have so much more functionality and you can learn so much more!
Check out Eric Meyer at http://meyerweb.com/ orZen Garden at http://www.csszengarden.com/
