CSS introduction · Web Design 1

CSS introduction

CSS — the look

The chocolate to our peanut

The only thing CSS knows how to do is make something look a certain way

It doesn’t understand content—only style

In a separate file — `main.css`

The folder structure we’re following, a folder named “css” with a file named “main.css” inside.

An example piece of CSS, h1 selector, with the colour set to purple.

The different parts of CSS code: rule set, selector, declaration, property & value.

HTML

<h1>Brontosaurus</h1>
<p class="intro">The “Thunder Lizard” with a long neck and long tail.</p>
<p>Not a <b>dinosaur</b> for a long time, but now, again, real.</p>

CSS

html {
  background-color: cornsilk;
  font-family: Georgia, serif;
}
b {
  color: forestgreen;
  font-weight: normal;
}
.intro {
  color: darkolivegreen;
  font-style: italic;
}

CSS works by targeting something in the HTML the changing is visual design properties.

CSS: Line A

The selector, html, what element we want to change. The html element surrounds the whole page so it’s a good thing to target to change the background colour of the whole website.

CSS: Line B

The background-color property changes the color behind the text. Make sure to spell “color” the American way.

CSS: Line G

The font-weight property controls whether something is bold or not; setting font-weight to normal makes the text not bold.

CSS: Line I

Selecting with a tag, like p will change every single <p> element. If we want to style some elements differently from others we can give them names, called classes. This selector will target only the elements that are named .intro

HTML

<h1>Brontosaurus</h1>
<p class="intro">The “Thunder Lizard” with a long neck and long tail.</p>
<p>Not a <b>dinosaur</b> for a long time, but now, again, real.</p>

CSS

html {
  background-color: cornsilk;
}
b {
  color: #22bb22;
}
.intro {
  background-color: rgba(85, 107, 47, .4);
  color: #fff;
}

There are many different ways to specify colours in CSS, here are a few popular ones.

CSS: Line B

There are ~256 color keywords built into CSS, I generally only use these for testing purposes and stick to the basics like red, green, blue, etc. I have never used cornsilk and probably never will.

CSS: Line E

Probably the most common way to specify colours is using hex values; hex colours always start with a #. It’s a number made of 3 pieces (red, green & blue). It don’t pretend to know these numbers, I just copy and paste them from Photoshop, but I can guess at how light or dark the colour is based on the value.

They’re called “hex” numbers because they are “hexadecimal” meaning not based on 10 digits, but 16 digits.

To count hex you start at 0 and go to 9, then start at A and go to F:

0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f

CSS: Line H

If we want semi-transparent colours, the best way is to use rgba. The last number is the opacity of the color, a decimal between 0 and 1, so .5 is 50% transparent; the lower the number the more transparent.

CSS: Line I

If the hex colour is made of duplicated letters in 3 pairs, it can be shortened to use only one of each duplicate.

#fff expands to #ffffff
#f00 -> #ff0000
#f39 -> #ff3399

CSS

/*
  Reset the layout math:
  - the padding is inside the width
  - friendlier for flexible layouts

  Put this at the top of EVERY CSS file
*/

html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

Browser’s have a few different layout width calculation models. The default is called content-box and the one we’re always going to use is called border-box. When making responsive websites border-box simplifies the math.

With the default content-box if we specify a width the actual layout width is not what we specify but the sum of the width + padding + border so our layouts become cumbersome because we always have to make mathematical choices.

With border-box the width we define is the final width: border and padding are inside what we define, making the math inconsequential.

CSS — the look

In a separate file — main.css

Videos & tutorials

In a separate file — `main.css`