+ - 0:00:00
Notes for current slide
Notes for next slide

This page intentionally left blank. ⬇️, ➡️, or spacebar 🛰 to start slidedeck.

1 / 39

CSS

2 / 39

Cascading

Style

Sheets

3 / 39

Cascading

  • (of water) pour downward rapidly and in large quantities.
  • fall or hang in copious or luxuriant quantities.
  • arrange (a number of devices or objects) in a series or sequence.

4 / 39

HTML is for structure, CSS is for design

5 / 39

Pep talk first

Ira Glass on Storytelling from David Shiyang Liu on Vimeo.

There are many different ways to do things with CSS. While HTML is more inclined to follow the best semantic practice, CSS is much more open to interpretation. This can be frustrating because there's less of a "right way" to do something.

6 / 39

How to put CSS on the page

Something like this goes between your HTML <head> tags:

<link rel="stylesheet" href="style.css">

7 / 39

Applying CSS

  • HTML elements
  • HTML elements with a specific class attribute
  • HTML elements with a specific ID attribute
8 / 39

Basic syntax

h1 {
    color: red;
}
.red {
    color: red;
}
#red {
    color: red;
}
9 / 39

Basic syntax

<h1>This header</h1>
<h1 class="red">This header</h1>
<h1 id="red">This header</h1>
10 / 39

Basic syntax

h1 {
    color: red;
}
  • h1 is the selector
  • { and } hold the rules (called declarations)
  • color is the property
  • red is the value
  • the semi-colon ends the declaration, and a new one can begin
11 / 39

Multiple declarations

h1 {
    color: red;
    font-weight: bold;
}
12 / 39

Multiple selectors

h1, h2 {
    color: red;
}
13 / 39

Competing declarations

h1 {
    color: red;
    color: pink;
}
h1 {
    color: blue;
}
14 / 39

Children selectors

#red > p {
    color: red
}

(Every paragraph tag nested inside of an element with an ID of "red")

15 / 39

Sibling selectors

h1 ~ p {
  color: red;    
}

(The paragraph tag that are at the same nested level as the h1 tag, and no others)

16 / 39

Adjacent selectors

h1 + p {
  color: red;    
}

(The paragraph tag that comes right after the h1 tag, and no others)

17 / 39

HTML attributes with a certain value

input[type=text] {
    border: 1px solid red;
}

(HTML forms that are text will have a red border)

18 / 39

pseudo-elements

  • h1::before
  • h1::after
19 / 39

psuedo-classes

  • :checked
  • :focus
  • and more...
20 / 39

!important

h1 {
    color: red !important;
}
h1 {
    color: blue;
}

This is not really "good practice" but it's good in an emergency

21 / 39

Comments in CSS

/* this is a comment */
22 / 39

Changing text

  • font-family (serif, san serif, or names -- see next slide)
  • font-size (make big or small -- see a few slides from now)
  • font-weight (boldness or lack of)
  • font-style (italic or lack of)
  • text-transform (uppercase, lowercase, capitalize)
23 / 39

Changing fonts

  • Fonts are special; they are loaded from your computer
  • Computers don't always have the same fonts
  • Let's look at "web-safe fonts"
  • Fonts can also be embedded, using something like Google fonts
24 / 39

Changing fonts

  • Here's how to do it: h1 {font-family: "Open Sans", Verdana, sans serif;}
  • Note that you can "stack" fonts in this way
  • The first is a two-word font name, the second is a font name on many computers, and the last is a general font style
25 / 39

Sizing things

There are a lot of options:

  • pixels (width: 800px)
  • frames (width: 1fr)
  • vertical width / vertical height (width: 10vw)
  • percentage (width: 80%)
26 / 39

Sizing text

  • Em values (4.2em)
  • pixels (12px)
  • words (small, medium, large, xxx-large)
  • points (pt), centimeters (cm), inches (in)
27 / 39

Making space

  • Everything on the web is a bunch of boxes even if it doesn't look like it
  • padding (add space around element)
  • border (add space around padding)
  • margin (add space around border)
Box example
28 / 39

Lets talk about color

  • 🌈🌈🌈
  • Here's a list of the 140 named colors: htmlcolorcodes.com
  • "color" means changing the attribute's foreground color (e.g. text, border)
  • background-color will change the color of the box area
29 / 39

Color: lots of options

  • red
  • rgb(255,0,0)
  • rgb(100%,0%,0%)
  • #ff0000
  • #f00
  • hsl(0,100,50)

You can also add transparency to RGB or HSL values:

  • rgba(255,0,0,0.5)
  • hsla(0,100,50, 0.5)
30 / 39

Native Frameworks

31 / 39

Library Frameworks

  • Bootstrap - classicccccccc, very popular, used in a lot of places
  • Materialize - based on Google's design language
  • Pure.css - basic and easy to learn
  • Tufte.css - make your page look like Edward Tufte books
  • ... and so many more!
32 / 39

CSS for page layouts

33 / 39

Grid resources

34 / 39

Flexbox resources

35 / 39

Remember CSS is always changing

36 / 39

Advanced: CSS 3D, transformations and animations

37 / 39

Additional resources

Technical resources:

Bonus:

38 / 39

Learning more

Home

39 / 39

CSS

2 / 39
Paused

Help

Keyboard shortcuts

↑, ←, Pg Up, k Go to previous slide
↓, →, Pg Dn, Space, j Go to next slide
Home Go to first slide
End Go to last slide
Number + Return Go to specific slide
b / m / f Toggle blackout / mirrored / fullscreen mode
c Clone slideshow
p Toggle presenter mode
t Restart the presentation timer
?, h Toggle this help
Esc Back to slideshow