1) Ensure your homework is pushed to Github

2) Download Class 03 Starter Code

3) Copy keanu directory into class-work

Class #03


Introduction to CSS


Warmup Exercise

CSS Intro

Color Property

Fonts + Text

Working with CSS



1. Open keanu in SublimeText

2. Markup copy.txt with HTML in about.html

3. Ensure about.html contains proper structure:



head & body

4. Use anchor tags to link the .html files (index, about, films)

CSS Intro

CSS: History

• CSS => Cascading Style Sheets

• Proposed in 1994 by Håkon Lie ("How Con Lee")

• Stylesheet language that describes HTML markup

• Separates document content (HTML) / document styling (CSS)

⇒ "Separation of concerns"

• Start a new CodePen

CSS: Syntax

• Sets the text color of every paragraph, <p>, to black

CSS: Syntax (ctn)

• One selector can have multiple declarations

• Common for each declaration to have its own line

CSS Color Property

CSS Color Property

• Text color can be set with color:

	h1 {
	  color: red;

• Color values can be specified using:

⇒ color keyword: red

⇒ rgb value: rgb(255, 0, 0)

⇒ hex code: #FF0000

CSS Color: Keyword Value

	span {
	  color: red;

• Simple, but least-descriptive

• red, green, blue, etc.



More colors...

CSS Color: RGB Value

	span {
	  color: rgb(255, 0, 0);

• Bit more complicated, bit more powerful

• First value is red; second is green; third is blue

• Each value in a range 0 - 255

CSS Color: Hexadecimal Value

	p {
	  color: #463DB3;

• Very robust...but there's maths happening

• How it works: "The Code Side of Color"

• Adobe Color: https://color.adobe.com

Applying Color: Text vs. Background

color ⇒ Applies color to text

	p {
	  color: rgb(255, 0, 0);

background ⇒ Applies a background color to elements:

	p {
	  background: rgb(0, 255, 0);

Fonts and Text

CSS Font: Various Properties


⇒ Sets the "thickness" of the font

⇒ normal and bold; values 100 - 900 (if supported by font)


⇒ Sets a "slant" to the font

normal and italic


⇒ Pixel values (12px); percentage (75%)

CSS Font: Font-Family Property


⇒ Applies a particular font to the element

⇒ Accepts multiple values

⇒ End with: serif, sans-serif, or monospace

	p {
	  font-family: 'Comic Sans MS', helvetica, sans-serif;

CSS Font: Text Property


⇒ how text is oriented within the containing block

	text-align: left;


⇒ controls extra-textual visual emphasis (underline)

  text-decoration: underline;

Code Along


5 minute break

Working with CSS

Working with CSS

• Three ways to apply CSS to HTML:

1) Inline CSS

2) Embed in HTML using a <style> tag

3) Link to an external file using the <link> tag

Inline CSS

	<p style="color: blue; font-size: 14px;">
	  Keanu Reeves is Johnny Utah

	<p style="color: blue; text-decoration: underline;">
	  Or is Johnny Utah Keanu Reeves?

• Not a good practice

• Makes debugging difficult


• You will make enemies

Do NOT Use Inline CSS!

<head> embed

	<!DOCTYPE html>
	  <style type="text/css">
	    h1 {color: red;}
	    p {color: blue; font-size: 14px}

• Preferred to inline styles, as styles are concentrated

• Bloats HTML pages

• Can make debugging large applications difficult

External CSS

	<!DOCTYPE html>
	  <title>Super Awesome Website</title>
 	  <link rel="stylesheet" type="text/css" href="style.css">

• Like <title>, placed within <head>

• Truly separates HTML from CSS

• Easiest to debug; just go to your CSS file!

External CSS

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


⇒ Specifies relationship between current document and linked document


⇒ Specifies the media type of the linked document


⇒ Specifies the location of the linked document

Exercise: CSS Linking

1. Re-open keanu directory

2. Link styles.css to all three .html files

⇒ Hint: styles.css is located inside the css directory

⇒ Hint2: Consider the name of the folder holding styles.css

3. Begin lab work


• At the root of your GitHub folder, you should have the files:

index.html and resume.html

• Add a styles.css file to the same directory

• The index.html will be the landing page for your course portfolio

1) Add new HTML (perhaps a paragraph on why you are taking FEWD)

2) Make a list of links to your homework and class work

3) Style the HTML with CSS

4) Commit and push your changes

On Deck: Class #04 - Intermediate CSS

• Nested and grouped CSS selectors

• The Box Model: padding, border, and margin

• Identifying specific elements using class and id