HELLO

1) Ensure your homework is pushed to Github

2) Download Class 03 Starter Code

3) Copy keanu directory into class-work

Class #03

09/24/2018

Introduction to CSS

Agenda

• Warmup Exercise

• CSS Intro

• Color Property

• Fonts + Text

• Working with CSS

Warmup

Warmup

1. Open keanu in SublimeText

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

3. Ensure about.html contains proper structure:

⇒ DOCTYPE

⇒ html

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

⇒ deeppink

⇒ chartreuse

• 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

• font-weight

⇒ Sets the "thickness" of the font

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

• font-style

⇒ Sets a "slant" to the font

⇒ normal and italic

• font-size

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

CSS Font: Font-Family Property

• font-family

⇒ 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

• text-align

⇒ how text is oriented within the containing block


	text-align: left;

• text-decoration

⇒ controls extra-textual visual emphasis (underline)


  text-decoration: underline;

Code Along

CodePen

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>

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

• Not a good practice

• Makes debugging difficult

• ONLY USE IF WRITING HTML EMAILS

• You will make enemies

Do NOT Use Inline CSS!

<head> embed

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

• Preferred to inline styles, as styles are concentrated

• Bloats HTML pages

• Can make debugging large applications difficult

External CSS

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

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

• rel

⇒ Specifies relationship between current document and linked document

• type

⇒ Specifies the media type of the linked document

• href

⇒ 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

Lab

• 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