CSE 154

Lecture 3: Introduction to CSS

Today's Agenda

Administrivia

Introduction to CSS

  • Review: Terminology and Syntax
  • id and class attributes
  • Selectors (context, psuedo, etc.)
  • Overview of Useful CSS Styles

Administrivia

  • We've gotten some great questions so far! We'll be posting a weekly pinned "Student FAQs" post on Piazza. Take a look at these every few days or so!
  • Tonight we will respond to today's Lecture Poll Questions
  • Remember to use WPL and Office Hours!
  • HW1 is out, and Creative Project 1 is due Saturday. Any questions?
  • Consider opting in for the CP1 Showcase (by Sunday)!

Lecture Objectives

By the end of this lecture, you should be able to:

  • Better understand the HTML and CSS connection
  • Know how to select different elements in CSS using selectors, ids, and classses
  • Know some more common CSS styles
  • Assign colors on webpages using different encodings (hex, rgb, names)
  • Set font properties in CSS and be able to import Google Fonts
  • Use your Chrome Inspector tool to explore and test CSS properties

Relative vs. Absolute Links

<p>
  Search for it on <a href="http://www.google.com/">Google</a>!
</p>

HTML

<p>
  Check out my other <a href="cookie-recipes.html">page</a>!
  It has my own recipe for delicious cookies:
  <img src="imgs/choc-cookies.jpg" alt="my cookie recipe" />
</p>

HTML

Links to other files from your HTML document can be absolute (to another web site) or relative (to another page on this site, relative to the HTML page it is linked from).

Recall: HTML5 Document Structure

General outline of a document body (template): 

<body>
  <header>
    <!-- Header of the webpage body (e.g. logo, navigation bar) -->
  </header>
  <main>
    <!-- Main section of the webpage body (where most content is) -->
  </main>
  <footer>
    <!-- Footer of the webpage body (e.g. copyright info) -->
  </footer>
</body>

HTML

For different types of pages, you may have more elements (e.g. nav), but these are the ones you should follow as a guide for most of your webpages.

Review: HTML5 and Semantic Tags

<main>

Main content of the document - unlike <header> and <footer> tags, there can only be one main element in the <body>. The content inside should be unique and not contain content that is repeated across pages ( e.g. sidebars, nav link, search bars, etc.)

<header>

Header element - contains header information for page body or section/article, including logos, navigation bar, etc.

<footer>

Footer element - contains footer information for page boy or section/article, including copyright infromation, contact, links, etc.

Now, Let's Talk About Style.

skelton

CSS

CSSZenGarden

A project using different CSS templates to style the same HTML page.

CSS Zen Garden Screenshot

Template 116: Ragged

CSS Zen Garden Screenshot

Template 143: Verde Moderna

CSS Zen Garden Screenshot

Template 214: Pixelisation

CSS Zen Garden Screenshot

Template 219: Steel

Which style do you like the most?

Sharing CSS Between Multiple HTML Files

<head>
  ...
  <link href="style.css" rel="stylesheet" />
  ...
</head>
... rest of HTML

page1.html

<head>
  ...
  <link href="style.css" rel="stylesheet" />
  <link href="cookie-page.css" rel="stylesheet" />
  ...
</head>
... rest of HTML

page2.html

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

style.css

Multiple HTML files can share the same CSS, and one HTML file can have multiple CSS files (loaded in order)

Q: What do you think would happen if you have a p style for both style.css and cookie-page.css?

Recall: Basic CSS Rule Syntax

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

CSS (template)

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

CSS (example)

A CSS file consists of one or more rules

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

There are currently over 200 possible style properties to choose from!

Comments in CSS: /* ... */

/* 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, but you should comment each of your CSS files in this class!

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

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

Methods for Styling Different Elements in CSS

  • ids and classes
  • Grouping
  • Context selectors and combinators (More on Monday)
  • psuedo-selectors (Monday)

id and class

id
Unique identifier for an element
Only allowed one id value per page
Each element can only have one id
class
Non-unique grouping attribute to share with many elements
Many elements (even of different types) can share the same class
Each element can have many different classes

Example

<p id="doggo-cal" class="product">Puppy calendar</p>
<p id="cat-mug" class="product">Cat mug</p>

HTML

.product { text-decoration: underline; /* both elements share this! */ }

#doggo-cal { color: #D06613; /* only the first p has this color */ }

#cat-mug { background-color: #C0FFEE; /* only the second p has this color */ }

CSS

Puppy calendar

Cat mug

output

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

Q: Why do you think these are useful? Why do you think both were added to HTML/CSS specifications?

Benefits of ids and classes

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

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

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

CSS

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.

It really takes practice to figure this out - use the flexibility of your CP to ask questions about the right choice if you have them!

A note about over-using classes/ids:

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

Grouping Styles

p, h1, h2, .product {
  color: green;
}

h2, #doggo-cal {
  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)

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 Context Selectors

Context selectors are used to selectively style page elements

Examples:

p .important {
  text-transform: uppercase;
}

CSS

... applies the given properties to elements with class important if they are somewhere inside a p on the page

p > .important {
  text-transform: uppercase;
}

CSS

... applies the given properties to elements with class important only if they are directly inside a p on the page

Check out yesterday's extra section resource for more practice!

Digging into the CSS "Wardrobe"

Some common styles and tips to explore with the Chrome Inspector!

Table of Common Text/Color/Background CSS Rules (more here)

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

A great MDN reference page for different color values here!

More about Colors in CSS

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)

Example: To get red font, you can use either "red", "rgb(255, 0, 0)", or "#FF0000".

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", monospace;
}

p {
  font-family: Georgia, serif;
}

CSS

This h4 uses the second style above

This paragraph uses the first 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

Using Google Fonts

  1. Go to https://fonts.google.com
  2. Find the font(s) you like. Press the + button for each
  3. Click on the black bar that says the number of families you have selected
  4. Click on @import and copy the text between the <style> and <style> tags
  5. Paste the code into your .css document (see example here)
Google Font screen

font-size 

p {
  font-size: 14pt;
}

CSS

This paragraph uses the above style

output

Common Units: (see more details on MDN's font-size page):

  • 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

PropertyDescription
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

Dive down for more examples below!

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

Tip: Use the Chrome Inspector to help!

text-transform 

<p>
  I <span>just</span> just <em>CAN'T</em> <strong>make up my mind!</strong>
</p>

HTML

em {
  text-transform: lowercase;
}

span {
  text-transform: capitalize;
}

strong {
  text-transform: uppercase;
}

CSS

I just just CAN'T make up my mind!

output

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

Dive down for more examples below!

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: no-repeat;
}

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

Last Reminders for CP1 This Weekend

Use the W3C validators for HTML and CSS (copy/paste option is recommended)

Review the Code Quality Guide for HTML/CSS, and check the spec carefully to make sure you've met all of the requirements

Remember to add, commit, push and then click the Turn-In button in order to submit your final version

Use Piazza to ask questions

Have fun and be creative!