CSE 154

Lecture 3: Basic CSS

The Bad Way to Produce Styles

            
<p>
  <font face="Arial">Welcome to Greasy Joe's.</font>
  You will <b>never</b>, <i>ever</i>, <u>EVER</u> beat 
  <font size="+4" color="red">OUR</font> prices!
</p>

HTML

Welcome to Greasy Joe's. You will never, ever, EVER beat OUR prices!

output

Tags such as b, i, u and font are discouraged in strict HTML

Why is this bad?

Cascading Style Sheets (CSS): <link>

HTML

            
              <link type="text/css" href="style.css" rel="stylesheet" />

HTML

CSS describes the appearance and layout of information on a web page (as opposed to HTML, which describes the content)

Can be embedded in HTML or placed ito separate .css file (preferred)

Basic CSS Rule Syntax

            
            selector {
              property: value;
              property: value;
              ...
              property: value;
            }

CSS

            
            p {
              font-family: sans-serif;
              color: red;
            }

CSS

A CSS file consists of one or more rules

A rule selector specifies HTML element(s) and applies style properties

A selector of * selects all elements

CSS Properties for Colors

              
              p {
                color: red;
                background-color: yellow;
              }

CSS

This paragraph uses the style above.

output

Property	Description
color	color of an element's text
background-color	color color that will appear behind the element

Specifying Colors

            
            p { color: red }
            h2 { color: rgb(128, 0, 196); }
            h4 { color: #FF8800; }

CSS

This paragraph uses the first style above

This h2 uses the second style above

This h4 uses the third style above

output

Color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

RGB codes: red, green, and blue values from 0 (none) to 255 (full)

Hex codes: RGB values in base-16 from 00 (0, none) to FF (255, full)

CSS Properties for Fonts

Property	Description
font-family	which font will be used
font-size	how large the letters will be drawn
font-style	used to enable/disable italic style
font-weight	used to enable/disable bold style
Complete list of font properties

`font-family`

            
            p {
              font-family: Georgia;
            }
            h4 {
              font-famiy: "Courier New";
            }

CSS

This paragraph uses the first style above

This h4 uses the second style above

output

Enclose multi-world font names in quotes

More about `font-family`

            
            p {
              font-family: Garamond, "Times New Roman", serif;
            }

CSS

This paragraph uses the above style

output

Can specifiy multiple fonts from highest to lowest priority

Generic font names:

serif, sans-serif, cursive, fantasy, monospace

If the first font is not found on the user's computer, the next is tried

Generally should specify similar fonts

Placing a generic font name at the end of your font-family value ensures that every computer will use a valid font

`font-size`

            
            p { 
              font-size: 14pt;
            }

CSS

This paragraph uses the above style

output

Units:

Pixels (px) - e.g., 16px
Point (pt) - e.g., 16pt
m-size (em) - e.g., 1.16em

Vague font sizes: xx-small, x-small, small, medium, large, x-large, smaller, larger,

Percentage font sizes: 90%, 120%

`font-weight`, `font-style`

            
            p {
              font-weight: bold; 
              font-style: italic; 
            }

CSS

This paragraph uses the above style

output

Either of the above can be set to normal to turn them off (e.g., headings)

Body Styles

            
            body {
              font-size: 16px; 
            }

CSS

To apply a style to the entire body of your page, write a selector for the body (saves you from manually applying a style to each element)

CSS Comments: /* ... */

            
            /* This is a comment.
               It can span many lines in a CSS file. */
            p {
              color: red;
              background-color: aqua;
            }

CSS

CSS (like HTML) is usually not commented as much as code such as Java

The // single-line comment is NOT supported in CSS

The <-- ... --> HTML comment is also NOT supported in CSS

Grouping Styles

          
          p, h1, h2 {
            color: green;
          }

          h2 {
            background-color: yellow;
          }

CSS

This paragraph uses the above style.

This h2 uses the above styles

output

A style can select multiple elements separated by commas

The individual elements can also have their own styles (like h2 above)

Styles that Conflict

          
          body { color: green; }
          p, h1, h2 { color: blue; font-style: italic; }
          h2 { color: red; background-color: yellow; }

CSS

This paragraph uses the first style above

This heading uses both styles above

output

When two styles set conflicting values for the same property, the latter style takes precedence

(later we will learn about more specific styles that can override more general styles)

W3C CSS Validator

          
          <p>
            <a target="_blank" href="http://jigsaw.w3.org/css-validator/check/referer">
              <img src="http://jigsaw.w3.org/css-validator/images/vcss"
              alt="Valid CSS!" />
            </a>
          </p>

HTML

output

Checks your CSS to make sure it meets the official CSS specifications

More picky than the web browser, which may render malformed CSS correctly

Moar CSS Properties!

CSS properties for text

Property	Description
`text-align`	alignment of text within its element
`text-decoration`	decorations such as underlining
`text-indent`	indents the first letter of each paragraph
`text-shadow`	a colored shadow near an existing piece of text (CSS3)
`line-height`, `word-spacing`, `letter-spacing`	gaps between the various portions of the text
Complete list of text properties

`text-align`

          
            blockquote { text-align: justify; }
            h2 { text-align: center; }

CSS

The Emperor's Quote

[TO LUKE SKYWALKER] The alliance... will die. As will your friends. Good, I can feel your anger. I am unarmed. Take your weapon. Strike me down with all of your hatred and your journey towards the dark side will be complete.

output

Can be left, right, center, or justify (which widens all full lines of the element so that they occupy its entire width)

`text-decoration`

          
            p { text-decoration: underline; }

CSS

This paragraph uses the style above

output

Can also be overline, line through, blink or none

Effects can be combined:

          
            p { text-decoration: overline underline; }

CSS

This paragraph uses the style above

output

`text-shadow`

          
            p { 
              font-weight: bold; 
              text-shadow: -2px 5px gray;
            }

CSS

This paragraph uses the style above

output

shadow is specified as an X-offset, a Y-offset, or an optional color

The `list-style-type` property

          
            ol { list-style-type: lower-roman; }

CSS

Possible values:

none: No marker
disc (default), circle, square
decimal: 1, 2, 3, etc.
decimal-leading-zero: 01, 02, 03, etc.
lower-roman: i, ii, iii, iv, v, etc.
upper-roman: I, II, III, IV, V, etc.
lower-alpha: a, b, c, d, e, etc.
upper-alpha: A, B, C, D, E, etc.
lower-greek: alpha, beta, gamma, etc.
others: hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana, hiragena-iroha, katakana-iroha

CSS properties for Backgrounds

Property	Description
`background-color`	color to fill background
`background-image`	image to place in background
`background-position`	placement of background image within element
`background-repeat`	how background image should be repeated
`background-attachment`	whether background image scrolls with page
`background-size`	how large the background appears behind the element
`background`	shorthand to set all backgroud properties
More background properties

`background-image`

          
            body { 
              background-image: url("images/draft.jpg");
            }

CSS

This is the first paragraph

This is the second paragraph...
It occupies 2 lines

output

Background image/color fills the element's content area

`background-repeat`

          
            body { 
              background-image: url("images/draft.jpg");
              background-repeat: repeat-x;
            }

CSS

This is the first paragraph

This is the second paragraph...
It occupies 2 lines

output

Can be repeat (default), repeat-x, repeat-y, or no-repeat

`background-position`

          
            body { 
              background-image: url("images/draft.jpg");
              background-repeat: no-repeat;
              background-position: 370px 20px;
            }

CSS

This is the first paragraph

This is the second paragraph...
It occupies 2 lines

output

Value consists of two tokens, each of which can be top, left, right, bottom, center, a percentage, or a length value in px, pt, etc.

Value can be negative to shift left/up by a given amount

Embedding style sheets: `<style>` (BAD)

          
            <head> 
              <style type="text/css">
                p { font-family: sans-serif; color: red; }
                h2 { background-color: yellow; }
              </style>
            </head>

HTML

CSS code can be embedded within the head of an HTML file

This is bad style; DO NOT DO THIS (why?)

Inline styles: the `style` attribute (BAD)

          
            <p style="font-family: sans-serif; color: red"> 
            This is a paragraph</p>

HTML

This is a paragraph

output

Higher precedence than embedded or linked styles

Used for one-time overrides and styling a particular element

This is bad style; DO NOT DO THIS (why?)

Content vs. Presentation

HTML is for content; what is on the page (heading; list; code; etc.)

CSS is for presentation; how to isplay the page (bold; centered; 20px margin, etc.)

Keeping content separate from presentation is a very important web design principle

If the HTML contains no styles, its entire appearance can be changed by swapping .css files

Cascading Style Sheets

It's called Cascading Style Sheets because the properties of an element cascade together in this order:

Browser's default styles (reference)
External style sheets (in a <link> tag)
Internal style sheets (in a <style> tag in the page header)
Inline style (the style attribute of an HTML element)

Inheriting styles (explanation)

          
            body { font-family: sans-serif; background-color: yellow; }
            p { color: red; background-color: aqua; }
            a { text-decoration: overline underline; }
            h2 { font-weight: bold; text-align: center; }

CSS

This is a heading.

A styled paragraph. Previous slides are available on the web site.

a bulleted list

output

When multiple styles apply to an element, they are inherited

A more tightly-matching rule can override a more general inherited rule

Not all properties are inherited (notice link's color above)

CSS `pseudo-classes`

          
            a:link    { color: #FF0000; } /* unvisited link */
            a:visited { color: #00FF00; } /* visited link */
            a:hover   { color: #FF00FF; } /* mouse over link */

CSS

Buy early, buy often!

output

Class	Description
:active	an activated or selected element
:focus	an element that has the keyboard focus
:hover	an element that has the mouse over it
:link	a link that has not been visited
:visited	a link that has already been visited
:first-letter	the first letter of text inside an element
:first-line	the first line of text inside an element
:first-child	an element that is the first one to appear inside another
:nth-child(N)	applies to every Nth child of a given parent

CSE 154

Lecture 3: Basic CSS

The Bad Way to Produce Styles

Cascading Style Sheets (CSS): <link>

Basic CSS Rule Syntax

CSS Properties for Colors

Specifying Colors

This h2 uses the second style above

This h4 uses the third style above

CSS Properties for Fonts

This h4 uses the second style above

More about font-family

font-weight, font-style

Body Styles

CSS Comments: /* ... */

Grouping Styles

This h2 uses the above styles

Styles that Conflict

This heading uses both styles above

W3C CSS Validator

Moar CSS Properties!

CSS properties for text

The Emperor's Quote

The list-style-type property

CSS properties for Backgrounds

Embedding style sheets: <style> (BAD)

Inline styles: the style attribute (BAD)

Content vs. Presentation

Cascading Style Sheets

Inheriting styles (explanation)

This is a heading.

CSS pseudo-classes

More about `font-family`

`font-weight`, `font-style`

The `list-style-type` property

Embedding style sheets: `<style>` (BAD)

Inline styles: the `style` attribute (BAD)

CSS `pseudo-classes`