CSS is Magic

What is CSS?

What is CSS?

What is CSS?

Cascading Style Sheets, most of the time abbreviated as CSS, is a stylesheet language used to describe the presentation of a document written in HTML or XML (including various XML languages like SVG or XHTML). CSS describes how the structured element must be rendered on screen, on paper, in speech, or on other media.

- MDN

CSS provides structure and style

What is CSS?

But if I'm not going to be a designer I don't really need to know CSS, right?

Getting Started

Getting Started

You can apply CSS in multiple ways.

<head>
  <title>My Awesome Page</title>
  <style>
    /* CSS goes here! */
  </style>
</head>

<p style="[ put your styles here ]">Hi!</p>
<head>
  <title>My Awesome Page</title>
  <link rel="stylesheet" href="/path/to/css">
</head>

Getting Started

CSS allows you to describe the look and layout of the elements on your page

Hello, CSS!


color: red;

Hello, CSS!

Hello, CSS!


font-weight: bold;

Hello, CSS!


width: 200px;

border: 3px solid blue;

Getting Started

selector {
    rule: value;
}
h1 {
    color: red;
}

h1#heading {
    color: orange;
}

h1 #heading {
    color: yellow;
}
a:hover {
    color: blue;
}

a:active, a:visited {
    color: green;
}

a, a:active, a:visited, a:hover {
    text-decoration: none;
}
p {
    font-size: 24px;
}
div.success {
    border: 1px solid blue;
}

Getting Started

We can apply CSS to all elements of a page.

<body>
  <p>Hello, <span>CSS!</span></p>
  <span>You're perfect!</span>
</body>
<body>
  <p>Hello, <span>CSS!</span></p>
  <span>You're perfect!</span>
</body>
span {
 /* ... */
}
<body>
  <p>Hello, <span>CSS!</span></p>
  <span>You're perfect!</span>
</body>
<body>
  <p>Hello, <span>CSS!</span></p>
  <span>You're perfect!</span>
</body>
p span {
 /* ... */
}

We can specify the selection as well.

<body>
  <p>Hello, <span>CSS!</span></p>
  <span>You're perfect!</span>
</body>
<body>
  <p>Hello, <span>CSS!</span></p>
  <span>You're perfect!</span>
</body>
p {
 /* ... */
}

Selections will cover all sub-elements.

Getting Started

If there are two competing rules, the last one applies.

<body>
  <p>Hello, <span>CSS!</span></p>
  <span>You're perfect!</span>
</body>
<body>
  <p>Hello, <span>CSS!</span></p>
  <span>You're perfect!</span>
</body>
span {}
span {}
<body>
  <p>Hello, <span>CSS!</span></p>
  <span>You're perfect!</span>
</body>
<body>
  <p>Hello, <span>CSS!</span></p>
  <span>You're perfect!</span>
</body>

With different selections, we can create complex styling.

p {}
span {}
<body>
  <p>Hello, <span>CSS!</span></p>
  <span>You're perfect!</span>
</body>
<body>
  <p>Hello, <span>CSS!</span></p>
  <span>You're perfect!</span>
</body>

It can also get a bit confusing.

p {}
span {}
p span {}

Getting Started

By attaching style to specific elements or a specific sequence of elements, our CSS becomes tightly coupled with our HTML.

<body>
  <p class="yellow">
    Hello, 
    <span class="red">
      CSS!
    </span>
  </p>
  <span class="blue">
    You're perfect!
  </span>
</body>
.blue {}
.yellow {}
.red {}

Instead, it's better to use classes.

<body>
  <p class="yellow">
    Hello, 
    <span class="red">
      CSS!
    </span>
  </p>
  <span class="blue">
    You're perfect!
  </span>
</body>

Getting Started

Classes are more descriptive and aren't tied to HTML structure, but that doesn't mean they won't cascade.

<body>
  <p class="yellow">
    Hello, 
    <span class="red">
      CSS!
    </span>
  </p>
  <span class="blue">
    You're perfect!
  </span>
</body>
.blue {}
.yellow {}
.red {}
<body>
  <p class="yellow red">
    Hello, 
    <span class="red blue">
      CSS!
    </span>
  </p>
  <span class="yellow blue red">
    You're perfect!
  </span>
</body>

What color will each element be?

Exercise

Specificity

Specificity

Cascading Style Sheets

By cascading, we mean that multiple styles can be applied, from the most general to the most specific

CSS specificity is determined by the following*:

Example

id

class

inline

element

!important

* for the most part

Specificity

CSS specificity is determined by the following, in order*:

Example

element

class

id

inline

!important

* for the most part

Specificity

So, when in doubt, just use !important then?

Specificity

Specificity for any given selector is an aggregate number.

Specificity

p {
  /* ... */
}

p span {
  /* ... */
}

p .red {
  /* ... */
}

#red {
  /* ... */
}

0 0 1

0 0 2

0 1 1

1 0 0

p.red {
  /* ... */
}

article #new {
  /* ... */
}

ul li a.current {
  /* ... */
}

#slides .show {
  /* ... */
}

0 1 1

1 0 1

0 1 3

1 1 0

this is the most specific

specificity calculator

More Selectors & Rules

More Selectors & Rules

selector {
    rule: value;
}
h1 {
    color: red;
}

h1#heading {
    color: orange;
}

h1 #heading {
    color: yellow;
}
a:hover {
    color: blue;
}

a:active, a:visited {
    color: green;
}

a, a:active, a:visited, a:hover {
    text-decoration: none;
}
p {
    font-size: 24px;
}
div.success {
    border: 1px solid blue;
}

More Selectors & Rules

selector {
    rule: value;
}
p span {
    /* some rules */
}

<p>Visit my <span>Shop</span></p>

<selector>This is selected.</selector>
div.warning a {
    /* some rules */
}
<div class="warning">
    <a href="#">My Link</a>
</div>
.errors .msg {
    /* some rules */
}
<div class="errors">
    <div class="msg">A Message</div>
</div>
form input[type="checkbox"] {
    /* some rules */
}
<form>
    <input type="checkbox">
</form>

More Selectors & Rules

p {
    display: none;
}
ul.sub-menu li {
    display: inline-block;
}
div.warning div.message p {
    opacity: 0;
}
img {
    margin: 10px 0 15px;
}
p::before {
    content: "-";
}
img + p {
    border: 1px dashed blue;
    border-bottom: none;
}
div.success > p:nth-child(2n+2) {
    text-transform: uppercase;
}
* {
    margin: 0;
    padding: 0;
}

Sometimes it's like this...

...but once you master it, it's like this!

CSS Magic

By Wes Reid

Made with Slides.com

CSS Magic

A brief introduction to CSS. Does *not* include anything on positioning/floats

  • 670

More from Wes Reid