property: value;
color: red;
font-weight: bold;
{
color: red;
font-weight: bold;
}
{
transition: all 2s ease-in;
transform: scale(2) translate(50vw, 50vh);
}
selectorA {
property1: value1;
property2: value2;
}
selectorB,
selectorC {
property1: value3;
property2: value4;
}
p {
color: #333333;
line-height: 2;
}
a:link {
text-decoration: underline;
color: blue;
}
Selectors define to which elements and pseudo elements the ruleset is applied.
This deck is "live". Changing the selectors, properties and values in a code block will change the CSS for the current deck. Instantly.
<link><style>@importstyle attribute)<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>CSS Intro</title>
<link rel="stylesheet" href="styles1.css" type="text/css"/>
<link rel="stylesheet" href="styles2.css"/>
<link rel="stylesheet" media="all" href="http://fonts.googleapis.com/css?family=Rum+Raisin"/>
<style>
@import url(style3.css);
pre {
border-radius: 5px;
}
</style>
</head>
<body style="">
...
</body>
media="screen" media="screen and (max-width: 600px)" media="screen, print" @media screen and (max-width: 600px)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>CSS Intro</title>
<link rel="stylesheet" href="styles1.css"type="text/css"/>
<link rel="stylesheet" href="styles2.css"/>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Rum+Raisin"/>
<style>
@import url(style3.css);
pre {
border-radius: 5px;
}
</style>
</head>
<body style="">
...
</body>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>CSS Intro</title>
<link rel="stylesheet" href="styles1.css"type="text/css"/>
<link rel="stylesheet" href="styles2.css"/>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Rum+Raisin"/>
<style>
@import url(print.css) print;
pre {
border-radius: 5px;
}
</style>
</head>
<body style="">
...
</body>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>CSS Intro</title>
<link rel="stylesheet" href="styles1.css"type="text/css"/>
<link rel="stylesheet" href="styles2.css"/>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Rum+Raisin"/>
<style>
@import url(style3.css);
pre {
border-radius: 5px;
}
</style>
</head>
<body style="background-color: white;">
...
</body>
let myTarget = document.querySelector('#myID');
myTarget.style.color = 'blue';
myTarget.classList.toggle('myClass');
/* methods: add, remove, toggle, contains */
charset declaration needs to be exact@charset "UTF-8";
Comments are generally optional and encouraged for readability:
/* this is a comment in CSS (and JS) */
/* this is a multiline comment in CSS (and JS) that spans 3 lines */
color: /* this works */ red;
Comments can not be nested:
/* this is the outer comment /* inner comment */This is not a comment */
// This is a single line comment in sass and JS, but not CSS
Comments are encouraged for readability, and can be removed during minification / build.
Skips declarations it doesn't understand
p {
color: granola; /* not a valid color */
groot: green; /* not a valid property */
font-weight: bold; /* will not ignore this */
}
Fails entire ruleset if pseudo-class is wrong in a selector
p:oopsie, /* entire declaration tossed */
p.valid {
color: green;
}
Unless it's a ::-webkit- prefixed pseudoelement
::-webkit-does-not-exist,
::after { /* this is NOT ignored */
content: 'foo';
}
If there is an invalid pseudo-element or pseudo-class within in a chain or group of selectors, the whole
selector list is invalid. If a pseudo-element (but not pseudo-class) has a -webkit- prefix,
webkit and mozilla will not invalidate the selector list.
Can be used to comment out lines of CSS as you test
p {
color: red; /* won't be overwritten */
//color: green; /* ignored */
_color: blue; /* ignored */
font-weight: bold; /* valid */
}
The underscore is used in many of our code examples.
Paragraph will be blue
body { color: red; }
p { color: blue; }
p { color: 16px; }
Paragraph will be red
:root {--size: 16px;}
body { color: red; }
p { color: blue; }
p { color: var(--size); }
The former is a syntax error, which is ignored. The latter is an invalid: custom property values that are invalid are not ignored.
The C in CSS stands for "Cascade"
p {
color: red;
color: green;
color: blue;
}
Will be blue
Developer tools help with:
Right click or command click on this paragraph and inspect it.
| Action | Mac | Windows / Linux |
|---|---|---|
| Open DevTools | Command + Option + I |
F12 or Control + Shift + I |
| Console panel | Command + Option + J |
Control + Shift + J |
| Elements panel |
Command + Shift + C Command + Option + C
|
Control + Shift + C |
There will be several exercises in each section. We'll also be creating 3 cards that we can flip as an example throughout the day or week. Let's start by:
<title><!DOCTYPE HTML> <html lang="en-us"> <head> <meta charset="UTF-8"/> <title>CSS is fun</title> <link rel="stylesheet" href="style.css"/> </head> <body> </body> </html>
Save as cards.html
@charset "UTF-8"; /* CSS Document */
Saves as style.css
Photo credits: