Intro to CSS

Inspired by CS50 WebTrack

Thanks to w3schools

CSS (Cascading Style Sheets) defines the style, appearance, and formatting of websites. It gives a consistent look to every page on a site.

CSS can be written as inline styles directly in your HTML, or stored in an external file (e.g. styles.css) and linked to it. Both approaches have trade-offs.

External CSS file Inline styles
Consistency Changes affect the whole site at once, ensuring a consistent look. Hard to keep a consistent look — changes must be made on every page.
Maintenance Content and formatting are separate, making code easier to read and update. Formatting is mixed in with content, which can get messy on large pages.
Performance The stylesheet is cached by the browser, so subsequent pages load faster. Formatting is reloaded with every page, which can slow the site down.
Flexibility Stylesheets can be swapped for different themes or devices (e.g. mobile). Useful for quick, one-off changes to a single element without touching a stylesheet.

Selectors are how you identify which elements to apply CSS to — for example, all <p> tags, elements with a certain class attribute, or a single element identified by its id.


topic description code output
Inline styles Apply CSS directly to an element using the style attribute. Highest specificity but hardest to maintain — avoid for large projects. 
<p style="color: red; font-size: 20px;">
  Hello!
</p>

Hello!
Classes Define a reusable style in CSS using .className, then apply it with the class attribute. The same class can be assigned to many elements. 
/* In your CSS file */
.highlight {
  background-color: yellow;
  font-weight: bold;
}

<!-- In your HTML -->
<p class="highlight">Important text</p>
<p class="highlight">Also important</p>

Important text

Also important
Identifiers (id) Apply a style to one unique element using #idName in CSS and id="idName" in HTML. Only one element can have a given id. 
/* In your CSS file */
#mainTitle {
  color: darkblue;
  text-decoration: underline;
}

<!-- In your HTML -->
<h2 id="mainTitle">My Title</h2>

My Title
background-color Sets the background colour of an element. Note the American spelling — background-color not background-colour. Accepts colour names, hex codes, or rgb() values. 
p {
  background-color: lightgreen;
}

p {
  background-color: #ffa500;
}

Green background

Hex orange background
border-color Sets the colour of an element's border. Requires border-style to also be set, otherwise the border won't show. 
p {
  border-style: solid;
  border-color: red;
}

Red border
border-style Sets the style of the border. Common values: solid, dashed, dotted, double, none. 
p {
  border-style: solid;
}
p {
  border-style: dashed;
}
p {
  border-style: dotted;
}

Solid

Dashed

Dotted
border-width Sets how thick the border is. Can use pixels (px), or keywords like thin, medium, thick. 
p {
  border-style: solid;
  border-width: 1px;
}
p {
  border-style: solid;
  border-width: 5px;
}
p {
  border-style: solid;
  border-width: thick;
}

1px

5px

thick
color Sets the foreground (text) colour. Note the American spelling — color not colour — as with all CSS properties. Accepts colour names (e.g. red) or hex codes (e.g. #ff0000). 
/* Using a colour name */
p {
  color: blue;
}

/* Using a hex code */
p {
  color: #ff0000;
}

Blue text (colour name)

Red text (hex #ff0000)
font-family Sets the typeface. List fallbacks separated by commas — the browser uses the first available font. Generic families like serif, sans-serif, monospace should go last. 
p {
  font-family: Georgia, serif;
}
p {
  font-family: Arial, sans-serif;
}
p {
  font-family: "Courier New", monospace;
}

Georgia (serif)

Arial (sans-serif)

Courier New (monospace)
font-size Sets how large the text is. The most common unit is px (pixels). 16px is the typical browser default. 
p {
  font-size: 12px;
}
p {
  font-size: 20px;
}
p {
  font-size: 32px;
}

12px — small text

20px — larger text

32px — large text
height Sets the height of an element. Works well on block elements or elements with a defined size like images. Can use px, %, or auto. 
div {
  height: 60px;
  background-color: lightblue;
}

div {
  height: 120px;
  background-color: lightyellow;
}
height: 60px
height: 120px
width Sets the width of an element. Can use px for a fixed width or % to be relative to the parent container. 
div {
  width: 150px;
  background-color: lightcoral;
}

div {
  width: 75%;
  background-color: lightgreen;
}
150px wide
75% wide