Hi there! 👋

This is me

What to Expect

Learn about Styling the Web

You teach yourself

Lots of interaction - http://bit.ly/css-starter

What NOT to Expect

Let's get Started!

http://bit.ly/css-starter

Making Websites

What is CSS?

Styles

https://csszengarden.com

Alex, Make sure you show the index.html file first!

CSS

Selectors - What HTML element(s) get the style

(eg. div, #header, .button-large)

Properties - What style changes are added to the element

(eg. color, font-size, width)

Values - Applied to properties to affect the style

(eg. blue, 10px, hidden)

Selectors

Tag Selector

<p></p> - p {}

<span></span> - span {}

<div></div> - div {}

  • Can easily style too much

Selectors

ID Selector: #

<p id="never"></p> - #never {}

<span id="going"></span> - #going {}

<div id="to"></div> - #to {}

  • Only one ID per element
  • Only allowed to use ID once per HTML page

Selectors

Class Selector: .

<p class="give you up"></p> - .give {} .you {} .up {}

<span class="never going to"></span> - .never, .going, .to {}

<div class="let you down"></div> - .let, .you, .down {}

  • Best general-use selector
  • Multiple classes on a Tag
  • Multiple uses of classes on an HTML page

Selectors

Grouped Selectors

p, span, div {}

h1, h2, h3, h4, h5, h6 {}

Properties

accelerator
azimuth
background
background-attachment
background-color
background-image
background-position
background-position-x
background-position-y
background-repeat
behavior

Properties

border
border-bottom
border-bottom-color
border-bottom-style
border-bottom-width
border-collapse
border-color
border-left
border-left-color
border-left-style
border-left-width
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-style
border-top-width
border-width

Properties

bottom
caption-side
clear
clip
color
content
counter-increment
counter-reset
cue
cue-after
cue-before
cursor
direction
display
elevation
empty-cells
filter
float

Properties

🤷‍♂️

I got bored of writing them all out.

Properties

color: red;
font-size: 40px;
border-bottom: solid 4px white;
padding-top: 40px;
O hai!

The Box Model

Applying Styles

<p style="color:red; border: solid 1px black">Hello</p>

<style>p {color: green}</style>

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

Let's Learn More

Video Tutorial

Same as last time, but starting with CSS

Interneting Is Hard

Same as last time, but do the CSS Stuff

Webdev Guild

Hardcore Projects

Let's Build Something

https://www.frontendmentor.io