CSS introduction · Web Dev 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

h1 {
  background-color: #f2f1ed;      /* Colour behind text */
  color: #222;                    /* Text colour */
  font-family: Georgia, serif;    /* Suggested typeface & backup */
  font-size: 2rem;                /* Suggested size of the type */
  font-style: italic;             /* Italic or normal */
  font-weight: bold;              /* Bold, normal, or number like 200 */
  line-height: 1.5;               /* Multiplier against the size */
  list-style-type: square;        /* Bullets: none, circle, decimal, lower-alpha, etc. */
  text-align: center;             /* Left, right, center, justify */
  text-decoration: underline;     /* Underline or none */
  text-transform: uppercase;      /* Uppercase, lowercase */
}
img {
  width: 100%;                    /* Make the width fill the whole space */
}

Core typefaces

Arial
Verdana
Georgia
Times New Roman
Comic Sans (um… really!?)
Courier
Impact (not as reliable)

Google Fonts

Can’t just use any typeface available on your computer

Google has many good typefaces (Typekit too)

Include another CSS <link> tag

Font sizes

Suggestions for the size to be displayed—user is always in control

rem — scalable size based on browser settings
em — scalable size based on parent element
px — don’t use for font-size—ever