CSS

Why Does CSS Exist?

Styling Text With CSS

Inline Style

<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

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

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

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

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

Including CSS into HTML

There are several ways to add style to an HTML page

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

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

Illustration of the CSS 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

Style Specificity Precedence

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

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

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

 Previous Next 

Outline

[menu]

/