Cascading Style Sheets (CSS) Basics and Typography

Structure and Presentation

appearance is important in many applications
on the Web, appearance is called document presentation - how it is shown to the user.
effective use of typefaces, margins, borders, and spacing can make a document easier to read
originally HTML emphasized the structure of a document
later versions added elements that help control presentation
some additional elements were never part of standard HTML
examples are <BLINK> in the Netscape browser and <MARQUEE> in Internet Explorer.
others are deprecated - they should not be used.
You should not use nonstandard or deprecated elements in your work.

Properties

HTML elements have properties that affect how they are displayed
these properties are also called attributes
the specific properties will depend on the element and also the media in which it is presented
for graphic screen display, a paragraph may use margins, background color, typeface, text color, line spacing, and more
for aural presentation by a screen reader, the same paragraph may use properties such as voice-family, stress, richness, and volume.

Defaults

terminology: A default value is a value that will be used unless it is explicitly changed by the user or the document settings
browsers come with default values for the properties in HTML documents
different browsers may have different default settings
You can change some of them through options menu choices.
the specific steps to take to do this will depend on the browser

Values

The values of properties can be
- numbers
- percentages
- colors
- URLs
- other descriptive terms, such as "large" or "dotted"
The W3C takes multiple pages to define all the possible values
in these notes, we will describe new types of values as we need them

Benefits of Stylesheets

Style Sheets define specifications that can control the presentation of the rendered documents.

They do not affect the contents of the document, only the appearance (or equivalent). With style sheets,

structure can be separated from presentation.
designers can collect presentation control in one central location
users can have more control their output devices
developers can adapt sites to diverse devices
presentation is controlled better than with the HTML extensions do
the HTML document must be properly structured for the style sheet to work correctly

Style Sheet capabilities

Styles let you

specify presentation elements such as
- margins
- spacing and indentation
- colors,
- fonts
- link styles
- alignment
- sizes
- positions
- borders
- and more.
customize documents for different media such as
- screen
- print
- aural
- projection
- handheld
- braille
- and "all".

Incorporating styles

the stylesheet can be an
- inline - coded in the body of the web page as an attribute of an HTML element
- external - stored in a separate file from the document
- embedded - written in a style element in the document head
we will use the second method, embedded stylesheets, in this lesson

Placement of an embedded stylesheet

The stylesheet must be placed correctly.
it should be in the head
NOT in the body
NOT between the head and the body
the <style> tag may have a type attribute with value "text/css". With HTML5, type is not needed.

  <head>

    <title>Document title here</title>

    <style type="text/css">
        Style rules go in here.
    </style>

  </head>

Style Rules

A style sheet is made up of one or more style instructions that describe how an element or group of elements should be displayed.
The instructions are called rules.
Each CSS rule has two parts: Selector identifies the elements to be affected; Declaration instructs how to render (present) them.
Each declaration is made up of a property (such as color) and its value (such as green)

the form of a rule is

    element_symbol (or selector) { property1: value1;  property2: value2 }

"element_symbol(selector)" means the name of an element, such as p or h1.
we will learn what can be used for the property and value parts
the style specifications are written inside a pair of curly braces {}
each property is separated from the corresponding value by a colon
property:value pairs are separated by semicolons.
the punctuation is critical
the spacing around the punctuation is not critical

Color styles

there are two basic color properties
background-color - specifies the background color for an element.
color - specifies the foreground (text) color for an element.

Color Values

a high-quality monitor can display millions of distinct colors
the W3C HTML standards assign names to 17 of them.
the offical names are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow.
some applications, such as Microsoft Office, use additional color names
only the 17 official color names should be used in web documents.

RGB Color Values

Other colors must be defined by their RGB values
RGB specifies the amount of Red, Green, and Blue to be mixed in the display.
the RGB value is commonly represented by a six-digit hexadecimal (base 16) number
in HTML, the number must be preceded by a # symbol, for example #123f89
Each pair of digits represents an amount of Red, Green, and Blue, from 00, the smallest amount, to ff, the highest.
Some colors with RGB values shown.

Example 1: background and foreground colors

most elements can have background color and color properties.
the example illustrates adding color properties for the body.
rules for the body apply to the entire document.
if you do not specify rules for the body colors, the browser will use a default.
the deafult is often, BUT NOT ALWAYS, black text on a white background. If you want to ensure the user will see black on white, be sure to specify rules for the colors.
if you sepcify

    <style type="text/css">
        body {background-color: #ffff00;
              color: red}
    </style>

Link to a complete example 1 page illustrating colors.

Cascading rules

style rules are said to be cascading.
later or more specific rules take precedence.
a rule for a paragraph is more specific than a rule for the body.
a rule for emphasized text within a paragraph is more specific than the rule for the paragraph

Example 2. the cascading effect

the rule for the body will be used for any text that is not covered by a more specific rule.
the rule for paragraphs (p) is more specific than the body. It will be used for text within paragraphs, unless a more specific rule applies.
the rule for h1 will be used for text within level 1 headings unless a more specific rule applies
the rule for emphasis (em) is more specific than the others. It will be used unless an even more specific rule applies

    <style type="text/css">
        body {background-color: #ffff00;
              color: red}
        h1 {background-color: #889999;
            color: black}
        p {background-color: #ffffff;
           color: black}
        em {background-color: maroon;
            color: #ffff00 }}
     </style>

Link to a complete example 2 page illustrating the cascading effect.

Style properties for fonts

documents can be presented with different typefaces and other font properties
font properties include
- font-family - specifies the typeface to be used
- font-size - specifies how large the characters are
- font-weight - specifies the heaviness of the characters
- font-style - specifies other characteristics of the appearance
- font-variant

Typefaces

There are many different typefaces (often called fonts) available for use on computers
Different typefaces are effective for different purposes

Serif and sans-serif typefaces

serif fonts have small extensions, called serifs, at the ends of the main strokes
Times New Roman, used in this sentence, is an example of a serif font.
the strokes came from the natural movements used to carve the molds for metal type.
sans-serif fonts do not have these extensions
Arial, used in this sentence, is an example of a sans-serif font.
If you do not specify a rule for the font family in the body, the browser will use a default.
Times New Roman and Arial are commonly set as the default serif and sans-serif fonts for browsers on Windows
traditionally, serif fonts are more widely used for books because they were more legible. The serifs helped guide the eye across the page.
However sans-serif fonts are better on the screen, especially at small sizes

Proportional and monospace fonts

older devices (monitors, printers, traditional typewriters) used the same amount of space for each character, no matter how wide the character actually was.
Courier, used in this sentence, is an example of a monospace font. Notice that there is more blank space around an "i" than an 'm".
most fonts are proportional - the space is adjusted to fit the character, as in most of the text on this page.

Specifying font-families

you can use any font family (typeface) that is installed on the computer
one way to find out the names is to look at the list in the toolbar of a word processor
names must be typed exactly as they are given in the system.
names that include spaces (e.g., 'Times New Roman') should be enclosed in single or double quotation marks.
you can also specify a generic font family, such as "serif" or "sans-serif" or "monospace"

Example 3.

    <style type="text/css">
        body {font-family: "Verdana"}
        h1 {font-family: "Comic Sans MS"}
        h2 {font-family: "Comic Sans MS"}
        strong {font-family: "Courier"}
     </style>

Link to a complete example 3 page illustrating font-families.

Alternative typefaces

you can specify alternative font families
alternatives should be separated by commas
if alternatives are specified, the browser will use the first one it finds on the local computer
if it doesn't find any of them, it will use the browser's own default choice

A good rule for serif fonts is

       body {font-family: Georgia, "Times New Roman", Times, serif}

A good rule for sans-serif fonts is

       body {font-family: Verdana, Arial, Helvetica, sans-serif}

the above examples use fonts that are reasonable for screen display. No matter which font the browser ends up using, the page will look pretty much the same.

font sizes can be specified in may different length units
absolute-size measurements include
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
relative size measurements can be given as a percentage of the parent size, such as 120%
sizes can also be specified in pixels
- a pixel is essentially one dot on the screen
- pixel units are indicated by "px", for example "12px"
- There is no space between the number and the unit
set font size with em
- To avoid resize problem with old versions of IE, many developers use em instead of px.
- The em size unit is recommended by the W3C.
- 1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px.
- To convert, use this formula pixels/16 = em
- The following example from W3Schools works for all browers in a sense that it shows the same text size in all browsers and allows all browers to zoom or resize the text.
```
	body{font-size:100%;}
	h1{font-size:2.5em;}
	h2{font-size:1.875em;}
	p{font-size:0.875em;}
         
```

set size with root em (rem) measurements

The rem is new in CSS3.
It is relative to the base font size of the entire document
The base font size is specified for the HTML element

The cascading feature of CSS lets us give a fallback for older browsers that don't support the rem unit.
For example

        html {
             font-size: 100%;
        }
        article {
            font-size: 12px;     /*  fallback size  */
            font-size: .75rem;   /* Will be used if supported, otherwise ignored. */
                                 /* If the browser size is 16px, this will be 12px. */
        }

other sizes, such as centimeters and inches can be used, but are not really suitable for web pages.

font-weight and font-style

font-weight
- defines the weight (boldness) of text
- values include "bold" and "normal".
- there are other values, but they are not widely supported by browsers
font-style
- defines other characteristics of text
- values include italic and normal

Example 5.

    <style type="text/css">
        body {font-weight: bold}
        h1 {font-weight: normal}
        h2 {font-weight: normal}
        strong {font-weight: normal;
                font-style: italic}
     </style>

Link to a complete example 5 page illustrating font-weight and font-style.

Text alignment

alignment describes how the text is lined up along the sides of the block containing it
the property name is "text-align"
values include
- left - text will be aligned on the left side of the block, but not the right
- right - text will be aligned on the right side of the block, but not the left
- center - text will be centered in the block
- justify - text will be aligned on both the left and the right sides of the block
alignment only applies to block elements, such a p or h1 or body.
alignment does not apply to inline elements

Example 6.

    <style type="text/css">
        body {text-align: justify}
        h1 {text-align: center}
        h2 {text-align: right}
     </style>

Link to a complete example 6 page illustrating text-align

Margins

blocks can have margins specified, much like word processing documents
Each side of a block can have a separate margin value
the property names are
- margin-left
- margin-right
- margin-top
- margin-bottom
the value can be a length or a percentage
- length values must have units specified, such as px
- percentage values are calculated as a percentage of the width of the element which contains the element
- margin values can be negative
the property "margin" will apply its value to all four sides, for example "margin: 10%"
margin only applies to block elements, such a p or h1 or body.
margin does not apply to inline elements

Example 7.

    <style type="text/css">
        body {margin-top: 15px;
              margin-right: 25px;
              margin-bottom: 15px;
              margin-left: 100px;
        }
        h1 {margin-left: -50px}
        h2 {margin-left: 50px}
     </style>

Link to a complete example 7 page illustrating margins

Block height and width

most block elements, including horizontal rules, can have height and width specified.
the property names are "height" and "width"
the values can be lengths or percentages
length values must have units specified, such as px.
percentages will be calculated as a percentage of the block containing the one being styled
you canNOT specify a height or width for the body - that is determined by the window
text in the block will be wrapped to fit
if the text cannot fit in the block, it will overflow outside it
without a specific width value, a block will extend the full width of the containng block
without a specific height value, a block will adjust to the height of the text it contains

Example 8

In this example, the blocks have background colors added so you can see the dimensions
the h1 style rule uses percentages for the values. The dimensions will change if the window is resized.
the h2 style rule uses pixels as the unit. The dimensions will stay the same if the window is resized.
the p style rule does not specify height or width. The width will be 100% of the containing block and the height will adjust to fit the text.

    <style type="text/css">
        h1 {width: 40%;
            background-color: silver}
        h2 {height: 100px;
            width: 150px;
            background-color: yellow}
        p {background-color: #ffddff}
    </style>

Link to a complete example 8 page illustrating block height and width

Centering a block

sometimes you will want to center a block of text, such as the h1 and h2 in example 8, within the body
text-align:center does not center a block; it centers the text inside the block
if the block width is 100% centering the text is sufficient, as in example 6
if the block's width is less than 100%, center it by adding the rules
- margin-left: auto
- margin-right: auto
The effect will only be visible when the block is narrower in width than the surrounding one and contrasts with it in background color or border.
Warning: do NOT try to center blocks by setting specific margin values (such as 200px or 20%). The block may look centered on your screen, but it will probably not be centered on someone else's.

Example

    <style type="text/css">
        h1 {width: 50%;
            background: yellow;
            margin-left: auto;
            margin-right: auto;}

        h2 {background-color: #ccffff;
            text-align: center;
            width: 75%}

        p {width: 620px;
           background: silver;
           margin-left: auto;
           margin-right: auto;
           text-align: center;}
    </style>

Link to a complete example 9 page illustrating centering blocks

Example 10: multiple rules

Many rules can be specified for each element.
they can all be written in the same pair of braces
they should be separated by semicolons

    <style type="text/css">
        body { background-color: #ffff00;
               color: maroon;
               font-family: Verdana, Arial,Helvetica,sans-serif;
               font-size: small;
               text-align: justify;
               margin: 20px }

        h1 { background-color: #00ffff;
             color: red;
             font-family: Georgia, 'Times New Roman', Times, serif;
             font-size: 200%;
             text-align: center;
             width: 50%;
             margin-left: auto;
             margin-right: auto; }

        h2 { text-align: right;
             background: #ffffcc;
             width: 50%; }

        p {background-color: #ffffff;
           color: teal;
           margin-right: 100px;
           margin-left: 50px;}

        strong { background-color: silver; color: black;
                 font-family: 'Courier New', Courier, monospace;
                 font-size: large;
                 font-weight: normal }
    </style>

Link to a complete example 10 page illustrating multiple style properties in one document

Design Guidelines

We will discuss design issues intermittently throughout the course. For now, keep in mind the following guidelines.

Colors - Unless you want to create a guessing game or confuse the user:
- Always specify both a body background color and text color for your documents.
- Never specify a background or foreground color without also specifying the other.
- Be sure the text contrasts with the background for legibility. Dark text on a light background is the best for most users.
Fonts - When you specify a font family style, specify at least one font for Microsoft and one font for Macintosh, and also list the general category as the last option.
Font alternatives should be similar--all serif fonts, or all sans-serif, for example.
Don't try to use fixed size margins to control positioning, such as centering. The effect is lost when the window is a different size. For those sorts of effects, use percentage margins or widths.

Comments to: dong@hood.edu

Last Modified: 06 July 2015. 19:20

IT581: Practicum in Web Development, Summer 2015 (Hybrid)