CSE 154

Lecture 3: Styling with CSS

Today's Agenda

Administrivia

Review: HTML and the HTML/CSS relationship

Styling a web page (fonts particularly)

Announce Homework 1

Administrivia

Please fill out the survey if you haven't already

~~GradeIt is down (a disk crashed)~~ GradeIt is back up! Please turn in your aboutme.html (demo)

Working together

Encouraged in sections and labs

Not allowed on Homework and Creative projects

For CPs: Please make sure to cite if you use material that is not your own in the process of building your pages. Example

Images - use fair use images

If you use code you find, CITE WITH A COMMENT! INCLUDE THE URL!

Review

HTML

Accessiblity in design (why it is important)

Validating your site

How CSS connects to HTML (barely)

Timeline

Topic	Approx # Lectures
HTML	<2
CSS	~4
JavaScript	~7
PHP	~5
SQL	2
Case study	4
Other things	6

Review: HTML

Warm up! What tag(s) would you use....

to contain all of the information you need but is not displayed in the browser?

to contain all of the objects will be displayed in the browser?

to allow a user to click to go another page?

to display a picture in your page?

to help organize a newspaper, blog post, or forum?

to display a piece of a Java program?

<head>

<body>

<a>

<img>

<article> and <section>

<code>

Is `<img>` an inline tag? Or Inline-block?

<img> tags are considered an inline element and an inline-block element.

Recall a "block" element (e.g. <body>, <p>, <div>) can contain other elements

An image tag is ok on it's own


                <img src="img/koalafications.jpg" alt="Koalified koala" />

Or in a block element.


              <p>
                <img src="img/koalafications.jpg" alt="Koalified koala" />
              </p>

The HTML validator will validate if the <img> tag is in or out of a block.

You may see it both ways in other people's code

In CSE 154, tags should be inside a block element.

Review: 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?

Accessibility
Code organization
Changing style easily

Review: Cascading Style Sheets (CSS): <link>


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

HTML (template)

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

HTML (example)

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 into separate .css file (preferred)

Review: Basic CSS Rule Syntax

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

CSS (template)


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

CSS (example)

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

Style: 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

Table of Common Text/Color/Background CSS Rules

CSS Rules	Description
`color`, `background-color`	Foreground (text) color and background color styles
`font-family`, `font-size`, `font-style`, `font-weight`	Various font styles
`text-align`, `text-decoration`, `text-indent`, `text-shadow`, `text-transform`	Various text styles
`line-height`, `word-spacing`, `letter-spacing`	Line/word/letter spacing styles
`list-style-type`	List item styling (e.g. bullet styles)
`background-image`, `background-repeat`, `background-position`, `background-attachment`, `background-size`	Various background styles

CSS Properties for Foreground and Background 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

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`


              h4 {
                font-family: "Courier New";
              }

              p {
                font-family: Georgia;
              }

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-style`, `font-weight`


            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)

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)
`text-transform`	controls capitalization of text
`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

`text-transform`


            
              I just just CAN'T make up my mind!

HTML


              em {
                text-transform: lowercase;
              }

              span {
                text-transform: capitalize;
              }

              strong {
                text-transform: uppercase;
              }

CSS

I just CAN'T make up my mind!

output

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("paw.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("paw.jpg");
               background-repeat: repeat-y;
             }

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("paw.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

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)

Using non standard fonts with `@font-face`

Occasionally you want to use a non standard font in your website.

Webfonts is one way you might see some people do it.


                 @font-face {
                   font-family: myWebFont;
                   src: url("webfont.ttf");
                 }

                 p {
                     font-family: myWebFont, Fallback, sans-serif;
                 }

CSS

BETTER! Use Google Fonts

Go to https://fonts.google.com
Find the font(s) you like. Press the + button for each
Click on the black bar that says the number of families you have selected
Click on @import and copy the text inbetween the <style> and <style> tags
Paste the code into your .css document

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)

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

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 display 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: Styling with CSS

Today's Agenda

Administrivia

Review

Timeline

Review: HTML

Warm up! What tag(s) would you use....

Is <img> an inline tag? Or Inline-block?

Review: The Bad Way to Produce Styles

Review: Cascading Style Sheets (CSS): <link>

Review: Basic CSS Rule Syntax

Style: CSS Comments: /* ... */

Table of Common Text/Color/Background CSS Rules

CSS Properties for Foreground and Background Colors

CSS Properties for Fonts

This h4 uses the second style above

More about font-family

font-style, font-weight

CSS properties for text

The Emperor's Quote

The list-style-type property

CSS Properties for Backgrounds

Specifying Colors

This h2 uses the second style above

This h4 uses the third style above

Using non standard fonts with @font-face

BETTER! Use Google Fonts

Body Styles

Grouping Styles

This h2 uses the above styles

Styles that Conflict

This heading uses both styles above

W3C CSS Validator

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

Is `<img>` an inline tag? Or Inline-block?

More about `font-family`

`font-style`, `font-weight`

The `list-style-type` property

Using non standard fonts with `@font-face`

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

Inline styles: the `style` attribute (BAD)

CSS `pseudo-classes`