Premium access
p {
margin: 32px;
}
What is the property in the code above?
margin is the property.
Properties in CSS are the attributes you can specify values for, like "color" and "font-size".
.apple {
background-color: red;
border-radius: 50%;
}
What is the selector in the code above?
.apple is the selector.
A selector is a descriptor that lets you target specific elements on the page.
In this case, we're selecting all nodes with the "apple" class.
.code-snippet {
padding: 32px;
white-space: pre-wrap;
}
What is the first declaration in the previous code?
padding: 32px; is the first declaration.
A declaration is a combination of a property and a value. In this case, the first declaration has a property of "padding",
and a value of "32px".
h1 {
font-size: 2rem;
font-weight: bold;
letter-spacing: 0.1em;
}
What is the selector in the previous code?
h1 is the seletor.
A selector is a descriptor that lets you target specific elements on the page.
In this case, we're selecting all 'h1' tags (though a page should generally only have one h1!)
p {
color: red;
font-family: sans-serif;
}
What is the rule in the code above?
The whole code block is a rule. A rule, also known as a style, is a collection of declarations, targeting one or more selectors. A stylesheet is made up of multiple rules.
p {
padding-top: 24px;
}
What is the unit in the code above?
px is the unit.
Some values have units, like px, %, or em. In this case, our padding-top has a value of 24px, which is measured in the "px" unit.
main {
max-width: 65ch;
margin: 0 auto;
}
What is the second declaration in the code above?
margin: 0 auto; is the second declaration.
A declaration is a combination of a property and a value.
In this case, the second declaration has a property of "margin", and a value of "0 auto".
p {
font-size: 1rem;
}
.big-paragraph {
font-size: 1.25rem;
font-weight: 500;
}
What is the first rule in the code above?
p {
font-size: 1rem;
} is the first rule.
A rule, also known as a style, is a collection of declarations, targeting one or more selectors.
In this example, we have two rules, and the first one targets all "p" tags.
<!DOCTYPE html>
<html>
<style>
</style>
<button>Hover over me!</button>
</html>
Modify the previous code so that the button gets blue when it is hovered.
<!DOCTYPE html>
<html>
<style>
button:hover {
color: blue;
}
</style>
<button>Hover over me!</button>
</html>
<!DOCTYPE html>
<html>
<style>
</style>
<button>Hello</button>
</html>
Modify the previous code so that the backgound color of the button gets yellow when the button is focused.
<!DOCTYPE html>
<html>
<style>
button:focus {
background: yellow;
}
</style>
<button>Hello</button>
</html>
HTML comes with interactive elements like buttons, links, and form inputs. When we interact with one of these elements (either by clicking on it or tabbing to it), it becomes focused. It'll capture keyboard input, so we can type into a form field or press "Enter" to follow a link.
The :focus pseudo-class allows us to apply styles exclusively when an interactive element has focus.
<!DOCTYPE html>
<html>
<style>
</style>
<h1>Pizza Toppings</h1>
<br />
<label>
<input type="checkbox" />
Avocado
</label>
<br />
<label>
<input type="checkbox" />
Broccoli
</label>
<br />
<label>
<input type="checkbox" />
Carrots
</label>
</html>
Modify the previous code so that the width and height of the checkboxes are 30px when the checkboxes are checked.
<!DOCTYPE html>
<html>
<style>
input:checked {
width: 24px;
height: 24px;
}
</style>
<h1>Pizza Toppings</h1>
<br />
<label>
<input type="checkbox" />
Avocado
</label>
<br />
<label>
<input type="checkbox" />
Broccoli
</label>
<br />
<label>
<input type="checkbox" />
Carrots
</label>
</html>
<!DOCTYPE html>
<html>
<style>
p {
margin-bottom: 1em;
}
</style>
<section>
<p>This is a paragraph!</p>
<p>This is another paragraph!</p>
<p>
What do you know, it's a third
paragraph!
</p>
</section>
</html>
Modify the previous code with a pseudo-class so that the last paragraph
has a margin-bottom of 0.
<!DOCTYPE html>
<html>
<style>
p {
margin-bottom: 1em;
}
p:last-child {
margin-bottom: 0;
}
</style>
<section>
<p>This is a paragraph!</p>
<p>This is another paragraph!</p>
<p>
What do you know, it's a third
paragraph!
</p>
</section>
</html>
<!DOCTYPE html>
<html>
<style>
</style>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Carrot</li>
<li>Durian</li>
</ul>
</html>
Modify the previous code with a pseudo-class so that the first bullet point has a red color.
<!DOCTYPE html>
<html>
<style>
li:first-child {
color: red;
}
</style>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Carrot</li>
<li>Durian</li>
</ul>
</html>
<!DOCTYPE html>
<html>
<style>
</style>
<section>
<h1>Hello world!</h1>
<p>This is a paragraph!</p>
<p>This is another paragraph!</p>
</section>
</html>
Modify the previous code with a pseudo-class so that the first paragraph has a red color.
<!DOCTYPE html>
<html>
<style>
p:first-of-type {
color: red;
}
</style>
<section>
<h1>Hello world!</h1>
<p>This is a paragraph!</p>
<p>This is another paragraph!</p>
</section>
</html>
<!DOCTYPE html>
<html>
<style>
input {
font-size: 1rem;
}
</style>
<label>
Nickname:
<input
type="text"
placeholder="Batman"
/>
</label>
</html>
Modify the previous code with a pseudo-element so that the placeholder has the color red.
<!DOCTYPE html>
<html>
<style>
input {
font-size: 1rem;
}
input::placeholder {
color: red;
}
</style>
<label>
Nickname:
<input
type="text"
placeholder="Batman"
/>
</label>
</html>
Pseudo-elements target "sub-elements" within an element.
In terms of syntax, pseudo-elements use two colons instead of one (::), even though some pseudo-elements also support single-colon syntax.
If we stop and think about it, something pretty interesting is happening here.
We haven't explicitly created a <placeholder> element,
but by adding the placeholder attribute to the <input> tag, a pseudo-element is created.
This is why they're called pseudo-elements. These selectors target elements in the DOM that we haven't explicitly created with HTML tags.
<!DOCTYPE html>
<html>
<style>
.main span {
color: red;
}
</style>
<p class="main">
<span>1</span>
</p>
<section>
<p>
<span>2</span>
</p>
<p>
<span class="main">3</span>
</p>
</section>
<section class="main">
<ul>
<li>
<span>4</span>
</li>
</ul>
</section>
</label>
</html>
In the previous code, what numbers appear in red?
The numbers 1 and 4 appear in red.
By putting a space between .main and span,
we're combining two selectors in a very specific way: we're saying that the styles should only apply to
span tags that are nested within elements with the main class.
In this case, the space character combines .main and span
to create a descendant selector.
The descendant selector will apply to all descendants, no matter how deeply nested they are. That is why number 4 appears in red.
<!DOCTYPE html>
<html>
<style>
.main > span {
color: red;
}
</style>
<p class="main">
<span>1</span>
</p>
<section>
<p>
<span>2</span>
</p>
<p>
<span class="main">3</span>
</p>
</section>
<section class="main">
<ul>
<li>
<span>4</span>
</li>
</ul>
</section>
</label>
</html>
In the previous code, what numbers appear in red?
Only the number 1 appear in red.
In CSS, we can differentiate between children and descendants. Think of a family tree: a child is only one level down from the parent. A descendant might be 1 level down (child), 2 levels down (grandchild), 3 levels down…
The > combinator lets us target the children exclusively.
If span is not a child of an element with the main class,
it is not selected for the CSS rule.
<!DOCTYPE html>
<html>
<style>
section {
width: 500px;
}
.box {
width: 100%;
padding: 20px;
border: 4px solid;
}
</style>
<section>
<div class="box"></div>
</section>
</html>
The code snippet below will draw a black rectangle on the screen (due to the border). What are the dimensions of that rectangle?
Width: 548px. Height: 48px.
When we set our .box to have width: 100%,
we're saying that the box's content size should be equal to the available space, 500px.
The padding and border is added on top.
Our box winds up being 548px wide because it adds 20px of padding and 4px of border to each side: 500 + 20 * 2 + 4 * 2.
The same thing happens with height: because the element is empty, it has a content size of 0px, with the same border and padding added on top.
This behaviour is surprising, and generally not what we want as developers! Thankfully, browsers provide an escape hatch.
The box-sizing CSS property allows us to change the rules for size calculations.
The default value (content-box) only takes the inner content into account, but it offers an alternative value: border-box.