Styling with CSS Slides

CSS

Cascading Style Sheets (CSS)
CSS, by itself, does nothing.
Responsible for determining how your HTML looks

Why Does CSS Exist?

CSS formats your webpage. Without it, there is only content, and no structure or styles.
Can be written within HTML, or using an external style sheet (the correct way)
Creating external style sheets prevents you from having to write code multiple times, and makes it easy to modify.

Styling Text With CSS

Using CSS properties, you can modify the appearence of your HTML.
This can done by targeting HTML elements.

Inline Style

Adding the style onto the HTML element directly
Uses the style attribute of an element
Declarations go within the style attribute value

<h1 style="color: red; font-size: 32px;">

Example:

Let's say we have the following HTML:


<!DOCTYPE html>
<html>
  <head>
    <title>My Cat</title>
  </head>
  <body>
    <h1>My Cat Bob</h1>
    <p>My cat is named Bob. He is a lazy cat.</p>
  </body>
</html>

Here is an example of CSS:

h1 {
  color:red;
  font-size:24px;
}

p {
  color:blue;
  font-size: 12px;
}

What is the CSS doing here?

Selectors and Properties

CSS is constructed of selectors and properties.
Selectors determine where the styles are applied.
Properties determine what those styles are.
CSS begins with a selector, followed by curly braces.
Declare your styles inside the curly braces.

Examples of Selectors

selector	meaning
`p`, `div`, etc.	element selector
`.class`	class selector
`#id`	ID selector
`*`	Wildcard ("any")

Examples of Properties

property	meaning
`color`	text color
`border`	Defines border width, style, and color
`text-align`	justifies text
`font-size`	size of font
`font-family`	defines font

LAB: Basic Selectors

Complete the following exercise on Mozilla Developer Network
- Selecting Different Elements

Compound Selectors 1

Selectors can target elements nested within other elements

p img {
  max-width: 320px;
  height: auto;
}

Compound Selectors 2

Selectors can target specific elements with a class

h1 .title {
  display: block;
  margin: 0, auto;
  padding-top: 1em;
}

LAB: Multiple Class Selectors

Complete the following exercise on Mozilla Developer Network
- CSS Selectors for Multiple Classes

Compound Selectors 3

Selectors can target specific elements with several layers of nesting

main .introduction > p {
  background-color: lightgray;
  margin: 10px auto;
}

"apply these styles to all ps that are direct children of a div of class introduction inside the main section"

Psuedo-Class Selectors

You can target the state of an element using psuedo-class selectors

Hover
Visited
Checked
Active
Many others

Full List on MDN

MDN Psuedo-Class Tutorial

a:hover {
  background-color: red;
}

a:clicked {
  background-color: blue;
}

a:active {
  background-color: green;
}

LAB: CSS Diner

Complete the following CSS selector game
- https://flukeout.github.io/

Including CSS into HTML

There are several ways to add style to an HTML page

<style> Embedded CSS
<link> Tag to a CSS file
<h1 style="color: red; font-size: 32px;"> Inline
<link> Tag to a CSS file
<style> Tags with @import of a CSS file

CSS Style Tags

<!DOCTYPE html>
<html>
  <head>
    <title>My Cat</title>
    <style type="text/css" media="screen">
     div {
       float: left;
       width: 49%;
       height: 100px;
       border: solid red 1px;
     }

     button {
       float: left;
       clear: both;
     }
    </style>
  </head>
  <body>
    <h1>My Cat Bob</h1>
    <p>My cat is named Bob. He is a lazy cat.</p>
  </body>
</html>

Linking to CSS

<!DOCTYPE html>
<html>
  <head>
    <title>My Cat</title>
    <link href="styles/style.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <h1>My Cat Bob</h1>
    <p>My cat is named Bob. He is a lazy cat.</p>
  </body>
</html>

@import

You can put all your CSS in one file
You can load one CSS file into another using @import

Example

<style type="text/css" media="screen">
  @import 'my_special_css_file.css';
</style>

https://developer.mozilla.org/en-US/docs/Web/CSS/%40import

The Element Box Model

Imagine every HTML element as a 'box'.
Every box consists of four different 'layers': Margin, Border, Padding, and Content.
Margins and padding help to position and align content inside an HTML element.
Padding and margins are transparent. Think of it as empty space.
Borders can be colored, or image-based. They can also be 'styled' (dashes, dots, etc.)

Illustration of the CSS box model

More information: MDN: CSS Box Model
Even more information: Shay Howe, opening the box model

Cascading Syles


h1 {
  color: red;
}

.title {
  color: yellow;
}

#introduction {
  color: blue;
}

<h1>Hi there, I am RED</h1>
<h1 class="title">Hi there, I am YELLOW</h1>
<h1 class="title" id="introduction">Hi there, I am BLUE</h1>

The !Important Declaration

Using !important in a declaration overrides all other declarations

Example


h1 {
  color: red;
}

.title {
  color: yellow !important;
}

#introduction {
  color: blue;
}

Style Override Precedence

5. Element Selectors
4. Class Selectors
3. ID Selectors
2. Inline CSS
1. !important

Style Specificity Precedence

More specific selectors will override less specific

.main p {
  // Least specific
  background-color: yellow;
}

.header .title h1{
  // Somewhat specific
  background-color: red;
}

.nav .menu .option li{
  // Most specific
  background-color: blue;
}