CSE 154

Lecture 3: More CSS Styling

Website Organization:

Content and Structure: HTML

Style: CSS

Behavior: JavaScript

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	background 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-style: italic; 
              font-weight: bold; 
            }

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: 16pt; 
            }

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 {
              background-color: aqua;
              color: red;
            }

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/">
              <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

More 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: 10px 10px 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-position: 370px 20px;
              background-repeat: no-repeat;
            }

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 { color: red; font-family: sans-serif; }
                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 { background-color: yellow; font-family: sans-serif; }
            p { background-color: aqua; color: red; }
            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

`id` and `class`

id: Unique identifier for an element; Only allowed oneidvalue per page; Each element can only have oneid
class: Non-unique grouping attribute to share with many elements; Many elements (even of different types) can share the sameclass; Each element can have many differentclasses

Example:

<p id="product-12345" class="product">Puppy calendar</p>
<p id="product-133337" class="product">Cat mug</p>

HTML

Both paragraphs have the same class (product), but each has its own ID

Why are these useful?

Gives you another way to talk about your content in CSS (and later in JS)


          #my-id {
            /* ... properties ... */
          }

          .my-class {
            /* ... other properties ... */
          }

A mnemonic: .java programs compile into .class files so...
try to remember dot (.) class and hash (#) id

`id` or `class`?

How do you decide whether to use an id or a class?

Probably prefer class. You can only use an id once per page, so it's good to be a little stingy with them. classes are free.

On the other hand, if you know you are making a unique section or page element (e.g., submit button), id is the way to go.

A caveat:

It's easy to just make classes for everything, but don't forget that HTML is made to describe your content. So, prefer a <p> tag over a class named paragraph.

Grouping content

Ways to group content:

These are descriptive content groups. It's less likely that you'd need to pair these with a class (all block level).

<header>
<footer>
<article>
<section>
<aside>
<main>

Also, there are twogeneralcontent grouping tags. These are the ones that you probably need to pair with a classorid, though not always.

<div>-- block level
<span>-- inline level

CSS Context Selectors

Context selectors are used to selectively style page elements

Examples:


            selector1 selector2 {
              properties
            }

CSS

... applies the given properties to selector2 only if it is inside a selector1 on the page


          selector1 > selector2 {
            properties
          }

CSS

... applies the given properties to selector2 only if it is directly inside a selector1 on the page (selector2 tag is immediately inside selector1 with no tags in between)

Context Selector Example (without >)


        <p>Shop at <strong>Hardwick's Hardware</strong>...</p>
        <ul>
          <li>The <strong>best</strong> prices in town!</li>
          <li><em><strong>Act</strong></em> while supplies last!</li>
        </ul>

HTML


            li strong { text-decoration: underline; }

CSS

Produces:

Shop at Hardwick's Hardware...

The best prices in town!
Act while supplies last!

output

Context Selector Example (with >)


         <p>Shop at <strong>Hardwick's Hardware</strong>...</p>
         <ul>
           <li>The <strong>best</strong> prices in town!</li>
           <li><em><strong>Act</strong></em> while supplies last!</li>
         </ul>

HTML


            li > strong { text-decoration: underline; }

CSS

Produces:

Shop at Hardwick's Hardware...

The best prices in town!
Act while supplies last!

output

CSE 154

Lecture 3: More CSS Styling

Website Organization:

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

More 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

id and class

Example:

Why are these useful?

id or class?

A caveat:

Grouping content

CSS Context Selectors

Context Selector Example (without >)

Context Selector Example (with >)

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`

`id` and `class`

`id` or `class`?