CSS

What is CSS

Cascading Style Sheets

the beautiful skin atop HTML
Worst website

Worse

http://designm.ag/wp-content/inspiredology/2012/11/Polygon_main.jpg

CSS in the Wild

tweak css values for a website using Inspector

fire up inspector, or Ctrl+Shift+C, click on something, and see the sidebar

3 ways of defining css

  1. inline
  2. <style> tag
  3. external stylesheet

background-color

most obvious style change

<body style="background-color: #dddddd">
<div>IMPRESSIVE LOGO</div>

wrap it all in a header for convenience

<header>
  <!-- logo goes here -->
  <!-- nav goes here -->
</header>
<div style="text-align: center;">
  IMPRESSIVE LOGO
</div>

text-align: center to center navigation links

<ul style="text-align: center">

urgh, bullet points

<ul style="text-align: center; list-style-type: none;">
<li style="display: inline-block;"> <a href="#details">Details</a> </li>
<li style="display: inline-block;"> <a href="#installation">Installation</a> </li>
<li style="display: inline-block;"> <a href="#creators">Creators</a> </li>

Style tags and selectors

Styling individual elements is tedious

create style tag in head

<!-- in head -->
<style>
</style>

body to select html tags

body {
  background-color: #dddddd;
}

.class to select class

.logo {
  color: #90a150
}

ul to style lists

ul {
  list-style-type: none;
}

li {
  display: inline-block;
  margin-left: 1em;
}
yucks!

use nav ul selector to be more precise, or give a class to the nav

nav ul {
  list-style-type: none;
}
nav ul li {
  display: inline-block;
}

float, box model, clearing

we want logo to be beside the links, use float to ask browser to squeeze them on the same line

.logo {
  float: left;
  font-size: 3em;
}

nav ul {
  float: right;
  list-style-type: none;
}

messed up layout

use a clear: both on div.content to clear it away

.content {
  clear: both;
}

margin

our links seem to be too close together, use margin-left to give it space

nav ul li {
  display: inline-block;
  margin-left: 1em;
}

padding

our content looks like they are too close to the edges of the page

wrap everything in a div.container, set padding-top: 3em

.container {
  padding-top: 3em;
}

fonts

make impressive logo bigger using font-size

.logo {
  color: #90a150;
  float: left;
  font-size: 3em;
}
text-align has no more use now that it's floated, remove it

shorthands for font

nav ul {
  float: right;
  list-style-type: none;
  font-size: 1.3em;
  font: 1.3em sans-serif;
}

Webfonts

Google Web Fonts

<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
font-family: 'PT Sans', sans-serif;

centering everything

set a width for .container or a max-width

.container {
  margin: 0px auto;
  max-width: 760px;
  padding-top: 3em;
}

Pseudo selectors

introducing a:link, a:hover, a:visited

a:link {
  color: #839e24;
  text-decoration: none;
  border-bottom: 0.14em dotted #839e24;
}

a:hover {
  color: #303030;
  background: #b1d641;
  border-bottom: none;
}
there's a lot more, such as n-th child, explore on your own

References

Detailed reference on all CSS properties

Google Web Fonts