Estelle Weyl | @estellevw | Github | Press → key to advance.

CSS in Depth v3

estelle.github.io/CSS/intro/

estelle.github.io/CSS/

estelle.github.io

CSS Basics

  • Declarations
  • CSS Rulesets
  • Including CSS
    • <link>
    • media
    • <style>
    • @import
    • inline styles
    • Scripting
  • Knowledge
    • White space
    • Character declaration
    • Comments
    • Errors and Error Handling
    • The Cascade
  • Developer Tools
  • Exercise

estelle.github.io/CSS/intro/

Declaration

Declaration

property: value;
color: red;
font-weight: bold;

CSS Properties

Agenda

  1. Introduction
  2. Selectors
  3. Specificity
  4. Generated Content
  5. Media Queries
  6. Units & Values
  7. Colors & Transparency
  8. Math & Variables
  9. Fonts
  10. Text
  11. Images
  12. Backgrounds
  13. Gradients
  14. Box Model
  15. Flexbox
  16. Tables
  17. Grids
  18. Transforms
  19. Transitions & Animation
  20. Other Features

Declaration block

{
  color: red;
  font-weight: bold;
}
{
  transition: all 2s ease-in;
  transform: scale(2) translate(50vw, 50vh);
}

CSS Ruleset

selectorA {
   property1: value1;
   property2: value2;
}

selectorB, 
selectorC {
   property1: value3;
   property2: value4;
}

CSS Rulesets

p {
   color: #333333;
   line-height: 2;
}

a:link {
   text-decoration: underline;
   color: blue;
}

Selectors define to which elements and pseudo elements the ruleset is applied.

Live Code

This deck is "live". Changing the selectors, properties and values in a code block will change the CSS for the current deck. Instantly.

Including CSS

  • <link>
  • <style>
  • @import
  • inline (style attribute)
  • scripting

<link>

<!DOCTYPE HTML>
  <html>
  <head>
  <meta charset="utf-8" />
  <title>CSS Intro</title>
   <link rel="stylesheet" href="styles1.css" type="text/css"/>
  <link rel="stylesheet" href="styles2.css"/>
  <link rel="stylesheet" media="all" href="http://fonts.googleapis.com/css?family=Rum+Raisin"/>
  <style>
     @import url(style3.css);
     pre {
        border-radius: 5px;
     }
  </style>
 </head>
 <body style="">
  ...
 </body>

media

media="screen"
media="screen and (max-width: 600px)"
media="screen, print"
@media screen and (max-width: 600px)
  1. all
  2. aural
  3. handheld
  4. braille
  5. embossed
  6. print
  7. projection
  8. screen
  9. tty
  10. tv

covered later!

<style>

<!DOCTYPE HTML>
  <html>
  <head>
  <meta charset="utf-8" />
  <title>CSS Intro</title>
   <link rel="stylesheet" href="styles1.css"type="text/css"/>
  <link rel="stylesheet" href="styles2.css"/>
  <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Rum+Raisin"/>
  <style>
     @import url(style3.css);
     pre {
        border-radius: 5px;
     }
  </style>
 </head>
 <body style="">
  ...
 </body>

@import

<!DOCTYPE HTML>
  <html>
  <head>
  <meta charset="utf-8" />
  <title>CSS Intro</title>
   <link rel="stylesheet" href="styles1.css"type="text/css"/>
  <link rel="stylesheet" href="styles2.css"/>
  <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Rum+Raisin"/>
  <style>
     @import url(print.css) print;
     pre {
        border-radius: 5px;
     }
  </style>
 </head>
 <body style="">
  ...
 </body>
  • @import must be first inside <style>.
  • Media values are comma separated.
  • @import directives not processed until entire file is downloaded causing delay in load time.

inline styles

<!DOCTYPE HTML>
  <html>
  <head>
  <meta charset="utf-8" />
  <title>CSS Intro</title>
   <link rel="stylesheet" href="styles1.css"type="text/css"/>
  <link rel="stylesheet" href="styles2.css"/>
  <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Rum+Raisin"/>
  <style>
     @import url(style3.css);
     pre {
        border-radius: 5px;
     }
  </style>
 </head>
 <body style="background-color: white;">
  ...
 </body>

Scripting

let myTarget = document.querySelector('#myID');
myTarget.style.color = 'blue';
myTarget.classList.toggle('myClass');

/* methods: add, remove, toggle, contains */

Knowledge

  • CSS Rules
  • White space
  • Character declaration
  • Comments
  • Forgiving yet strict

White space

  • CSS is for the most part insensitive to white space, with 3 exceptions:
    • Required between keywords in a value
    • The charset declaration needs to be exact
    • Surround operands with whitespace. Is "-" a minus sign or is it indicating a negative number?
  • In a selector, one or more spaces is a descendant combinator
  • Comments and white space are encouraged for readability. They can be removed via minification during the build process.

Character declaration

@charset "UTF-8";
  • Must be the first thing in the stylesheet
  • Must be the first character on the page
  • Must have EXACTLY one space
  • Must have double quotes
  • Only for linked or imported stylesheets

Comments

Comments are generally optional and encouraged for readability:

/* this is a comment in CSS (and JS) */
/* this is a multiline
comment in CSS (and JS)
that spans 3 lines */
color: /* this works */ red;

Comments

Comments can not be nested:

/* this is the outer comment
/* inner comment */
This is not a comment */
// This is a single line comment in sass and JS, but not CSS

Comments are encouraged for readability, and can be removed during minification / build.

Forgiving yet strict

Forgiving

Skips declarations it doesn't understand

p {
  color: granola; /* not a valid color */
  groot: green; /* not a valid property */
  font-weight: bold; /* will not ignore this */
}

Forgiving yet strict

Strict

Fails entire ruleset if pseudo-class is wrong in a selector

p:oopsie, /* entire declaration tossed */
p.valid { 
  color: green;
}

Forgiving for ::-webkit

Unless it's a ::-webkit- prefixed pseudoelement

::-webkit-does-not-exist,
::after { /* this is NOT ignored */
  content: 'foo';
}

If there is an invalid pseudo-element or pseudo-class within in a chain or group of selectors, the whole selector list is invalid. If a pseudo-element (but not pseudo-class) has a -webkit- prefix, webkit and mozilla will not invalidate the selector list.

Forgiving yet strict: Comments

Can be used to comment out lines of CSS as you test

p {
  color: red; /* won't be overwritten */
  //color: green; /* ignored */
  _color: blue; /* ignored */
  font-weight: bold; /* valid */
}

The underscore is used in many of our code examples.

CSS can be difficult

Paragraph will be blue

body { color: red; } 
p { color: blue; } 
p { color: 16px; }

Paragraph will be red

:root {--size: 16px;}
body { color: red; } 
p { color: blue; } 
p { color: var(--size); }

The former is a syntax error, which is ignored. The latter is an invalid: custom property values that are invalid are not ignored.

The cascade

The C in CSS stands for "Cascade"

p {
  color: red; 
  color: green; 
  color: blue; 
}

Will be blue

Developer Tools

Developer tools help with:

  • Seeing what CSS impacts each element individually
  • What property values have been inherited
  • Finding mistakes
  • Learning about new features

Right click or command click on this paragraph and inspect it.

Action Mac Windows / Linux
Open DevTools Command + Option + I F12 or Control + Shift + I
Console panel Command + Option + J Control + Shift + J
Elements panel Command + Shift + C
Command + Option + C 		Control + Shift + C

Exercise

♥
♣
♦

Exercise

♥
♣
♦

There will be several exercises in each section. We'll also be creating 3 cards that we can flip as an example throughout the day or week. Let's start by:

  1. Create an HTML page
  2. Declare the language
  3. Include the character set
  4. Include a <title>
  5. Add a link to an external stylesheet
  6. Create your external stylesheet
  7. Include the character set
  8. Save it

Solution

HTML document

<!DOCTYPE HTML>
<html lang="en-us">
 <head>
  <meta charset="UTF-8"/>
  <title>CSS is fun</title>
  <link rel="stylesheet" href="style.css"/> 
 </head>
 <body>
 </body>
</html>

Save as cards.html

Solution

CSS file

@charset "UTF-8";
/* CSS Document */

Saves as style.css

Exercise 2

Open

Selectors

Next ➹

Table of Content

  1. Introduction
  2. Selectors
  3. Specificity
  4. Generated Content
  5. Media Queries
  6. Units & Values
  7. Colors & Transparency
  8. Math & Variables
  9. Fonts
  10. Text
  11. Images
  12. Backgrounds
  13. Gradients
  14. Box Model
  15. Flexbox
  16. Tables
  17. Grids
  18. Transforms
  19. Transitions & Animation
  20. Other Features

Links

Photo credits: