XML - Introduction for Web Developers
CIS 58.52

Lesson 06 - Cascading Style Sheets (CSS)

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20
21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60

The CSS stylesheet for this page


Up button

[1] HTML is a markup language

HTML is a markup language.


Up button

[2] XML Separates Structure from Presentation


Up button

[3] Cascading Style Sheets - Benefits


Up button

[4] The Power of Style Sheets

The W3C has developed and offered a collection of Eight Core Styles

These links will display the same page
In 8 different version,
Based on the 8 different Style Sheets.


Up button

[5] CSS: Specification vs. Implementations

However, implementation for CSS is limited by lack of full browser support AND the fact that many world viewers are still using older browsers.

CSS Specification vs. Implementation

Up button

[6] Style Sheets and Browser Support

WebReview (http://www.webreview.com/) has excellent CSS resources available, which is authored by Eric Meyer.

WebReview Style Sheet Reference Guide
http://www.webreview.com/style/

WebReview CSS Master Compatibility Chart
http://www.webreview.com/style/css1/charts/mastergrid.shtml

WebReview CSS Leader Board
http://www.webreview.com/style/css1/leaderboard.shtml
:

Updated: 14 January 2001


Windows
95/98/NT
Macintosh
CSS1 CSS2 CSS1 CSS2
Navigator 4 33.2% 19.6% 33.1% 15.2%
Navigator 6 98.5% 93.5% 98.5% 93.5%
Explorer 3 20.9% 15.9% 10.1% 08.0%
Explorer 4 69.0% 66.3% 76.4% 69.2%
Explorer 5 72.4% 68.5% 99.4% 98.9%
Explorer 5.5 92.5% 88.4%% -- --
Opera 3 84.4% 80.4% -- --
Opera 4 96.7% 89.5% -- --
Opera 5 98.9% 95.7% -- --

Up button

[7] HTML Document Trees

Properties are typically inherited from the parent. In the case of conflicting styles, the more specific rule applies (the rule that is "closer" to the content).

Other conflicts may arise between styles designed in link elements, imported style sheets, style elements, and style attributes. Again, the "closer" rule applies.

<!DOCTYPE html 
     PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html>
<head>
<title>My Favorite Teas</title>
</head>
<body>
<h1>My Favorite Teas</h1>

<p>Some of my favorite teas are:</p>

<ul>
<li>Golden Kenyan</li>

<li>Sikkim Temi</li>

<li>Oolong Silvertip</li>
</ul>
</body>
</html>

HTML Parse Tree

Up button

[8] CSS Rules

For an XML document, you would create a rule for every element in the document.

Two parts:
  1. Selector
  2. Declaration
h3 {color: green}
  • Selector: h3
  • Declaration: color: green
CSS Rules

Up button

[09] CSS Rules: Declaration

Declaration:
h3 {color: green}

Up button

[10] CSS Rules: Grouping Selectors

h1 {color: green}
h2 {color: green}
h3 {color: green}
h4 {color: green}
h5 {color: green}
h6 {color: green}
h1, h2, h3, h4, h5, h6 {color: green}

Up button

[11] CSS Rules: Grouping Declarations

h1 {color: green}
h1 {text-align: center}
h1 {
    color: green;
    text-align: center;
}

Up button

[12] CSS Rules: Comments

h1 {
    color: green;       /* set color to green */
    text-align: center; /* center align text  */
}

Up button

[13] Adding Inline Style attributes

<h1 style="color: green;">My Favorite Teas</h1>

Up button

[14] Embedding Style element

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>My Favorite Teas</title>
<style type="text/css">
h1 { color: green; }
</style>
</head>
<body>
<h1>My Favorite Teas</h1>
...
</body>
</html>

Up button

[15] Linking to External Style Sheets

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>My Favorite Teas</title>
<link rel="stylesheet" type="text/css" href="teas.css">
</head>
<body>
<h1>My Favorite Teas</h1>
...
</body>
</html>
teas.css
h1 { color: green; }


Up button

[16] Importing Style Sheets

teas.css
@import url(let-site.css)  /* style sheet for my site */
/* below are local additions for the "Tea" document */

h1 { color: green; }

Import can also be used within the <style> element of an individual document.
Up button

[17] Calling a style sheet in an XML docment

Following the xml declaration, add the CSS processing instruction

<?xml version="1.0"?>

<?xml-stylesheet type="text/css" href="web_stylesheet.css"?>

Up button

[18] Using XSLT to Call a style sheet

Use the xsl:processing-instruction element to call the CSS file

<xml version="1.0"?>

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSK/Transform" version="1.0">
<xsl:template match="/">
<xsl:processing-instruction name="xml-stylesheet">
type="text/css" href="web_stylesheet.css" </xsl:processing-instruction>

Up button

[19] Calling a style sheet for an HTML document in xsl

The easy way...just adding the call with your other HTML code.

<xml version="1.0"?>

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSK/Transform" version="1.0">
<xsl:template match="/">
<html><head><title>Page Title</title>
<link rel="stylesheet"
type="text/css" href="web_stylesheet.css">
</head> <body>

Up button

[20] Hiding style elements from older browsers

<style type="text/css">
h1 {
    color: green;       /* set color to green */
    text-align: center; /* center align text  */
}
</style>
NS 1 and IE2 will display the contents of the style element. "Hide" the display by enclosing within HTML comments:
<style type="text/css">
<!--
h1 {
    color: green;       /* set color to green */
    text-align: center; /* center align text  */
}
-->
</style>

Up button

[21] Hiding elements completely

display:none lets you hide individual or groups of elements, specified text, or whatever. No trace remains of the hidden element in the browser window. There is no empty space.

description {display:block;}
announcement {display:none;} 
date {display:inline;}

Up button

[22] Declaring block elements

Certain HTML elements are defined in the HTML DTD as block level elements. Block level elements begin on a new line and any following element will also begin on a new line. You can define any element as block level if it fits your purposes.

h1 {display:block;}
ol {display:block;}
p {display:block;}

Up button

[23] Declaring inline elements

HTML elements are defined in the HTML DTD as inline type elements because they change the appearance but they appear directly after the preceding element. For example: bold, italic, typewriter text, font, etc. You can define any element as inline if it fits your purposes. Note: inline is the default if no declaration is made.

i    {display:inline;}
code {display:inline; color:red; background-color:white;}
tt   {display:inline; color:maroon; background-color:#ffffcc;}

Up button

[24] Relative positioning

Each element has a natural location in a page's flow. Moving the element with respect to this original location is called 'relative positioning'. Surrounding elements are not affected at all. The element requires a declared direction (top/right/bottom/left) and value - the desired distance that you want to offset the element from its natural location (Eg. 10pt, 3em, etc.)

big {display:block; position:relative;left:125px;}

Up button

[25] Absolute positioning

Each element has a natural location in a page's flow. You can break this flow by declaring an 'absolute' position. This is a precise position relative to the element's parent. The element requires a declared direction (top/right/bottom/left) and value - the desired distance that you want to offset the element from its parent element (Eg. 10pt, 3em, etc.). The direction and value can be repeated for even more precise positioning. Note: Because absolutely-positioned elements are taken out of the natural flow, they may overlap other content. Also, browser support is weak and unpredictible.

strong {display:block; position:absolute; left:9px;}

Up button

[26] Positioning in 3D

Think 'layers'. Depth is the 3rd dimension. This should allow you to control overlapping (sure!) .
- The higher the z-index number, the higher up the element will be in the stack.
- Positive or negative integers are acceptable.

span.3d {display:block; position:absolute; left:9px; z-index:-1;
border:medium solid maroon; background-color:#f4f4f4; color:maroon;}

Then, in the HTML, you say <span class="3d">Yada, yada, yada</span>

Up button

[27] Vertical alignment

You often have elements on your page that you want to be aligned in the same way. The vertical-align property may be your solution. Note: vertical-align can be applied only to inline elements.

Options:
baseline Align element's baseline with the parent's baseline
middle Align the middle of the element with the parent's middle
sub Position the element as a subscript with respect to the parent
super Position the element as a superscript with respect to the parent
text-top Align the top of the element with the top of the parent
text-bottom Align the bottom of the element with the bottom of the parent
top Align the top of the element with the top of the tallest element on the line
bottom Align the bottom of the element with the top of the lowest element on the line
[percent] A % of the line-height of the element (may be positive or negative)
td  {display:inline; padding: 5px; vertical-align:top;}
th  {display:inline; padding: 5px; vertical-align:top; 
     text-align:center; font-weight:bold}

Up button

[28] Setting height and width

You can set the height and width for most elements, including images, form components and even blocks of text. You can set width and height for several elements on the page at the same time. Caution: If you set these values as a percent, it is a percent of the parent element.

h2 {display:block; position:relative; left:125px; width:340px;}

Up button

[29] Setting borders

You can create a border around any element, then set its thickness, style and color. Borders also enclose padding (if any). Caution: You can create more problems than solutions by overzealous use of borders.

Values:
options: border or border-top, border-bottom, border-left, border-right
thickness: thin, medium, thick or absolute value (eg. 4px)
style: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset
color: any valid hex value or color word

h3 {display:block; border:medium dotted red;}
div {display:block; border-top:medium dotted red; border-left:thick solid red;}  
p {display:block; position:relative; left:125px; width:340px;
   border:thin solid red;}

More on Borders [W3 Schools]


Up button

[30] Setting padding

Padding is extra space around the contents of an element. It can be useful when you want some extra whitespace for separation.

Options: padding or padding-top, padding-bottom, padding-left, padding-right

h3 {display:block; border:medium dotted red; padding:5px;}
big {display:inline; font-size: 14pt; padding-right:5px; padding-left:5px}

Up button

[31] Setting margins

Without CSS you must futz around in order to get simple margins. With CSS it's easy.

Here are your options:

If there is only one value, it applies to all sides.
If there are 2 values, the 1st = top+bottom, 2nd = right+left.
If there are 3 values, the 1st = top, 2nd = right+left, 3rd = bottom.
If there are 4 values, they apply to the top, right, bottom, and left, respectively.

body { margin: 2em }         /* all margins set to 2em */

body { margin: 1em 2em } /* top & bottom = 1em, right & left = 2em */
body { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */

You can also set the four margins independently:

body { margin-left: 3em}

div.space { margin-top: 5em; margin-bottom:5em}
p.right { margin-right: 2em}


Up button

[32] Specifying page breaks

Browser support is spotty, but you can indicate specific page breaks to assure (?) nice printing.

hr {page-break-after:always;}   
/* don't use both in the same sheet! */
hr {page-break-before:always;}

Up button

[33] Callouts with 'float'

The rest of the document wraps around 'float'ing elements. The float direction indicates the side of the page on which the float element will sit. You can float left or right. [The trick to making things flow between elements is to always put the floating element directly before the content that should flow next to it.]

.note{
     width: 33%;
     text-align: left;
     float: right;
     font-size: .75em;
     color: #006600;
     background: #CCCCCC;
     position: relative;
     padding: 1em;
     border-width: thin;
     border-style: groove;
}

Rendered:

Drafted by Thomas Jefferson between June 11 and June 28, 1776, the Declaration of Independence is at once the nation's most cherished symbol of liberty and Jefferson's most enduring monument.

We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty, and the pursuit of Happiness. That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed. That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness.


Up button

[34] Using div and span

The div and span elements of HTML are often used in conjunction with styles.
Up button

[35] class attributes

In style sheet:
.wow {
     color: magenta;
     background: yellow;
     font-weight: bold;
}
In HTML:
<p class="wow">This entire paragraph 
has the class of "wow"</p>
<p>In this paragraph, only 
<span class="wow">this part</span> 
has the class of "wow".</p>

Rendered:

This entire paragraph has the class of "wow"

In this paragraph, only this part has the class of "wow".


Up button

[36] ID Attributes

ID attributes function silarly to class, BUT each ID must be unique to the document. IDs always begin with the pound sign (#).

In style sheet:
#abc123 {
     color: blue;
     background: yellow;
     font-weight: bold;
}
In HTML:
<p id="abc123">This paragraph has a unique ID of "abc123".</p>
Rendered:

This entire paragraph a unique ID of "abc123".


Up button

[37] Contextual Selectors (selectors within selectors)

In style sheet: (this means: "em, when used inside li")
li em {
     color: magenta;
     background: yellow;
     font-weight: bold;
}
In HTML:
<p>Some of my <em>favorite</em> teas are:</p>

<ul>
<li>Golden Kenyan</li>

<li>Sikkim Temi</li>

<li>Oolong <em>Silvertip</em></li>
</ul>
</body>
</html>

Rendered:

Some of my favorite teas are:


Up button

[38] Pseudo Classes

These replace the link, alink and vlink attributes of the <body> element.

a:link {
     color: blue; 
     text-decoration: none;
}
a:visited {
     color: purple; 
     text-decoration: none;
}
a:active {
     background: red;
     color: white;
     text-decoration: none;
}
a:hover {
     color: white; 
     background: blue; 
     text-decoration: none;
}

Up button

[39] Navigation Bars

Home |  Lectures |  Assignments |  Sections |  Syllabus |  Instructors

<div style="font-weight: bold; font-family: arial, helvetica, sans-serif; font-size: 1.25em; background: #CCCCCC; padding: 0.5em; text-align: center">
<a href="example.html" target="new">Home</a> | 

. . .etc.. . .etc. </div>



Up button

[40] Fancy Navigation 'Buttons' With CSS

You mean this was done with CSS?
No Javascript?
No rollovers?
Nothing extra?

Yep!

See Taming Lists for details.


Up button

[41] font-family

<div style="font-family: garamond, times, serif">
Garamond, Times, or serif</div>

<div style="font-family: Arial, Helvetica, sans-serif">
Arial, Helvetica or sans-serif</div>

<div style="font-family: Courier, monospace">
Courier or monospace</div>

<div style="font-family: fantasy">
Fantasy (generic family)</div>

<div style="font-family: cursive">
Cursive (generic family)</div>
Garamond, Times, or serif
Arial, Helvetica or sans-serif
Courier or monospace
Fantasy (generic family)
Cursive (generic family)

Up button

[42] font-size

Font-size is specified in units of:
length mm cm in pt pc
absolute-size xx-small x-small small large x-large xx-large
relative-size smaller larger
percentage
<div>abc</div>
<div style="font-size: 12pt">abc (12 pt)</div>
<div style="font-size: 18pt">abc (18 pt)</div>
<div style="font-size: 24pt">abc (24 pt)</div>
<div style="font-size: xx-small">abc (xx-small)</div>
<div style="font-size: x-small">abc (x-small)</div>
<div style="font-size: small">abc (small)</div>
<div style="font-size: medium">
  abc (medium)
  <span style=
    "font-size: larger">
  xyz (larger; parent is medium)
  </span>
</div>
<div style="font-size: large">abc (large)</div>
<div style="font-size: x-large">abc (x-large)</div>
<div style="font-size: xx-large">abc (xx-large)</div>
<div style="font-size: 1.4em">abc (1.4 em)</div>
<div style="font-size: 200%">abc (200%)</div>
abc
abc (12 pt)
abc (18 pt)
abc (24 pt)
abc (xx-small)
abc (x-small)
abc (small)
abc (medium) xyz (larger; parent is medium)
abc (large)
abc (x-large)
abc (xx-large)
abc (1.4 em)
abc (200%)

Up button

[43] Other font related properties

font-style - value: normal | italic | oblique

font-variant - value: normal | small-caps

<div>
<span style="font-variant: small-caps">When 
in the course of human events</span> 
it becomes necessary...
</div>
When in the course of human events it becomes necessary...

Up button

[44] font-weight

value: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
<div><B>bold (B element)</B></div>
<div style="font-weight: bold">bold</div>
<div style="font-weight: 700">700 is bold<BR>
<span style="font-weight: normal">normal<BR>
<span style="font-weight: 400">400 is normal</span>
</div>
bold (B element)
bold
700 is bold
normal
400 is normal

Up button

[45] Lists

Custom bullets

Using an image to replace the bullets:

<ul 
  style="list-style-image: 
     url(images/smallarrow.gif)">
<li>student organizations</li>
<li>admissions and financial aid</li>
</ul>
  • student organizations
  • admissions and financial aid

Same list with no bullets:


<ul 
  style="list-style-type:none">
<li>student organizations</li>
<li>admissions and financial aid</li>
</ul>

  • student organizations
  • admissions and financial aid

For lots more good stuff on lists, see Taming Lists by Mark Newhouse


Up button

[46] text-align

value: left | right | center | justify
<div style="text-align: left">We hold ... </div>
We hold these truths to be self-evident,
that all men are created equal,
that they are endowed by their
Creator with certain unalienable Rights,
that among these are Life, Liberty,
and the pursuit of Happiness.
<div style="text-align: right">We hold ... </div>
We hold these truths to be self-evident,
that all men are created equal,
that they are endowed by their
Creator with certain unalienable Rights,
that among these are Life, Liberty,
and the pursuit of Happiness.
<div style="text-align: center">We hold ... </div>
We hold these truths to be self-evident,
that all men are created equal,
that they are endowed by their
Creator with certain unalienable Rights,
that among these are Life, Liberty,
and the pursuit of Happiness.

Up button

[47] text-indent

value: <length> | <percentage>
<p style="text-indent: 10%">We hold ...

We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty, and the pursuit of Happiness. That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed. That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness.

<p style="text-indent: 2em">We hold ...

We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty, and the pursuit of Happiness. That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed. That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness.


Up button

[48] line-height

value: <number> | <length> | <percentage> |
<p style="line-height: 1.8em">We hold ...

We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty, and the pursuit of Happiness. That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed. That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness.

<p style="line-height: 0.8em">We hold ...

We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty, and the pursuit of Happiness. That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed. That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness.


Up button

[49] letter-spacing and word-spacing

You can add or reduce space between letters ('kerning') or between words ('tracking'). You can also add a chunk of space, or an indent, before particular paragraphs. The value 'normal' returns things to the default.

code {background:#ffccff; color:maroon; 
   letter-spacing:1em; text-indent:15pt} 
span.bold {font-weight:800; word-spacing:1em; 
   letter-spacing:3pt; border:thin dashed green} 

Up button

[50] Dropcaps

<span style="
  font-variant: bold;
  font-size: 4em;  
  width: 1em; 
  float: left; 
  font-family: Arial, Helvetica, sans-serif; ">W</span>e hold ...
We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty, and the pursuit of Happiness. That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed. That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness.

See also the first-letter pseudo element.


Up button

[51] Changing case

Define the text case for your style with the text-transform property. You have options for initial caps, all caps, all lower case or as typed. Values are uppercase, lowercase, capitalize (first character of each word), or none.

em {font-style:italic; text-transform:uppercase;} 
i {font-weight:800; font-style:italic; text-transform:capitalize; 

Up button

[52] Foreground (text) color

Instead of the <font> tag, use the color element to stipulate the color for your text, horizontal rules, form elements and/or tables, etc. Values are any of the 16 recognized color words, any hex color value or any rgb color value. Note: It is recommended that any time you set a foreground color, you also declare a background color.

p.special {display:block; color:magenta;} 
big {display:inline; color:#ccccff; font-size:200%;} 
small {display:inline; color:#ffffcc; font-size:80%;} 
td.emph {display:block; color:magenta; background:black; padding:5px;} 

Up button

[53] Changing background color

CSS lets you easily change the background color for any element, including snippets of text, a sentence, or a paragraph. Note: It is recommended that any time you set a foreground color, you also declare a background color. Declare 'transparent' if you you want the default to prevail.

p {font:10pt arial; background:#ffffcc} 
span.highlight {font:10pt monospace; background:yellow; color:black;}
span.seethrough {font:10pt helvetica; background:transparent; color:magenta;} 

Up button

[54] Background Images

Options:
repeat - tile the image both horizontally and vertically
repeat-x - tile the image horizontally only
repeat-y - tile the image vertically only
no-repeat - don't tile the image
background-attachment - fixed/scroll (background scroll with canvas?)

Example 1 (How to mess up your page - part 1)
body { background-image: url(images/logo.gif); }
Example 2
body {  background-image: url(images/logo.gif);
    background-repeat: repeat-y;
    margin-left: 20%
   }
Example 3 (How to mess up your page - part 2)
body {  background-image: url(images/logo.gif);
    background-repeat: repeat-x;
    background-attachment: fixed;
    margin-left: 20%
   }
Example 4
body {   background-image: url(images/logo.gif);
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin-left: 20%
   }

Up button

[55] Shorthand properties

font property is a shorthand method for setting: So, an example using 3 values for the font element would be:
h2 {
    font: bold 1.2em Tahoma, Verdana, Arial, Helvetica, sans-serif; 
    color: #990000
}

Up button

[ Slide 56 deleted ]


Up button

[57] Books on CSS

Book Cover for Cascading Style Sheets
Hakon Wium Lie & Bert Bos, 1999.
Cascading Style Sheets: Designing for the Web.
2nd ed. Reading (MA): Addison-Wesley. 396 p.
Book Cover for Cascading Style Sheets
Eric A. Meyer, 2000.
Cascading Style Sheets: The Definitive Guide.
Sebastol (CA): O'Reilly & Associates. 453 p.

Up button

[58] Resources on Style Sheets


Up button

[59] Using JavaScript to Select and Load CSS

Many Web sites use Javascript to determine the system, browser and browser-version of the viewer, then serve-up the best stylesheet from their options.

Here's a sample and additional information.


Up button

[60] Validating Style Sheets

The W3C offers a CSS validation service.
http://jigsaw.w3.org/css-validator/

Valid CSS!