Lecture 13: Introduction to CSS

Overview:

  1. What is CSS?
  2. Syntax and Terminology
  3. Grouping Selectors
  4. Contextual Selectors
  5. Embedded CSS
  6. Hiding CSS from Non-Supportive Browsers
  7. font-family Property
  8. Sizing Units
  9. color Property
  10. Updating to XHTML 1.0 Strict
  11. Validating Your CSS

What is CSS?

Syntax and Terminology

Grouping Selectors

Contextual Selectors

Embedded CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Embedded CSS: Example 1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    body {font-size: 13px;}
    h1 {font-size: 18px;}
    </style>
</head>
<body>
<h1>A Sample Level 1 Heading, Sized at 18 Pixels</h1>
Some content, sized at 13 pixels because it is using the 'body' settings.
</body>
</html>

See how this example renders

Hiding CSS from Non-Supportive Browsers

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Embedded CSS: Example 1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css"><!--
    body {font-size: 13px;}
    h1 {font-size: 18px;}
    --></style>
</head>
<body>
<h1>A Sample Level 1 Heading, Sized at 18 Pixels</h1>
Some content, sized at 13 pixels because it is using the 'body' settings.
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Embedded CSS: Example 1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css"><![CDATA[
    body {font-size: 13px;}
    h1 {font-size: 18px;}
    ]]></style>
</head>
<body>
<h1>A Sample Level 1 Heading, Sized at 18 Pixels</h1>
Some content, sized at 13 pixels because it is using the 'body' settings.
</body>
</html>

font-family Property

Property Usage and Effect Values Accepted Replaces Recommendations
font-family Specifies the font(s) to use for content, assuming that font is available. font name | generic font family (sans-serif, serif, cursive, fantasy, monospace) Deprecated <font> tag Always specify a generic font-family last

Sample code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Embedded CSS: Example 2</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css"><!--
    body {font-size: 12px;
          font-family: verdana,geneva,lucida,arial,sans-serif;}
    h1 {font-size: 18px; font-family: georgia,serif;}
    h2 {font-size: 16px; font-family: georgia,serif;}
    --></style>
</head>
<body>
<h1>A Sample Level 1 Heading, Sized at 18 Pixels</h1>

<h2>A Sample Level 2 Heading, Sized at 16 Pixels</h2>

<p>Some sans-serif text, sized at 12 pixels because it is
inheriting the 'body' settings.</p>
</body>
</html>

See how this example renders

Sizing Units

Unit Values Accepted Advantages Disadvantages Recommendations
pixels Number followed by px (e.g., 12px). Renders consistently across browsers and platforms, because pixels are the basic unit of measurement for computer displays.

Mac IE 5.x, Windows/Mac Gecko-based browsers, and Windows/Mac Opera are able to resize text.		 Windows IE 5.x, 6, and 7 cannot resize pixels (although IE 7 has a page zooming capability).

Values below 10px can become illegible on some browsers and at high resolutions.

Sometimes characters can look a bit distorted, because of difficulties fitting them into the desired number of pixels. 		Pixels can be your first choice, unless the inability to resize text will be an issue for your audience.

Sites with strict accessibility requirements should not use pixels for this reason.
points Number followed by pt (e.g., 12pt). Mac IE 5.x, Windows/Mac Gecko-based browsers, and Windows/Mac Opera are able to resize text. No one agrees on how points translate into pixels, and web pages render on a grid of pixels. As a result, the text size rendered varies a bit cross-browser and cross-platform.

Windows IE 5.x, 6, and 7 cannot resize points (although IE 7 has a page zooming capability).

Values below 8pt can become illegible on some browsers and at high resolutions. 		Points are best for print output (a topic covered in INP 170: Web Coding II).

Sites with strict accessibility requirements should not use points because of the inability to resize text in all browsers.
keywords xx-small | x-small | small | medium | large | x-large | xx-large Resizable in all modern browsers.

Rendering is consistent in modern browsers (except Windows IE 5.x), as long as they are set at the same size for their default ('medium' is equal to your default settings, so other keywords are relatively larger or smaller). IE 6 needs to be in Standards mode to work properly; in Quirks mode it behaves like Windows IE 5.x		 Limited choices available

Windows IE 5.x always renders text sizes one size smaller than specified, because it assumes 'small' is equal to your current browser default size, rather than 'medium'. IE 6 & 7 behave the same way if they render in Quirks mode. 		Always make sure your browser is rendering the code in a standards mode. A proper doctype is all that is necessary.

Test carefully to make sure sizes are not becoming too large.

A valuable approach if accessibility is a high priority.
em Number (decimal values are fine) followed by em (e.g., 1.2em) Resizable in all modern browsers.

Rendering is consistent in modern browsers if the browsers are set at the same size for their default (1em is equal to your default browser settings, thus other em values are relatively larger or smaller). 		Text size is based on the parent element's size (the parent element is the tag holding the current element). Thus text can quickly grow very large or very small (and values below 1em, such as .8em, can become illegible). Be extremely careful about specifying font sizes for multiple elements that could be nested.

Test carefully to make sure sizes are not becoming too large or too small.

A valuable approach if accessibility is a high priority.
percentage Number followed by % (e.g., 120%) Resizable in all modern browsers.

Rendering is consistent in modern browsers if the browsers are set at the same size for their default (100% is equal to your default browser settings, thus other percentage values are relatively larger or smaller). 		Text size is based on the parent element's size (the parent element is the tag holding the current element). Thus text can quickly grow very large or very small (and values below 100%, such as 80%, can become illegible). Be extremely careful about specifying font sizes for multiple elements that could be nested.

Since many browsers use a default text size of 16 pixels, you can set 'body' to 62.5% in order to give nested elements a starting size of 10 pixels. This makes subsequent math easier (120% would be 12 pixels).

In general, browsers work best with percentages based on a multiple of ten (so 120% is preferable to 115%)

Test carefully to make sure sizes are not becoming too large or too small.

A valuable approach if accessibility is a high priority.

Sample code for keywords sizing:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Embedded CSS: Keyword Sizing</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css"><!--
    body {font-family: verdana,geneva,lucida,arial,sans-serif;}
    span {font-size: x-small;}
    h1 {font-size: xx-large; font-family: georgia,serif;}
    h2 {font-size: x-large; font-family: georgia,serif;}
    h3 {font-size: large; font-family: georgia,serif;}
    --></style>
</head>
<body>
<h1>A Sample Level 1 Heading (XX Large)</h1>

<h2>A Sample Level 2 Heading (X Large)</h2>

<h3>A Sample Level 3 Heading (Large)</h3>

<p>Some sans-serif text at the default medium size,
except in Windows IE 5.x which defaults to small.</p>

<p>And then some <span>text that is x-small.</span></p>

</body>
</html>

See how this example renders

Sample code for em sizing:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Embedded CSS: EM Sizing</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css"><!--
    body {font-size: 1em;
          font-family: verdana,geneva,lucida,arial,sans-serif;}
    p {font-size: 1.5em;}
    p span {font-size: 2em;}
    div {font-size: .8em;}
    div span {font-size: .6em;}
    h1 {font-size: 2.5em;}
    h2 {font-size: 2em;}
    h3 {font-size: 1.5em;}
    --></style>
</head>
<body>
<h1>A Sample Level 1 Heading (2.5em)</h1>

<h2>A Sample Level 2 Heading (2em)</h2>

<h3>A Sample Level 3 Heading (1.5em)</h3>

<p>Some text growing larger (1.5em)
<span>and larger (2em).</span></p>

<div>Some text shrinking (.8em)
<span>and shrinking (.6em).</span></div>

</body>
</html>

See how this example renders

Sample code for percentage sizing:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Embedded CSS: Percentage Sizing</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css"><!--
    body {font-size: 100%;
          font-family: verdana,geneva,lucida,arial,sans-serif;}
    p {font-size: 150%;}
    p span {font-size: 200%;}
    div {font-size: 80%;}
    div span {font-size: 60%;}
    h1 {font-size: 250%;}
    h2 {font-size: 200%;}
    h3 {font-size: 150%;}
    --></style>
</head>
<body>
<h1>A Sample Level 1 Heading (250%)</h1>

<h2>A Sample Level 2 Heading (200%)</h2>

<h3>A Sample Level 3 Heading (150%)</h3>

<p>Some text growing larger (150%)
<span>and larger (200%).</span></p>

<div>Some text shrinking (80%)
<span>and shrinking (60%).</span></div>

</body>
</html>

See how this example renders

color Property

Property Usage and Effect Values Accepted Replaces Recommendations
color Specifies the color to use for text inside an element. One of the pre-defined color names, a hexadecimal value (e.g., #fff), or an rgb value: rgb(255,0,0) or rgb(0%,50%,25%) Deprecated <font> tag It is generally a good practice to have a background color specified along with the text color; a future lecture will explore background colors.

The CSS validator may give you warnings about not having a background color paired with a text color; you can ignore those warnings.

Users associate blue text with links, so making unlinked text blue is bad for usability.

Sample code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Embedded CSS: Colors</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css"><!--
    body {font-size: 12px;
          font-family: verdana,geneva,lucida,arial,sans-serif;
          color: #4d4d4d;}
    h1 {font-size: 18px; font-family: georgia,serif; color: purple;}
    h2 {font-size: 16px; font-family: georgia,serif; color: green;}
    --></style>
</head>
<body>
<h1>A Sample Level 1 Heading</h1>

<h2>A Sample Level 2 Heading</h2>

<p>Sample text</p>

</body>
</html>

See how this example renders

Updating to XHTML 1.0 Strict

Validating Your CSS