Documentation: Font-Weight

Documentation
Every well-developed language or framework has a place where you can look up all of
its features. This library of information is called a language’s documentation.
You can find the documentation for CSS at Mozilla Developer Network. In addition to
CSS, The Mozilla Developer Network (referred to as MDN) contains the complete
documentation for HTML, JavaScript, and many other essential tools of web
development.
To see the documentation for a specific CSS property, navigate to the MDN website
and search for that property in the search bar at the top of the page. Then, click on the
link for that property. For example, search for the font-weight property. The list of results
might appear intimidating, but you should quickly see a link starting with the
description “The font-weight css property…”. This is the link we want.
Once you land on a property’s documentation page you can read all of the information
about it. For example, font-weight starts with a description of the property. The “Values”
section lists all of the possible values for font-weight. There are some values you already
know, such as normal and bold, but there are also new values, such as lighter and bolder.
Google
Documentation is an essential tool to learn about properties. However, what if you

don’t even know what property you need?
In situations like this, it might come as no surprise that using Google is a great way to
read other developers’ solutions to problems. Googling the problem you’re trying to
solve and the language you’re using will yield many useful answers.
For example, if you want to know how to change the size of text, you could google
“how to change text size using CSS.” After doing this, you will receive multiple links to
information about the font-size property.
Stack Overflow
While using Google in the previous exercise, you may have noticed a lot of links
to a site called Stack Overflow.
Stack Overflow is a useful resource where developers ask and answer questions.
You should use it to find answers to your questions, and learn from experienced
developers.
Reading all of the top-voted answers to a Stack Overflow question can give you
multiple solutions to try as well as an understanding of why one solution might
be better than another. Additionally, if you can’t find a question, you can even
ask it yourself and receive answers.
To search for a question on Stack Overflow, type your question and

programming language into the search bar and find the question threads that
seem relevant.
Inline Styles
Although CSS is a different language than HTML, it’s possible to write CSS code
directly within HTML code using inline styles. To style an HTML element, you can
add the style attribute directly to the opening tag. After you add the attribute,
you can set it equal to the CSS style(s) you’d like applied to that element.
<p style='color: red;'>I'm learning to code!</p>
The code in the example above demonstrates how to use inline styling. The
paragraph element has a style attribute within its opening tag. Next,
the style attribute is set equal to color: red;, which will set the color of the
paragraph text to red within the browser.
If you’d like to add more than one style with inline styles, simply keep adding to
the style attribute. Make sure to end the styles with a semicolon (;).
<p style='color: red; font-size: 20px;'>I'm learning to code!</p>
It’s important to know that inline styles are a quick way of directly styling an
HTML element, but are rarely used when creating websites. But you may
encounter circumstances where inline styling is necessary, so understanding
how it works, and recognizing it in HTML code is good knowledge to have.
Internal Stylesheet
HTML allows you to write CSS code in its own dedicated section with a <style> element
nested inside of the <head> element. The CSS code inside the <style> element is often
referred to as an internal stylesheet.
An internal stylesheet has certain benefits and use cases over inlines styles, but once
again, it’s not best practice (we’ll get there, we promise). To create an internal
stylesheet, a <style> element must be placed inside of the <head> element.
<head>
<style>
</style>
</head>
After adding opening and closing <style> tags in the head section, you can begin
writing CSS code.
<head>
<style>
p{
color: red;
font-size: 20px;
}
</style>
</head>
External Stylesheet
Developers avoid mixing code by storing HTML and CSS code in separate files (HTML
files contain only HTML code, and CSS files contain only CSS code).
You can create an external stylesheet by using the .css file name extension, like
so: style.css. With an external stylesheet, you can write all the CSS code needed to style
a page without sacrificing the readability and maintainability of your HTML file.
Linking the CSS File
You can use the <link> element to link HTML and CSS files together. The <link> element
must be placed within the head of the HTML file. It is a self-closing tag and requires the
following attributes:
1. href — like the anchor element, the value of this attribute must be the address,
or path, to the CSS file.
2. rel — this attribute describes the relationship between the HTML file and the
CSS file. Because you are linking to a stylesheet, the value should be set
to stylesheet.
When linking an HTML file and a CSS file together, the <link> element will look like the
following:
<link href='https://www.codecademy.com/stylesheets/style.css' rel='stylesheet'>
Note that in the example above, the path to the stylesheet is a URL:
https://www.codecademy.com/stylesheets/style.css
Specifying the path to the stylesheet using a URL is one way of linking a stylesheet.
If the CSS file is stored in the same directory as your HTML file, then you can specify
a relative path instead of a URL, like so:
<link href='./style.css' rel='stylesheet'>
Using a relative path is very common way of linking a stylesheet.
Link Styling
The most important aspect of styling links is differentiating links from surrounding text.
The default blue-text, underlined link style accomplishes this differentiation using two
CSS properties: color and text-decoration. These are both good ways to differentiate a
link, and they are strong, familiar signifiers to most web users. Additionally, you could
use CSS properties for background-color, font-weight, or border.
Tooltips and Titles

In addition to providing descriptive anchor text, it is sometimes helpful to provide
additional context to explain links. This context can be particularly helpful when a link
contains or consists of an image, icon, or another non-text element.
Additional context can be provided as text using the HTML title attribute. Although
the title attribute can be provided to any HTML element, it is often extremely useful as
additional context or advisory text for clickable elements.
Most browsers will display the text of a title attribute as a tooltip, meaning when a user
hovers their cursor over an element, the text will appear in a small box near the cursor.
To add tooltips to a clickable element like a link, add it as the title attribute.
<p>
<a href="https://www.codecademy.com" title="Codecademy is an online learning
platform">Codecademy</a> is the best place to learn to code!
</p>
Codecademy is the best place to learn to code!
Type
Remember that declarations are a fundamental part of CSS because they apply a style
to a selected element. But how do you decide which elements will get the style? With
a selector. A selector is used to target the specific HTML element(s) to be styled by the
declaration. One selector you may already be familiar with is the type selector. Just like
its name suggests, the type selector matches the type of the element in the HTML
document.
In the previous lesson, you changed the color of a paragraph element.
p{
color: green;
}
This is an instance of using the type selector! The element type is p, which comes from
the HTML <p> element.
Some important notes on the type selector:
 The type selector does not include the angle brackets.
 Since element types are often referred to by their opening tag name, the type
selector is sometimes referred to as the tag name or element selector.
Universal
The universal selector selects all elements of any type.
The universal selector uses the * character in the same place where you specified the
type selector in a ruleset, like so:
*{
font-family: Verdana;
}
In the code above, every text element on the page will have its font changed
to Verdana.
Class
CSS is not limited to selecting elements by their type. As you know, HTML elements can
also have attributes. When working with HTML and CSS a class attribute is one of the
most common ways to select an element.
<p class='brand'>Sole Shoe Company</p>
The paragraph element in the example above has a class attribute within the opening
tag of the<p> element. The class attribute is set to 'brand'. To select this element using
CSS, we can create a ruleset with a class selector of .brand.
.brand {
To select an HTML element by its class using CSS, a period (.) must be prepended to
the class’s name.
Multiple Classes
We can use CSS to select an HTML element’s class attribute by name. And so far, we’ve
selected elements using only one class name per element. If every HTML element had a
single class, all the style information for each element would require a new class.
Luckily, it’s possible to add more than one class name to an HTML
element’s class attribute. For instance, perhaps there’s a heading element that needs to
be green and bold. You could write two CSS rulesets like so:
.green {
color: green;
}
.bold {
font-weight: bold;
}
Then, you could include both of these classes on one HTML element like this:
<h1 class='green bold'> ... </h1>
We can add multiple classes to an HTML element’s class attribute by separating them
with a space. This enables us to mix and match CSS classes to create many unique
styles without writing a custom class for every style combination needed.
ID
Oftentimes it’s important to select a single element with CSS to give it its own unique
style. If an HTML element needs to be styled uniquely, we can give it an ID using
the id attribute.
<h1 id='large-title'> ... </h1>
In contrast to class which accepts multiple values, and can be used broadly throughout
an HTML document, an element’s id can only have a single value, and only be used
once per page.
To select an element’s ID with CSS, we prepend the id name with a number sign (#). For
instance, if we wanted to select the HTML element in the example above, it would look
like this:
#large-title {
The id name is large-title, therefore the CSS selector for it is #large-title.
Attribute
You may remember that some HTML elements use attributes to add extra detail or
functionality to the element. Some familiar attributes may be href and src, but there
are many more—including class and id!
The attribute selector can be used to target HTML elements that already contain
attributes. Elements of the same type can be targeted differently by their attribute or
attribute value. This alleviates the need to add new code, like the class or id attributes.
Attributes can be selected similarly to types, classes, and IDs.
[href]{
color: magenta;
}
The most basic syntax is an attribute surrounded by square brackets. In the above
example: [href] would target all elements with an href attribute and set
the color to magenta.
And it can get more granular from there by adding type and/or attribute values. One
way is by using type[attribute*=value]. In short, this code selects an element where the
attribute contains any instance of the specified value. Let’s take a look at an example.
<img src='/images/seasons/cold/winter.jpg'>
<img src='/images/seasons/warm/summer.jpg'>
The HTML code above renders two <img> elements, each containing a src attribute with
a value equaling a link to an image file.
img[src*='winter'] {
height: 50px;
}
img[src*='summer'] {
height: 100px;
}
Now take a look at the above CSS code. The attribute selector is used to target each
image individually.
 The first ruleset looks for an img element with an attribute of src that contains
the string 'winter', and sets the height to 50px.
 The second ruleset looks for an img element with an attribute of src that
contains the string 'summer', and sets the height to 100px.
Notice how no new HTML markup (like a class or id) needed to be added, and we were
still able to modify the styles of each image independently.
Pseudo-class
You may have observed how the appearance of certain elements can change, or be in a
different state, after certain user interactions. For instance:
 When you click on an <input> element, and a blue border is added showing that
it is in focus.
 When you click on a blue <a> link to visit to another page, but when you return
the link’s text is purple.
 When you’re filling out a form and the submit button is grayed out
and disabled. But when all of the fields have been filled out, the button has color
showing that it’s active.
These are all examples of pseudo-class selectors in action! In
fact, :focus, :visited, :disabled, and :active are all pseudo-classes. Factors such as user
interaction, site navigation, and position in the document tree can all give elements a
different state with pseudo-class.
A pseudo-class can be attached to any selector. It is always written as a colon : followed

by a name. For example p:hover.
p:hover {
background-color: lime;
}
In the above code, whenever the mouse hovers over a paragraph element, that
paragraph will have a lime-colored background.
The ordering of link state pseudo-class rules is important to reveal the proper
information. When a user hovers and then clicks a link, those styles should always
override the static styling surrounding a user’s history with the link
(unvisited :link and :visited). The proper order of these rules is:
 :link
 :visited
 :hover
 :active
This ordering will ensure that the rules cascade properly and the user can receive the
most applicable visual feedback about the state of the link.
In addition to any text style changes when hovering over a link, the user’s cursor should
change from the default appearance to a pointing hand. The CSS cursor property is
used to control this behavior. For example, to add this behavior to all <a> tags, the
following rule could be used:
a{
cursor: pointer;
}
Classes and IDs
CSS can select HTML elements by their type, class, and ID. CSS classes and IDs have
different purposes, which can affect which one you use to style HTML elements.
CSS classes are meant to be reused over many elements. By writing CSS classes, you
can style elements in a variety of ways by mixing classes. For instance, imagine a page
with two headlines. One headline needs to be bold and blue, and the other needs to be
bold and green. Instead of writing separate CSS rules for each headline that repeat
each other’s code, it’s better to write a .bold CSS rule, a .green CSS rule, and a .blue CSS
rule. Then you can give one headline the bold green classes, and the other the bold
blue classes.
While classes are meant to be used many times, an ID is meant to style only one
element. As you’ll learn in the next exercise, IDs override the styles of types and classes.
Since IDs override these styles, they should be used sparingly and only on elements
that need to always appear the same.
Specificity
Specificity is the order by which the browser decides which CSS styles will be displayed.
A best practice in CSS is to style elements while using the lowest degree of specificity
so that if an element needs a new style, it is easy to override.
IDs are the most specific selector in CSS, followed by classes, and finally, type. For
example, consider the following HTML and CSS:
<h1 class='headline'>Breaking News</h1>
h1 {
color: red;
}
.headline {
color: firebrick;
}
In the example code above, the color of the heading would be set to firebrick, as the
class selector is more specific than the type selector. If an ID attribute (and selector)
were added to the code above, the styles within the ID selector’s body would override
all other styles for the heading.
Chaining
When writing CSS rules, it’s possible to require an HTML element to have two or more
CSS selectors at the same time. This is done by combining multiple selectors, which we
will refer to as chaining. For instance, if there was a special class for <h1> elements, the
CSS would look like below:
h1.special {
The code above would select only the <h1> elements with a class of special. If
a <p> element also had a class of special, the rule in the example would not style the
paragraph.
Descendant Combinator
In addition to chaining selectors to select elements, CSS also supports selecting

elements that are nested within other HTML elements, also known as descendants. For
instance, consider the following HTML:
<ul class='main-list'>
<li> ... </li>
<li> ... </li>
<li> ... </li>
</ul>
The nested <li> elements are descendants of the <ul> element and can be selected with
the descendant combinator like so:
.main-list li {
In the example above, .main-list selects the element with the.main-list class
(the <ul> element). The descendant <li>‘s are selected by adding li to the selector,
separated by a space. This results in .main-list li as the final selector.
Selecting elements in this way can make our selectors even more specific by making
sure they appear in the context we expect.
Chaining and Specificity
Consider the following CSS:
p{
color: blue;
}
.main p {
color: red;
}
Both of these CSS rules define what a <p> element should look like. Since .main p has a
class and a p type as its selector, only the <p> elements inside the .main element will
appear red. This occurs despite there being another more general rule that
states <p> elements should be blue.
Multiple Selectors
In order to make CSS more concise, it’s possible to add CSS styles to multiple CSS
selectors all at once. This prevents writing repetitive code. For instance, the following
code has repetitive style attributes:
h1 {
font-family: Georgia;
}
.menu {
}
Instead of writing font-family: Georgia twice for two selectors, we can separate the
selectors by a comma to apply the same style to both, like this:
h1,
.menu {
}
By separating the CSS selectors with a comma, both the <h1> elements and the
elements with the menu class will receive the font-family: Georgia styling.
Font Family
To change the typeface of text on your web page, you can use the font-family property.
h1 {
font-family: Garamond;
}
In the example above, the font family for all main heading elements has been set
to Garamond. When setting typefaces on a web page, keep the following points in mind:
 The font specified must be installed on the user’s computer or downloaded with
the site.
 Web safe fonts are a group of fonts supported across most browsers and
operating systems.
 Unless you are using web safe fonts, the font you choose may not appear the
same between all browsers and operating systems.
 When the name of a typeface consists of more than one word, it’s a best
practice to enclose the typeface’s name in quotes, like so:
h1 {
font-family: 'Courier New';
}
Multi-Word Values
When specifying a typeface with multiple words, like Times New Roman, it is
recommended to use quotation marks (' ') to group the words together, like so:
h1 {
font-family: 'Times New Roman';
}
Web Safe Fonts

There is a selection of fonts that will appear the same across all browsers and operating
systems. These fonts are referred to as web safe fonts. You can check out a complete list
of web safe fonts here.
Fallback Fonts and Font Stacks

Web safe fonts are good fallback fonts that can be used if your preferred font is not
available.
h1 {
font-family: Caslon, Georgia, 'Times New Roman';
}
In the example above, Georgia and Times New Roman are fallback fonts to Caslon.
When you specify a group of fonts, you have what is known as a font stack. A font stack
usually contains a list of similar-looking fonts. Here, the browser will first try to use the
Caslon font. If that’s not available, it will try to use a similar font, Georgia. And if
Georgia is not available, it will try to use Times New Roman.
Serif and Sans-Serif

You may be wondering what features make a font similar to another font. The fonts
Caslon, Georgia, and Times New Roman are Serif fonts. Serif fonts have extra details on
the ends of each letter, as opposed to Sans-Serif fonts, which do not have the extra
details.
serif and sans-serif are also keyword values that can be added as a final fallback font if
nothing else in the font stack is available.
h1 {
font-family: Caslon, Georgia, 'Times New Roman', serif;
}
In this final example, the font stack has 4 fonts. If the first 3 fonts aren’t available, the
browser will use whatever serif font is available on the system.
Web Fonts Using <link>
Online font services, like Google Fonts, make it easy to find and link to fonts from your
site. You can browse and select fonts that match the style of your website.
When you select a font in Google Fonts, you’ll be shown all of the different styles
available for that particular font. You can then select the styles you want to use on your
site.
When you’re done selecting a font and its styles, you can review your selected font
family, and a <link> element will be automatically generated for you to use on your site!
<head>

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap"
rel="stylesheet">
</head>
The generated <link> element needs to be added to the <head> element in your HTML
document for it to be ready to be used in your CSS.
p{
font-family: 'Roboto', sans-serif;
}
You can then create font-family declarations in your CSS, just like how you learned to do
with other fonts!
Web Fonts Using @font-face
Fonts can also be added using a @font-face ruleset in your CSS stylesheet instead of
using a <link> element in your HTML document. As mentioned earlier, fonts can be
downloaded just like any other file on the web. They come in a few different file
formats, such as:
 OTF (OpenType Font)
 TTF (TrueType Font)
 WOFF (Web Open Font Format)
 WOFF2 (Web Open Font Format 2)
The different formats are a progression of standards for how fonts will work with
different browsers, with WOFF2 being the most progressive. It’s a good idea to include
TTF, WOFF, and WOFF2 formats with your @font-face rule to ensure compatibility on all
browsers.
Let’s take a look at how to use @font-face using the same Roboto font as before:
Within the “Selected Families” section, you can use the “Download” button to download
the font files to your computer. The files will be downloaded in a single format, in this
case, TTF. You can use additional tools to generate additional file types for WOFF and
WOFF2, check out MDN’s list of font generators for more information.
When you have the files you need, move them to a folder inside your website’s working
directory, and you’re ready to use them in a @font-face ruleset!
@font-face {
font-family: 'MyParagraphFont';
src: url('fonts/Roboto.woff2') format('woff2'),
url('fonts/Roboto.woff') format('woff'),
url('fonts/Roboto.ttf') format('truetype');
}
Let’s take a look at the example above, line by line:
 The @font-face at-rule is used as the selector. It’s recommended to define

the @font-face ruleset at the top of your CSS stylesheet.
 Inside the declaration block, the font-family property is used to set a custom
name for the downloaded font. The name can be anything you choose, but it
must be surrounded by quotation marks. In the example, the font is
named 'MyParagraphFont', as this font will be used for all paragraphs.
 The src property contains three values, each specifying the relative path to the
font file and its format. In this example, the font files are stored inside a folder
named fonts within the working directory.
 Note that the ordering for the different formats is important because our
browser will start from the top of the list and search until it finds a font format
that it supports. Read more on format prioritization on CSS-Tricks.
Once the @font-face at-rule is defined, you can use the font in your stylesheet!
p{
font-family: 'MyParagraphFont', sans-serif;
}
Like using any other fonts, you can use the font-family property to set the font on any
HTML element. The downloaded font can be referenced with the name you provided as
the font-family property’s value in the @font-face ruleset—in this case, 'MyParagraphFont'.
Font Size
To change the size of text on your web page, you can use the font-size property.
p{
font-size: 18px;
}
In the example above, the font-size of all paragraphs was set to 18px. px means pixels,
which is one way to measure font size.
Font Weight
In CSS, the font-weight property controls how bold or thin text appears.
p{
font-weight: bold;
}
In the example above, all paragraphs on the web page would appear bolded.
The font-weight property has another value: normal. If we wanted all text on a web page
to appear bolded, we could select all text elements and change their font weight
to bold. If a certain section of text was required to appear normal, however, we could
set the font weight of that particular element to normal, essentially shutting off bold for
that element.
Keyword Values
The font-weight property can take any one of these keyword values:
 bold: Bold font weight.
 normal: Normal font weight. This is the default value.
 lighter: One font weight lighter than the element’s parent value.
 bolder: One font weight bolder than the element’s parent value
Numerical Values
Numerical values can range from 1 (lightest) to 1000 (boldest), but it is common
practice to use increments of 100. A font weight of 400 is equal to the keyword
value normal, and a font weight of 700 is equal to bold.
.left-section {
font-weight: 700;
}
.right-section {
font-weight: bold;
}
In the example above, text in elements of both .left-section and .right-section classes will
appear bold.
It’s important to note that not all fonts can be assigned a numeric font weight, and not
all numeric font weights are available to all fonts.
Text Align
To align text we can use the text-align property. The text-align property will align text to
the element that holds it, otherwise known as its parent.
h1 {
text-align: right;
}
The text-align property can be set to one of the following commonly used values:
 left — aligns text to the left side of its parent element, which in this case is the
browser.
 center — centers text inside of its parent element.
 right — aligns text to the right side of its parent element.
 justify— spaces out text in order to align with the right and left side of the
parent element.
Font Style
You can also italicize text with the font-style property.
h3 {
font-style: italic;
}
The italic value causes text to appear in italics. The font-style property also has
a normal value which is the default.
Text Transformation
Text can also be styled to appear in either all uppercase or lowercase with the text-
transform property.
h1 {
text-transform: uppercase;
}
The code in the example above formats all <h1> elements to appear in uppercase,
regardless of the case used for the heading within the HTML code. Alternatively,
the lowercase value could be used to format text in all lowercase.
Since text can be directly typed in all uppercase or lowercase within an HTML file, what
is the point of a CSS rule that allows you to format letter case?
Depending on the type of content a web page displays, it may make sense to always
style a specific element in all uppercase or lowercase letters. For example, a website
that reports breaking news may decide to format all <h1> heading elements such that
they always appear in all uppercase, as in the example above. It would also avoid
uppercase text in the HTML file, which could make code difficult to read.
Text Layout
Letter Spacing
The letter-spacing property is used to set the horizontal spacing between the individual
characters in an element. It’s not common to set the spacing between letters, but it can
sometimes help the readability of certain fonts or styles. The letter-spacing property
takes length values in units, such as 2px or 0.5em.
p{
letter-spacing: 2px;
}
In the example above, each character in the paragraph element will be separated by 2
pixels.
Word Spacing
You can set the space between words with the word-spacing property. It’s also not
common to increase the spacing between words, but it may help enhance the
readability of bolded or enlarged text. The word-spacing property also takes length
values in units, such as 3px or 0.2em.
h1 {
word-spacing: 0.3em;
}
In the example above, the word spacing is set to 0.3em. For word spacing,
using em values are recommended because the spacing can be set based on the size of
the font.
Line Height
We can use the line-height property to set how tall we want each line containing our
text to be. Line height values can be a unitless number, such as 1.2, or a length value,
such as 12px, 5% or 2em.
p{
line-height: 1.4;
}
In the example above, the height between lines is set to 1.4. Generally, the unitless
value is preferred since it is responsive based on the current font size. In other words, if
the line-height is specified by a unitless number, changing the font size will
automatically readjust the line height.
Color and Background Color
In CSS, these two design aspects can be styled with the following two properties:
 color: this property styles an element’s foreground color
 background-color: this property styles an element’s background color
h1 {
color: red;
background-color: blue;
}
In the example above, the text of the heading will appear in red, and the background of
the heading will appear blue.
Hexadecimal
One syntax that we can use to specify colors is called hexadecimal. Colors specified
using this system are called hex colors. A hex color begins with a hash character (#)
which is followed by three or six characters. The characters represent values for red,
blue and green.
darkseagreen: #8FBC8F
sienna: #A0522D
saddlebrown: #8B4513
brown: #A52A2A
black: #000000 or #000
white: #FFFFFF or #FFF
aqua: #00FFFF or #0FF
In the example above, you may notice that there are both letters and numbers in the
values. This is because the hexadecimal number system has 16 digits (0-15) instead of
10 (0-9) like in the standard decimal system. To represent 10-15, we use A-F. Here is a
list of many different colors and their hex values.
RGB Colors
There is another syntax for representing RGB values, commonly referred to as “RGB
value” or just “RGB”, that uses decimal numbers rather than hexadecimal numbers, and
it looks like this:
h1 {
color: rgb(23, 45, 23);
}
Each of the three values represents a color component, and each can have a decimal
number value from 0 to 255. The first number represents the amount of red, the second
is green, and the third is blue. These colors are exactly the same as hex, but with a
different syntax and a different number system.
Hue, Saturation, and Lightness
The RGB color scheme is convenient because it’s very close to how computers
represent colors internally. There’s another equally powerful system in CSS called the
hue-saturation-lightness color scheme, abbreviated as HSL.
The syntax for HSL is similar to the decimal form of RGB, though it differs in important
ways. The first number represents the degree of the hue, and can be between 0 and
360. The second and third numbers are percentages representing saturation and
lightness respectively. Here is an example:
color: hsl(120, 60%, 70%);
Hue is the first number. It refers to an angle on a color wheel. Red is 0 degrees, Green is
120 degrees, Blue is 240 degrees, and then back to Red at 360.
Saturation refers to the intensity or purity of the color. The saturation increases towards
100% as the color becomes richer. The saturation decreases towards 0% as the color
becomes grayer.
Lightness refers to how light or dark the color is. Halfway, or 50%, is normal lightness.
Imagine a sliding dimmer on a light switch that starts halfway. Sliding the dimmer up
towards 100% makes the color lighter, closer to white. Sliding the dimmer down
towards 0% makes the color darker, closer to black.
Opacity
Opacity is the measure of how transparent an element is. It’s measured from 0 to 1,
with 1 representing 100%, or fully visible and opaque, and 0 representing 0%, or fully
invisible. Opacity can be used to make elements fade into others for a nice overlay
effect. To adjust the opacity of an element, the syntax looks like this:
.overlay {
opacity: 0.5;
}
In the example above, the .overlay element would be 50% visible, letting whatever is
positioned behind it show through.
Opacity and Alpha
To use opacity in the HSL color scheme, use hsla instead of hsl, and four values instead
of three. For example:
color: hsla(34, 100%, 50%, 0.1);
The first three values work the same as hsl. The fourth value (which we have not seen
before) is the alpha. This last value is sometimes called opacity.
Alpha is a decimal number from zero to one. If alpha is zero, the color will be
completely transparent. If alpha is one, the color will be opaque. The value for half-
transparent would be 0.5.
You can think of the alpha value as, “the amount of the background to mix with the
foreground”. When a color’s alpha is below one, any color behind it will be blended in.
The blending happens for each pixel; no blurring occurs.
The RGB color scheme has a similar syntax for opacity, rgba. Again, the first three values
work the same as rgb and the last value is the alpha. Here’s an example:
color: rgba(234, 45, 98, 0.33);
A little unconventional, but still worth mentioning is how hex colors can also have an
alpha value. By adding a two-digit hexadecimal value to the end of the six-digit
representation (#52BC8280), or a one-digit hexadecimal value to the end of the three-
digit representation (#F003), you can change the opacity of a hexadecimal color. Hex
opacity ranges from 00 (transparent) to FF (opaque).
Alpha can only be used with HSL, RGB, and hex colors; we cannot add the alpha value
to name colors like green.
There is, however, a named color keyword for zero opacity, transparent. It’s equivalent
to rgba(0, 0, 0, 0), and it’s used like any other color keyword:
color: transparent;
Background Image
CSS has the ability to change the background of an element. One option is to make the
background of an element an image. This is done through the CSS property background-
image. Its syntax looks like this:
.main-banner {
background-image: url('https://www.example.com/image.jpg');
}
1. The background-image property will set the element’s background to display an

image.
2. The value provided to background-image is a url. The url should be a URL to an

image. The url can be a file within your project, or it can be a link to an external
site. To link to an image inside an existing project, you must provide a relative
file path. If there was an image folder in the project, with an image
named mountains.jpg, the relative file path would look like below:
.main-banner {
background-image: url('images/mountains.jpg');
}
Important
!important can be applied to specific declarations, instead of full rules. It will

override any style no matter how specific it is. As a result, it should almost never be
used. Once !important is used, it is very hard to override.
p{
color: blue !important;
}
.main p {
color: red;
}
Since !important is used on the p selector’s color attribute, all p elements will appear blue,
even though there is a more specific .main p selector that sets the color attribute to red.
One justification for using !important is when working with multiple stylesheets. For
example, if we are using the Bootstrap CSS framework and want to override the styles
for one specific HTML element, we can use the !important property.
The Box Model
The box model comprises the set of properties that define parts of an element that take
up space on a web page. The model includes the content area’s size (width and height)
and the element’s padding, border, and margin. The properties include:
1. width and height: The width and height of the content area.
2. padding: The amount of space between the content area and the border.
3. border: The thickness and style of the border surrounding the content area and
padding.
4. margin: The amount of space between the border and the outside edge of the
element.
Height and Width
An element’s content has two dimensions: a height and a width. By default, the
dimensions of an HTML box are set to hold the raw contents of the box.
The CSS height and width properties can be used to modify these default dimensions.
p{
height: 80px;
width: 240px;
}
In this example, the height and width of paragraph elements are set to 80 pixels and 240
pixels, respectively — the px in the code above stands for pixels.
Pixels allow you to set the exact size of an element’s box (width and height). When the
width and height of an element are set in pixels, it will be the same size on all devices
— an element that fills a laptop screen will overflow a mobile screen.
Borders
A border is a line that surrounds an element, like a frame around a painting. Borders
can be set with a specific width, style, and color:
 width—The thickness of the border. A border’s thickness can be set in pixels or

with one of the following keywords: thin, medium, or thick.
 style—The design of the border. Web browsers can render any of 10 different
styles. Some of these styles include: none, dotted, and solid.
 color—The color of the border. Web browsers can render colors using a few
different formats, including 140 built-in color keywords.
p{
border: 3px solid coral;
}
In the example above, the border has a width of 3 pixels, a style of solid, and a color
of coral. All three properties are set in one line of code.
The default border is medium none color, where color is the current color of the element.
If width, style, or color are not set in the CSS file, the web browser assigns the default
value for that property.
p.content-header {
height: 80px;
width: 240px;
border: solid coral;
}
In this example, the border style is set to solid and the color is set to coral. The width is
not set, so it defaults to medium.
Border Radius
You can modify the corners of an element’s border box with the border-radius property.
div.container {
border: 3px solid blue;
border-radius: 5px;
}
You can create a border that is a perfect circle by first creating an element with the
same width and height, and then setting the radius equal to half the width of the box,
which is 50%.
div.container {
height: 60px;
width: 60px;
border: 3px solid blue;
border-radius: 50%;
}
The code in the example above creates a <div> that is a perfect circle.
Padding
The space between the contents of a box and the borders of a box is known
as padding. Padding is like the space between a picture and the frame surrounding it. In
CSS, you can modify this space with the padding property.
p.content-header {
border: 3px solid coral;
padding: 10px;
}
The code in this example puts 10 pixels of space between the content of the paragraph
(the text) and the borders, on all four sides.
The padding property is often used to expand the background color and make the
content look less cramped.
If you want to be more specific about the amount of padding on each side of a box’s
content, you can use the following properties:
 padding-top
 padding-right
 padding-bottom
 padding-left
p.content-header {
border: 3px solid fuchsia;
padding-bottom: 10px;
}
In the example above, only the bottom side of the paragraph’s content will have
a padding of 10 pixels.
Padding Shorthand
Another implementation of the padding property lets you specify exactly how much
padding there should be on each side of the content in a single declaration. A
declaration that uses multiple properties as values is known as a shorthand property.
Padding shorthand lets you specify all of the padding properties as values on a single
line:
 padding-top
 padding-right
 padding-bottom
 padding-left
You can specify these properties in a few different ways:
4 Values
p.content-header {
padding: 6px 11px 4px 9px;
}
In the example above, the four values 6px 11px 4px 9px correspond to the amount of
padding on each side, in a clockwise rotation. In order, it specifies the padding-top
value (6px), the padding-right value (11px), the padding-bottom value (4px), and the
padding-left value (9px) of the content.
3 Values
p.content-header {
padding: 5px 10px 20px;
}
If the left and right sides of the content can be equal, the padding shorthand property
allows for 3 values to be specified. The first value sets the padding-top value (5px), the
second value sets the padding-left and padding-right values (10px), and the third value
sets the padding-bottom value (20px).
2 Values
p.content-header {
padding: 5px 10px;
}
And finally, if the top and bottom sides can be equal, and the left and right sides can be
equal, you can specify 2 values. The first value sets the padding-top and padding-
bottom values (5px), and the second value sets the padding-left and padding-right
values (10px).
Margin
Margin refers to the space directly outside of the box. The margin property is used to
specify the size of this space.
p{
border: 1px solid aquamarine;
margin: 20px;
}
The code in the example above will place 20 pixels of space on the outside of the
paragraph’s box on all four sides. This means that other HTML elements on the page
cannot come within 20 pixels of the paragraph’s border.
If you want to be even more specific about the amount of margin on each side of a
box, you can use the following properties:
 margin-top
 margin-right
 margin-bottom
 margin-left
Each property affects the margin on only one side of the box, providing more flexibility
in customization.
p{
border: 3px solid DarkSlateGrey;
margin-right: 15px;
}
In the example above, only the right side of the paragraph’s box will have a margin of
15 pixels. It’s common to see margin values used for a specific side of an element.
Margin Shorthand
What if you don’t want equal margins on all four sides of the box and don’t have time
to separate properties for each side? You’re in luck! Margin can be written as a
shorthand property as well. The shorthand syntax for margins is the same as padding,
so if you’re feeling comfortable with that, skip to the instructions. Otherwise, read on to
learn how to use margin shorthand!
Similar to padding shorthand, margin shorthand lets you specify all of

the margin properties as values on a single line:
 margin-top
 margin-right
 margin-bottom
 margin-left
You can specify these properties in a few different ways:
4 Values
p{
margin: 6px 10px 5px 12px;
}
In the example above, the four values 6px 10px 5px 12px correspond to the thickness of
the margin on each side, in a clockwise rotation. In order, it specifies the margin-top
value (6px), the margin-right value (10px), the margin-bottom value (5px), and the
margin-left value (12px) of the content.
3 Values
p{
margin: 5px 12px 4px;
}
If the left and right sides of the content can be equal, the margin shorthand property
allows for 3 values to be specified. The first value sets the margin-top value (5px), the
second value sets the margin-left and margin-right values (12px), and the third value
sets the margin-bottom value (4px).
2 Values
p{
margin: 20px 10px;
}
And finally, if the top and bottom sides can be equal, and the left and right sides can be
equal, you can specify 2 values. The first value sets the margin-top and margin-bottom
values (20px), and the second value sets the margin-left and margin-right values (10px).
Auto
The margin property also lets you center content. However, you must follow a few
syntax requirements. Take a look at the following example:
div.headline {
width: 400px;
margin: 0 auto;
}
In the example above, margin: 0 auto; will center the divs in their containing elements.
The 0 sets the top and bottom margins to 0 pixels. The auto value instructs the browser
to adjust the left and right margins until the element is centered within its containing
element.
In order to center an element, a width must be set for that element. Otherwise, the
width of the div will be automatically set to the full width of its containing element, like
the <body>, for example. It’s not possible to center an element that takes up the full
width of the page, since the width of the page can change due to display and/or
browser window size.
In the example above, the width of the div is set to 400 pixels, which is less than the
width of most screens. This will cause the div to center within a containing element that
is greater than 400 pixels wide.
Margin Collapse
As you have seen, padding is space added inside an element’s border, while margin is
space added outside an element’s border. One additional difference is that top and
bottom margins, also called vertical margins, collapse, while top and bottom padding
does not.
Horizontal margins (left and right), like padding, are always displayed and added
together. For example, if two divs with ids #div-one and #div-two, are next to each other,
they will be as far apart as the sum of their adjacent margins.
#img-one {
margin-right: 20px;
}
#img-two {
margin-left: 20px;
}
In this example, the space between the #img-one and #img-two borders is 40 pixels. The
right margin of #img-one (20px) and the left margin of #img-two (20px) add to make a
total margin of 40 pixels.
Unlike horizontal margins, vertical margins do not add. Instead, the larger of the two
vertical margins sets the distance between adjacent elements.
#img-one {
margin-bottom: 30px;
}
#img-two {
margin-top: 20px;
}
In this example, the vertical margin between the #img-one and #img-two elements is 30
pixels. Although the sum of the margins is 50 pixels, the margin collapses so the
spacing is only dependent on the #img-one bottom margin.
Overflow
All of the components of the box model comprise an element’s size. For example, an
image that has the following dimensions is 364 pixels wide and 244 pixels tall.
 300 pixels wide
 200 pixels tall
 10 pixels padding on the left and right
 10 pixels padding on the top and bottom

 2 pixels border on the left and right
 2 pixels border on the top and bottom
 20 pixels margin on the left and right
 10 pixels margin on the top and bottom
The total dimensions (364px by 244px) are calculated by adding all of the vertical
dimensions together and all of the horizontal dimensions together. Sometimes, these
components result in an element that is larger than the parent’s containing area.
How can we ensure that we can view all of an element that is larger than its parent’s
containing area?
The overflow property controls what happens to content that spills, or overflows,
outside its box. The most commonly used values are:
 hidden—when set to this value, any content that overflows will be hidden from
view.
 scroll—when set to this value, a scrollbar will be added to the element’s box so
that the rest of the content can be viewed by scrolling.
 visible—when set to this value, the overflow content will be displayed outside of
the containing element. Note, this is the default value.
p{
overflow: scroll;
}
In the example above, if any of the paragraph content overflows (perhaps a user resizes
their browser window), a scrollbar will appear so that users can view the rest of the
content.
The overflow property is set on a parent element to instruct a web browser on how to
render child elements. For example, if a div’s overflow property is set to scroll, all
children of this div will display overflowing content with a scroll bar.
For a more in-depth look at overflow, including additional properties like overflow-
x and overflow-y that separate out the horizontal and vertical values, head over to the
MDN documentation.
Resetting Defaults
All major web browsers have a default stylesheet they use in the absence of an external
stylesheet. These default stylesheets are known as user agent stylesheets. In this case,
the term user agent is a technical term for the browser.
User agent stylesheets often have default CSS rules that set default values for padding
and margin. This affects how the browser displays HTML elements, which can make it
difficult for a developer to design or style a web page.
Many developers choose to reset these default values so that they can truly work with a
clean slate.
*{
margin: 0;
padding: 0;
}
The code in the example above resets the default margin and padding values of all
HTML elements. It is often the first CSS rule in an external stylesheet.
Note that both properties are set to 0. When these properties are set to 0, they do not
require a unit of measurement.
Visibility
Elements can be hidden from view with the visibility property.
The visibility property can be set to one of the following values:
 hidden — hides an element.
 visible — displays an element.
 collapse — collapses an element.
<ul>
<li>Explore</li>
<li>Connect</li>
<li class="future">Donate</li>
</ul>
.future {
visibility: hidden;
}
In the example above, the list item with a class of future will be hidden from view in the
browser.
Keep in mind, however, that users can still view the contents of the list item
(e.g., Donate) by viewing the source code in their browser. Furthermore, the web page
will only hide the contents of the element. It will still leave an empty space where the
element is intended to display.
Note: What’s the difference between display: none and visibility: hidden? An element
with display: none will be completely removed from the web page. An element
with visibility: hidden, however, will not be visible on the web page, but the space
reserved for it will.
Why Change the Box Model?
The box model has an awkward limitation regarding box dimensions. This limitation is
best illustrated with an example.
<h1>Hello World</h1>
h1 {
border: 1px solid black;
height: 200px;
width: 300px;
padding: 10px;
}
In the example above, a heading element’s box has solid, black, 1 pixel thick borders.
The height of the box is 200 pixels, while the width of the box is 300 pixels. A padding
of 10 pixels has also been set on all four sides of the box’s content.
Unfortunately, under the current box model, the border thickness and the padding will
affect the dimensions of the box.
The 10 pixels of padding increases the height of the box to 220 pixels and the width to
320 pixels. Next, the 1-pixel thick border increases the height to 222 pixels and the
width to 322 pixels.
Under this box model, the border thickness and padding are added to the overall
dimensions of the box. This makes it difficult to accurately size a box. Over time, this
can also make all of a web page’s content difficult to position and manage.
Box Model: Content-Box
Many properties in CSS have a default value and don’t have to be explicitly set in the
stylesheet. For example, the default font-weight of text is normal, but this property-value
pair is not typically specified in a stylesheet.
The same can be said about the box model that browsers assume. In CSS, the box-
sizing property controls the type of box model the browser should use when
interpreting a web page.
The default value of this property is content-box. This is the same box model that is
affected by border thickness and padding.
Study the diagram to the right. It illustrates the default box model used by the
browser, content-box.
Box Model: Border-Box
Fortunately, we can reset the entire box model and specify a new one: border-box.
*{
box-sizing: border-box;
}
The code in the example above resets the box model to border-box for all HTML
elements. This new box model avoids the dimensional issues that exist in the former
box model you learned about.
In this box model, the height and width of the box will remain fixed. The border
thickness and padding will be included inside of the box, which means the overall
dimensions of the box do not change.
<h1>Hello World</h1>
*{
box-sizing: border-box;
}
h1 {
border: 1px dashed #4f768e;
height: 150px;
width: 200px;
padding: 20px;
}
In the example above, the height of the box would remain at 150 pixels and the width
would remain at 200 pixels. The border thickness and padding would remain
entirely inside of the box.
Position
Take a look at the block-level elements in the image below:

Block-level elements like these boxes create a block the full width of their parent
elements, and they prevent other elements from appearing in the same horizontal
space. Notice the block-level elements in the image above take up their own line of
space and therefore don’t overlap each other. This is the default position for block-level
elements.
The default position of an element can be changed by setting its position property.
The position property can take one of five values:
 static - the default value (it does not need to be specified)
 relative
 absolute
 fixed
 sticky
It’s important to understand that if you favor the default position of an HTML element,
you don’t need to set its position property.
Position: Relative
One way to modify the default position of an element is by setting its position property
to relative. This value allows you to position an element relative to its default static
position on the web page.
.green-box {
background-color: green;
position: relative;
}
Although the code in the example above instructs the browser to expect a relative
positioning of the .green-box element, it does not specify where the .green-box element
should be positioned on the page. This is done by accompanying
the position declaration with one or more of the following offset properties that will
move the element away from its default static position:
 top - moves the element down from the top.
 bottom - moves the element up from the bottom.
 left - moves the element away from the left side (to the right).
 right - moves the element away from the right side (to the left).
You can specify values in pixels, ems, or percentages, among others, to dial in exactly
how far you need the element to move. It’s also important to note that offset
properties will not work if the element’s position property is the default static.
.green-box {
position: relative;
top: 50px;
left: 120px;
}
In the example above, the element of green-box class will be moved down 50 pixels, and
to the right 120 pixels, from its default static position. The image below displays the
new position of the box.
Position: Absolute
Another way of modifying the position of an element is by setting its position

to absolute.
When an element’s position is set to absolute, all other elements on the page will ignore
the element and act like it is not present on the page. The element will be positioned
relative to its closest positioned parent element, while offset properties can be used to
determine the final position from there. Take a look at the image below:
The “This website is in progress. Please come back later!” text is displaced from its static
position at the top left corner of its parent container. It has offset property declarations
of top: 300px; and right: 0px;, positioning it 300 pixels down, and 0 pixels from the right
side of the page.
Position: Fixed
When an element’s position is set to absolute, as in the last exercise, the element will
scroll with the rest of the document when a user scrolls.
We can fix an element to a specific position on the page (regardless of user scrolling)
by setting its position to fixed, and accompanying it with the familiar offset
properties top, bottom, left, and right.
.title {
position: fixed;
top: 0px;
left: 0px;
}
In the example above, the .title element will remain fixed to its position no matter
where the user scrolls on the page, like in the image below:
This technique is often used for navigation bars on a web page.
Position: Sticky
Since static and relative positioned elements stay in the normal flow of the document,
when a user scrolls the page (or parent element) these elements will scroll too. And
since fixed and absolute positioned elements are removed from the document flow,
when a user scrolls, these elements will stay at their specified offset position.
The sticky value is another position value that keeps an element in the document flow
as the user scrolls, but sticks to a specified position as the page is scrolled further. This
is done by using the sticky value along with the familiar offset properties, as well as one
new one.
.box-bottom {
background-color: darkgreen;
position: sticky;
top: 240px;
}
In the example above, the .box-bottom <div> will remain in its relative position, and
scroll as usual. When it reaches 240 pixels from the top, it will stick to that position until
it reaches the bottom of its parent container where it will “unstick” and rejoin the flow
of the document.
Z-Index
When boxes on a web page have a combination of different positions, the boxes (and
therefore, their content) can overlap with each other, making the content difficult to
read or consume.
.blue-box {
}
.green-box {
position: relative;
top: -170px;
left: 170px;
}
In the example above, the .green-box element overlaps on top of the .blue-box element.
The z-index property controls how far back or how far forward an element should
appear on the web page when elements overlap. This can be thought of as the depth of
elements, with deeper elements appearing behind shallower elements.
The z-index property accepts integer values. Depending on their values, the integers
instruct the browser on the order in which elements should be layered on the web
page.
.blue-box {
position: relative;
z-index: 1;
}
.green-box {
position: relative;
top: -170px;
left: 170px;
}
In the example above, we set the .blue-box position to relative and the z-index to 1. We
changed position to relative, because the z-index property does not work on static
elements. The z-index of 1 moves the .blue-box element forward, because the z-
index value has not been explicitly specified for the .green-box element, which means it
has a default z-index value of 0. Take a look at the example image below:
Inline Display
Every HTML element has a default display value that dictates if it can share horizontal
space with other elements. Some elements fill the entire browser from left to right
regardless of the size of their content. Other elements only take up as much horizontal
space as their content requires and can be directly next to other elements.
In this lesson, we’ll cover three values for the display property: inline, block, and inline-
block.
The default display for some elements, such as <em>, <strong>, and <a>, is called inline.
Inline elements have a box that wraps tightly around their content, only taking up the
amount of space necessary to display their content and not requiring a new line after
each element. The height and width of these elements cannot be specified in the CSS
document. For example, the text of an anchor tag (<a>) will, by default, be displayed on
the same line as the surrounding text, and it will only be as wide as necessary to
contain its content. inline elements cannot be altered in size with the height or width CSS
properties.
To learn more about <em>inline</em> elements, read <a href="#">MDN documentation</a>.
In the example above, the <em> element is inline, because it displays its content on the
same line as the content surrounding it, including the anchor tag. This example will
display:
To learn more about inline elements, read MDN documentation.
The CSS display property provides the ability to make any element an inline element.
This includes elements that are not inline by default such as paragraphs, divs, and
headings.
h1 {
display: inline;
}
The CSS in the example above will change the display of all <h1> elements to inline. The
browser will render <h1> elements on the same line as other inline elements
immediately before or after them (if there are any).
Display: Block
Some elements are not displayed in the same line as the content around them. These
are called block-level elements. These elements fill the entire width of the page by
default, but their width property can also be set. Unless otherwise specified, they are the
height necessary to accommodate their content.
Elements that are block-level by default include all levels of heading elements
(<h1> through <h6>), <p>, <div> and <footer>. For a complete list of block level
elements, visit the MDN documentation.
strong {
display: block;
}
In the example above, all <strong> elements will be displayed on their own line, with no
content directly on either side of them even though their contents may not fill the
width of most computer screens.
Display: Inline-Block
The third value for the display property is inline-block. Inline-block display combines
features of both inline and block elements. Inline-block elements can appear next to
each other and we can specify their dimensions using the width and height properties.
Images are the best example of default inline-block elements.
For example, the <div>s below will be displayed on the same line and with the specified
dimensions:
Let’s take a look at the code:
<div class="rectangle">
<p>I’m a rectangle!</p>
</div>
<p>So am I!</p>
</div>
<p>Me three!</p>
</div>
.rectangle {
display: inline-block;
width: 200px;
height: 300px;
}
There are three rectangular divs that each contain a paragraph of text.
The .rectangle <div>s will all appear inline (provided there is enough space from left to
right) with a width of 200 pixels and height of 300 pixels, even though the text inside of
them may not require 200 pixels by 300 pixels of space.
Float
So far, you’ve learned how to specify the exact position of an element using offset
properties. If you’re simply interested in moving an element as far left or as far right as
possible in the container, you can use the float property.
The float property is commonly used for wrapping text around an image. Note,
however, that moving elements left or right for layout purposes is better suited for
tools like CSS grid and flexbox, which you’ll learn about later on.
The float property is often set using one of the values below:
 left - moves, or floats, elements as far left as possible.
 right - moves elements as far right as possible.
.green-section {
width: 50%;
height: 150px;
}
.orange-section {
background-color: orange;
width: 50%;
float: right;
}
In the example above, we float the .orange-section element to the right. This works for
static and relative positioned elements. See the result of the code below:
Floated elements must have a width specified, as in the example above. Otherwise, the
element will assume the full width of its containing element, and changing the float
value will not yield any visible results.
Clear
The float property can also be used to float multiple elements at once. However, when
multiple floated elements have different heights, it can affect their layout on the page.
Specifically, elements can “bump” into each other and not allow other elements to
properly move to the left or right.
The clear property specifies how elements should behave when they bump into each
other on the page. It can take on one of the following values:
 left—the left side of the element will not touch any other element within the
same containing element.
 right—the right side of the element will not touch any other element within the
same containing element.
 both—neither side of the element will touch any other element within the same
containing element.
 none—the element can touch either side.
div {
width: 200px;
float: left;
}
div.special {
clear: left;
}
In the example above, all <div>s on the page are floated to the left side. The element
with class special did not move all the way to the left because a taller <div> blocked its
positioning. By setting its clear property to left, the special <div> will be moved all the
way to the left side of the page.
What is Flexbox?
There are two important components to a flexbox layout: flex containers and flex items.
A flex container is an element on a page that contains flex items. All direct child
elements of a flex container are flex items. This distinction is important because some
of the properties you will learn in this lesson apply to flex containers while others apply
to flex items.
To designate an element as a flex container, set the element’s display property

to flex or inline-flex. Once an item is a flex container, there are several properties we can
use to specify how its children behave. In this lesson we will cover these properties:
1. justify-content
2. align-items
3. flex-grow
4. flex-shrink
5. flex-basis
6. flex
7. flex-wrap
8. align-content
9. flex-direction
10. flex-flow
Flexbox is an elegant tool that makes it easy to address positioning issues that may
have been difficult before.
display: flex
Any element can be a flex container. Flex containers are helpful tools for creating
websites that respond to changes in screen sizes. Child elements of flex containers will
change size and location in response to the size and position of their parent container.
For an element to become a flex container, its display property must be set to flex.
div.container {
display: flex;
}
In the example above, all divs with the class container are flex containers. If they have
children, the children are flex items. A div with the declaration display: flex; will remain
block level — no other elements will appear on the same line as it.
However, it will change the behavior of its child elements. Child elements will not begin
on new lines. In the exercises that follow, we will cover how the flex display property
impacts the positioning of child elements.
inline-flex
In the previous exercise, you might have observed that when we gave a div — a block
level element — the display value of flex that it remained a block level element. What if
we want multiple flex containers to display inline with each other?
If we didn’t want div elements to be block-level elements, we would use display: inline.
Flexbox, however, provides the inline-flex value for the display property, which allows us
to create flex containers that are also inline elements.
<div class='container'>
<p>I’m inside of a flex container!</p>
<p>A flex container’s children are flex items!</p>
</div>
<p>I’m also a flex item!</p>
<p>Me too!</p>
</div>
.container {
width: 200px;
height: 200px;
display: inline-flex;
}
In the example above, there are two container divs. Without a width, each div would
stretch the entire width of the page. The paragraphs within each div would also display
on top of each other because paragraphs are block-level elements.
When we change the value of the display property to inline-flex, the divs will display
inline with each other if the page is wide enough. As we progress through this lesson,
we will cover in more detail how flex items are displayed.
Notice that in the example above, the size of the flex container is set. Currently, the size
of the parent container will override the size of its child elements. If the parent element
is too small, the flex items will shrink to accommodate the parent container’s size.
<div class='child'>
<h1>1</h1>
</div>
<div class='child'>
<h1>2</h1>
</div>
</div>
.container {
width: 200px;
}
.child {
width: 150px;
height: auto;
}
In the example above, the .child divs will take up more width (300 pixels) than
the container div allows (200 pixels). The .child divs will shrink to accommodate the
container’s size.
justify-content
In previous exercises, when we changed the display value of parent containers

to flex or inline-flex, all of the child elements (flex items) moved toward the upper left
corner of the parent container. This is the default behavior of flex containers and their
children. We can specify how flex items spread out from left to right, along the main
axis. We will learn more about axes in a later exercise.
To position the items from left to right, we use a property called justify-content.
.container {
display: flex;
justify-content: flex-end;
}
In the example above, we set the value of justify-content to flex-end. This will cause all of
the flex items to shift to the right side of the flex container.
Below are five commonly used values for the justify-content property:
 flex-start — all items will be positioned in order, starting from the left of the
parent container, with no extra space between or before them.
 flex-end — all items will be positioned in order, with the last item starting on the
right side of the parent container, with no extra space between or after them.
 center — all items will be positioned in order, in the center of the parent
container with no extra space before, between, or after them.
 space-around — items will be positioned with equal space before and after each
item, resulting in double the space between elements.
 space-between — items will be positioned with equal space between them, but
no extra space before the first or after the last elements.
In the definitions above, “no extra space” means that margins and borders will be
respected, but no more space (than is specified in the style rule for the particular
element) will be added between elements. The size of each individual flex item is not
changed by this property.
align-items
In the previous exercise, you learned how to justify the content of a flex container from
left to right across the page. It is also possible to align flex items vertically within the
container. The align-items property makes it possible to space flex items vertically.
.container {
align-items: baseline;
}
In the example above, the align-items property is set to baseline. This means that the
baseline of the content of each item will be aligned.
Below are five commonly used values for the align-items property:
 flex-start — all elements will be positioned at the top of the parent container.
 flex-end — all elements will be positioned at the bottom of the parent container.
 center — the center of all elements will be positioned halfway between the top
and bottom of the parent container.
 baseline — the bottom of the content of all items will be aligned with each
other.
 stretch — if possible, the items will stretch from top to bottom of the container
(this is the default value; elements with a specified height will not stretch;
elements with a minimum height or no height specified will stretch).
These five values tell the elements how to behave along the cross axis of the parent
container. In these examples, the cross axis stretches from top to bottom of the
container.
You might be unfamiliar with the min-height and max-height properties, but you have
used height and width before. min-height, max-height, min-width, and max-width are
properties that ensure an element is at least a certain size or at most a certain size.
flex-grow
In Exercise 3, we learned that all flex items shrink proportionally when the flex container
is too small. However, if the parent container is larger than necessary then the flex
items will not stretch by default. The flex-grow property allows us to specify if items
should grow to fill a container and also which items should grow proportionally more
or less than others.
<div class='side'>
<h1>I’m on the side of the flex container!</h1>
</div>
<div class='center'>
<h1>I'm in the center of the flex container!</h1>
</div>
<div class='side'>
<h1>I'm on the other side of the flex container!</h1>
</div>
</div>
.container {
display: flex;
}
.side {
width: 100px;
flex-grow: 1;
}
.center {
width: 100px;
flex-grow: 2;
}
In the example above, the .container div has a display value of flex, so its three child divs
will be positioned next to each other. If there is additional space in the .container div (in
this case, if it is wider than 300 pixels), the flex items will grow to fill it. The .center div
will stretch twice as much as the .side divs. For example, if there were 60 additional
pixels of space, the center div would absorb 30 pixels and the side divs would absorb 15
pixels each.
If a max-width is set for an element, it will not grow larger than that even if there is
more space for it to absorb.
All of the previous properties we have learned are declared on flex containers, or the
parent elements. This property — flex-grow — is the first we have learned that is
declared on flex items.
flex-shrink
Just as the flex-grow property proportionally stretches flex items, the flex-
shrink property can be used to specify which elements will shrink and in what
proportions.
You may have noticed in earlier exercises that flex items shrank when the flex container
was too small, even though we had not declared the property. This is because the
default value of flex-shrink is 1. However, flex items do not grow unless the flex-
grow property is declared because the default value of flex-grow is 0.
<div class='side'>
<h1>I'm on the side of the flex container!</h1>
</div>
<h1>I'm in the center of the flex container!</h1>
</div>
<div class='side'>
<h1>I'm on the other side of the flex container!</h1>
</div>
</div>
.container {
display: flex;
}
.side {
width: 100px;
flex-shrink: 1;
}
.center {
width: 100px;
flex-shrink: 2;
}
In the example above, the .center div will shrink twice as much as the .side divs if
the .container div is too small to fit the elements within it. If the content is 60 pixels too
large for the flex container that surrounds it, the .center div will shrink by 30 pixels and
the outer divs will shrink by 15 pixels each. Margins are unaffected by flex-
grow and flex-shrink.
Keep in mind, minimum and maximum widths will take precedence over flex-
grow and flex-shrink. As with flex-grow, flex-shrink will only be employed if the parent
container is too small or the browser is adjusted.
flex-basis
In the previous two exercises, the dimensions of the divs were determined by heights
and widths set with CSS. Another way of specifying the width of a flex item is with
the flex-basis property. flex-basis allows us to specify the width of an item before it
stretches or shrinks.
<div class='side'>
<h1>Left side!</h1>
</div>
<h1>Center!</h1>
</div>
<div class='side'>
<h1>Right side!</h1>
</div>
</div>
.container {
display: flex;
}
.side {
flex-grow: 1;
flex-basis: 100px;
}
.center {
flex-grow: 2;
flex-basis: 150px;
}
In the example above, the .side divs will be 100 pixels wide and the .center div will be
150 pixels wide if the .container div has just the right amount of space (350 pixels, plus a
little extra for margins and borders). If the .container div is larger, the .center div will
absorb twice as much space as the .side divs.
The same would hold true if we assigned flex-shrink values to the divs above as well.
flex
The shorthand flex property provides a convenient way for specifying how elements
stretch and shrink, while simplifying the CSS required. The flex property allows you to
declare flex-grow, flex-shrink, and flex-basis all in one line.
Note: The flex property is different from the flex value used for the display property.
.big {
flex-grow: 2;
flex-shrink: 1;
flex-basis: 150px;
}
.small {
flex-grow: 1;
flex-shrink: 2;
flex-basis: 100px;
}
In the example above, all elements with class big will grow twice as much as elements
with class small. Keep in mind, this doesn’t mean big items will be twice as big
as small items, they’ll just take up more of the extra space.
The CSS below declares these three properties in one line.
.big {
flex: 2 1 150px;
}
.small {
flex: 1 2 100px;
}
In the example above, we use the flex property to declare the values for flex-grow, flex-
shrink, and flex-basis (in that order) all in one line.
.big {
flex: 2 1;
}
In the example above, we use the flex property to declare flex-grow and flex-shrink, but
not flex-basis.
.small {
flex: 1 20px;
}
In the example above, we use the flex property to declare flex-grow and flex-basis. Note
that there is no way to set only flex-shrink and flex-basis using 2 values.
The browser to the right has two flex containers, each with three flex items. In style.css,
examine the values for each of these items. Notice that the flex-grow and flex-
basis values are set for the blue divs.
Stretch the browser window to increase its width. Observe that once the top outer divs
reach 100 pixels wide, they begin to grow faster than the top center div. Also notice
that once the bottom center div reaches 100 pixels wide, it begins to grow faster than
the outer divs.
Now, shrink the browser window and notice that once the top center div reaches 50
pixels wide it begins to shrink faster than the outer divs and when the bottom
outer divs reach 75 pixels, they begin to shrink faster than the center div.
flex-wrap
Sometimes, we don’t want our content to shrink to fit its container. Instead, we might
want flex items to move to the next line when necessary. This can be declared with
the flex-wrap property. The flex-wrap property can accept three values:
1. wrap — child elements of a flex container that don’t fit into a row will move
down to the next line
2. wrap-reverse — the same functionality as wrap, but the order of rows within a
flex container is reversed (for example, in a 2-row flexbox, the first row from
a wrap container will become the second in wrap-reverse and the second row
from the wrap container will become the first in wrap-reverse)
3. nowrap — prevents items from wrapping; this is the default value and is only
necessary to override a wrap value set by a different CSS rule.
<div class='item'>
<h1>We're going to wrap!</h1>
</div>
<div class='item'>
</div>
<div class='item'>
</div>
</div>
.container {
flex-wrap: wrap;
width: 250px;
}
.item {
width: 100px;
height: 100px;
}
In the example above, three flex items are contained by a parent flex container. The flex
container is only 250 pixels wide so the three 100 pixel wide flex items cannot fit inline.
The flex-wrap: wrap; setting causes the third, overflowing item to appear on a new line,
below the other two items.
Note: The flex-wrap property is declared on flex containers.
align-content
Now that elements can wrap to the next line, we might have multiple rows of flex items
within the same container. In a previous exercise, we used the align-items property to
space flex items from the top to the bottom of a flex container. align-items is for
aligning elements within a single row. If a flex container has multiple rows of content,
we can use align-content to space the rows from top to bottom.
Below are some of the more commonly used align-content values:
 flex-start — all rows of elements will be positioned at the top of the parent
container with no extra space between.
 flex-end — all rows of elements will be positioned at the bottom of the parent
container with no extra space between.
 center — all rows of elements will be positioned at the center of the parent
element with no extra space between.
 space-between — all rows of elements will be spaced evenly from the top to the
bottom of the container with no space above the first or below the last.
 space-around — all rows of elements will be spaced evenly from the top to the
bottom of the container with the same amount of space at the top and bottom
and between each element.
 stretch — if a minimum height or no height is specified, the rows of elements
will stretch to fill the parent container from top to bottom (default value).
<div class='child'>
<h1>1</h1>
</div>
<div class='child'>
<h1>2</h1>
</div>
<div class='child'>
<h1>3</h1>
</div>
<div class='child'>
<h1>4</h1>
</div>
</div>
.container {
display: flex;
width: 400px;
height: 400px;
flex-wrap: wrap;
align-content: space-around;
}
.child {
width: 150px;
height: 150px;
}
In the example above, there are four flex items inside of a flex container. The flex items
are set to be 150 pixels wide each, but the parent container is only 400 pixels wide. This
means that no more than two elements can be displayed inline. The other two elements
will wrap to the next line and there will be two rows of divs inside of the flex container.
The align-content property is set to the value of space-around, which means the two rows
of divs will be evenly spaced from top to bottom of the parent container with equal
space before the first row and after the second, with double space between the rows.
Note: The align-content property is declared on flex containers.
flex-direction
Up to this point, we’ve only covered flex items that stretch and shrink horizontally and
wrap vertically. As previously stated, flex containers have two axes: a main axis and
a cross axis. By default, the main axis is horizontal and the cross axis is vertical.
The main axis is used to position flex items with the following properties:
1. justify-content
2. flex-wrap
3. flex-grow
4. flex-shrink
The cross axis is used to position flex items with the following properties:
1. align-items
2. align-content
The main axis and cross axis are interchangeable. We can switch them using the flex-
direction property. If we add the flex-direction property and give it a value of column, the
flex items will be ordered vertically, not horizontally.
<div class='item'>
<h1>1</h1>
</div>
<div class='item'>
<h1>2</h1>
</div>
<div class='item'>
<h1>3</h1>
</div>
<div class='item'>
<h1>4</h1>
</div>
<div class="item">
<h1>5</h1>
</div>
</div>
.container {
display: flex;
flex-direction: column;
width: 1000px;
}
.item {
height: 100px;
width: 100px;
}
In the example above, the five divs will be positioned in a vertical column. All of these
divs could fit in one horizontal row. However, the column value tells the browser to
stack the divs one on top of the other. As explained above, properties like justify-
content will not behave the way they did in previous examples.
The flex-direction property can accept four values:

1. row — elements will be positioned from left to right across the parent element
starting from the top left corner (default).
2. row-reverse — elements will be positioned from right to left across the parent
element starting from the top right corner.
3. column — elements will be positioned from top to bottom of the parent

element starting from the top left corner.
4. column-reverse — elements will be positioned from the bottom to the top of the
parent element starting from the bottom left corner.
Note: The flex-direction property is declared on flex containers.
flex-flow
Like the shorthand flex property, the shorthand flex-flow property is used to
declare both the flex-wrap and flex-direction properties in one line.
.container {
display: flex;
flex-wrap: wrap;
}
In the example above, we take two lines to accomplish what can be done with
one.
.container {
display: flex;
flex-flow: column wrap;
}
In the example above, the first value in the flex-flow declaration is a flex-
direction value and the second is a flex-wrap value. All values for flex-
direction and flex-wrap are accepted.
Note: The flex-flow property is declared on flex containers.
Nested Flexboxes
So far, we’ve had multiple flex containers on the same page to explore flex item
positioning. It is also possible to position flex containers inside of one another.
<div class='left'>
<img class='small' src='#'/>
<img class='small' src='#'/>
<img class='small' src='#' />
</div>
<div class='right'>
<img class='large' src='#' />
</div>
</div>
.container {
display: flex;
justify-content: center;
align-items: center;
}
.left {
flex: 2 1 200px;
}
.right {
flex: 1 2 400px;
}
.small {
height: 200px;
width: auto;
}
.large {
height: 600px;
width: auto;
}
In the example above, a div with three smaller images will display from top to bottom
on the left of the page (.left). There is also a div with one large image that will display
on the right side of the page (.right). The left div has a smaller flex-basis but stretches to
fill more extra space; the right div has a larger flex-basis but stretches to fill less extra
space. Both divs are flex items and flex containers. The items have properties that
dictate how they will be positioned in the parent container and how their flex item
children will be positioned in them.
We’ll use the same formatting above to layout the simple page to the right.
Simple Example of Breadcrumbs
If a user sees something like “Fashion > Shoes” in the breadcrumb structure,
they could reasonably expect the site contains other clothing items or
accessories besides shoes.
Breadcrumbs are usually displayed as a horizontal list of pages and take up

minimal space. Users expect to find them in the header, left-aligned, and below
any primary navigation. Typically they are separated with a “>” or a “/“ symbol.
Breadcrumbs are typically displayed next to each other, on the same line. First,
set the display property to inline for the .breadcrumb > li selector in order to put
list items on the same line. Another common feature of breadcrumbs is that
they are separated by a symbol, often > or /. Instead of having to manually add
this to all of the breadcrumbs in our breadcrumb trail, we can use a CSS
pseudo-element.
This requires some complicated CSS, but it will save us time in the long run!
.breadcrumb li+li::before is the selector that we want!
In styles.css, find the selector (.breadcrumb li+li::before). Set the content property
to “>” to place the greater than sign between each adjacent breadcrumb.
Breadcrumb Styles
The example below makes use of a couple of CSS tricks to create an arrow
effect. We’re using the ::before and ::after pseudo-elements to add filled
rectangles (with empty content) before and after each list item:
.breadcrumb li a::before, .breadcrumb li a::after {

content: "";
position: absolute;
border-color: darkcyan;
border-style: solid;
border-width: 15px 5px;
}
By setting a portion of the border to transparent, it creates the “tail” of the

arrow:
.breadcrumb li a::before {
left: -10px;
border-left-color: transparent;
}
This effect works because the element borders are drawn from the center of the
element. We use similar CSS to draw the head of the arrow.
We’ll walk through the individual steps in the exercises so you can see how each
step affects the resulting look.
In the pane to the right, breadcrumb.css contains the styles from our previous
breadcrumb implementation. Delete the existing “>” symbols from between the
list items by removing the .breadcrumb li+li::before selector.
2.
Replace the .breadcrumb a CSS section with:
.breadcrumb a {
color: #fff;
background: darkcyan;
text-decoration: none;
position: relative;
height: 30px;
line-height: 30px;
text-align: center;
margin-right: 15px;
padding: 0 5px;
}
Change the existing .breadcrumb li from display: inline to float: left:
.breadcrumb li {
float: left;
}
In the browser, you should see that we have created the “body” of the arrows.
3.
Next, we create the before and after pseudo-elements. Copy the following CSS
and see how it affects the output:
.breadcrumb a::before,
.breadcrumb a::after {
content: "";
position: absolute;
border-color: darkcyan;
border-style: solid;
border-width: 15px 5px;
}
You’ll notice that we have added pseudo-elements, but they are on top of our
existing elements.
4.
The total width of our pseudo-elements is 10px, since the border has 5px on the
left and 5px on the right. Given this, move the pseudo-elements to the proper
location using the following CSS:
.breadcrumb a::before {
left: -10px;
}
left: 100%;
}
5.
The last step is to use the CSS trick to turn these into arrows. Style the after
elements as “heads” by setting the border color to transparent except for
the border-left-color:
left: 100%;
border-color: transparent;
border-left-color: darkcyan;
}
6.
Style the before elements as “tails” by setting the border-left-color to transparent
for the :before elements.
7.
These breadcrumbs are looking how we want, but lets add a hover state for a
little more style:
.breadcrumb a:hover {
}
.breadcrumb a:hover::before {
border-color: blue;
border-left-color: transparent;
}
.breadcrumb a:hover::after {
border-left-color: blue;
}
Breadcrumb Types
There are three major types of breadcrumbs:
 Location
 Attribute
 Path
You’ve seen the first two types in our examples so far.
Location based breadcrumbs are based on where you are with respect to the
navigation structure of the website. In our previous shoe shopping example, the first
three li elements are location based. We are in the “shoes” section of the website,
which is contained within the “fashion” section, which is contained within the
“shopping” section.
Attribute based breadcrumbs are based on the attributes of the page or product that
you are browsing. In our previous example, the final two li elements are attribute
based. We are shopping for shoes that are “flats” and “brown”. Since the order of these
attributes is not prescriptive, you’ll see some sites display these at the same level in the
UI. If you want to allow users to remove attributes, provide an (x) button or similar to
indicate they can be removed.
Finally, breadcrumbs can be based on a user’s unique path through the site. For
example, if they landed on the home page, browsed to the about page and finally the
registration page, their breadcrumb trail may look like:
Home > About > Register
Note that this breadcrumb trail will be different for each user and each visit. For even
mildly complex sites, the number of steps will become large. To simplify the display, the
beginning of the trail is often abbreviated:
... > About > Register
Introduction to Grids
Using CSS, you can elegantly lay out elements on a web page. There is no simple
answer for how best to do this — depending on what content you are trying to display,
multiple different techniques can work well. The Box Model and Display and
Positioning explain some possible ways to style layout.
In this lesson, we introduce a powerful tool called CSS Grid. The grid can be used to
layout entire web pages. Whereas Flexbox is mostly useful for positioning items in a
one-dimensional layout, CSS grid is most useful for two-dimensional layouts, providing
many tools for aligning and moving elements across both rows and columns.
By the end of this lesson, you will understand how to use these properties to create
grid layouts:
 grid-template-columns
 grid-template-rows
 grid-template
 grid-template-area
 row-gap / column-gap / gap
 grid-row-start / grid-row-end
 grid-column-start / grid-column-end
 grid-area
Creating a Grid
To set up a grid, you need to have both a grid container and grid items. The grid
container will be a parent element that contains grid items as children and applies
overarching styling and positioning to them.
To turn an HTML element into a grid container, you must set the
element’s display property to one of two values:
 grid — for a block-level grid.
 inline-grid — for an inline grid.
Then, you can assign other properties to lay out the grid to suit your needs.
Creating Columns
By default, grids contain only one column. If you were to start adding items, each item
would be put on a new row; that’s not much of a grid! To change this, we need to
explicitly define the number of rows and columns in our grid.
We can define the columns of our grid by using the CSS property grid-template-columns.
Below is an example of this property in action:
.grid {
display: grid;
width: 500px;
grid-template-columns: 100px 200px;
}
This property creates two changes. First, it defines the number of columns in the grid; in
this case, there are two. Second, it sets the width of each column. The first column will
be 100 pixels wide and the second column will be 200 pixels wide.
We can also define the size of our columns as a percentage of the entire grid’s width.
.grid {
display: grid;
width: 1000px;
grid-template-columns: 20% 50%;
}
In this example, the grid is 1000 pixels wide. Therefore, the first column will be 200
pixels wide because it is set to be 20% of the grid’s width. The second column will be
500 pixels wide.
We can also mix and match these two units. In the example below, there are three
columns of width 20 pixels, 40 percent, and 60 pixels:
.grid {
display: grid;
width: 100px;
grid-template-columns: 20px 40% 60px;
}
Notice that in this example, the total width of our columns (120 pixels) exceeds the
width of the grid (100 pixels). This might make our grid cover other elements on the
page! In a later exercise, we will discuss how to avoid overflow.
Creating Rows
We’ve learned how to define the number of columns in our grid explicitly. To specify
the number and size of the rows, we are going to use the property grid-template-rows.
This property is almost identical to grid-template-columns. Take a look at the code below
to see both properties in action.
.grid {
display: grid;
width: 1000px;
height: 500px;
grid-template-rows: 10% 20% 600px;
}
This grid has two columns and three rows. grid-template-rows defines the number of
rows and sets each row’s height. In this example, the first row is 50 pixels tall (10% of
500), the second row is 100 pixels tall (20% of 500), and the third row is 600 pixels tall.
When using percentages in these two properties, remember that rows are defined as a
percentage of the grid’s height, and columns are defined as a percentage of its width.
Grid Template
The shorthand property, grid-template, can replace the previous two CSS properties.
Both grid-template-rows and grid-template-columns are nowhere to be found in the
following code!
.grid {
display: grid;
width: 1000px;
height: 500px;
grid-template: 200px 300px / 20% 10% 70%;
}
When using grid-template, the values before the slash will determine the size of each
row. The values after the slash determine the size of each column. In this example,
we’ve made two rows and three columns of varying sizes.
The same rules from before apply; when using percentages to set rows, each row will
be a percentage of the grid’s total height. Columns are still a percentage of the total
width.
Fraction
CSS Grid introduced a new relative sizing unit — fr, like fraction.
By using the fr unit, we can define the size of columns and rows as a fraction of the
grid’s length and width. This unit was specifically created for use in CSS Grid.
Using fr makes it easier to prevent grid items from overflowing the boundaries of the
grid. Consider the code below:
.grid {
display: grid;
width: 1000px;
height: 400px;
grid-template: 2fr 1fr 1fr / 1fr 3fr 1fr;
}
In this example, the grid will have three rows and three columns. The rows are splitting
up the available 400 pixels of height into four parts. The first row gets two of those
parts, the second row gets one, and the third row gets one. Therefore, the first row is
200 pixels tall, and the second and third rows are 100 pixels tall.
Each column’s width is a fraction of the available space. In this case, the available space
is split into five parts. The first column gets one-fifth of the space, the second column
gets three-fifths, and the last column gets one-fifth. Since the total width is 1000 pixels,
this means that the columns will have widths of 200 pixels, 600 pixels, and 200 pixels
respectively.
It is possible to use fr with other units as well. When this happens, each fr represents a
fraction of the available space.
.grid {
display: grid;
width: 100px;
grid-template-columns: 1fr 60px 1fr;
}
In this example, 60 pixels are taken up by the second column. Therefore, the first and
third columns have 40 available to split between them. Since each gets one fraction of
the total, they both end up being 20 pixels wide.
Repeat
The properties that define the number of rows and columns in a grid can take a
function as a value. repeat() is one of these functions. The repeat() function was created
specifically for CSS Grid.
.grid {
display: grid;
width: 300px;
grid-template-columns: repeat(3, 100px);
}
The repeat function will duplicate the specifications for rows or columns a given
number of times. In the example above, using the repeat function will make the grid
have three columns that are each 100 pixels wide. It is the same as writing:
grid-template-columns: 100px 100px 100px;
Repeat is particularly useful with fr. For example, repeat(5, 1fr) would split your table into
five equal rows or columns.
Finally, the second parameter of repeat() can have multiple values.
grid-template-columns: repeat(2, 20px 50px)
This code will create four columns where the first and third columns will be 20 pixels
wide and the second and fourth will be 50 pixels wide.
minmax
So far, all of the grids that we have worked with have been a fixed size. The grid in our
example has been 400 pixels wide and 500 pixels tall. But sometimes you might want a
grid to resize based on the size of your web browser.
In these situations, you might want to prevent a row or column from getting too big or
too small. For example, if you have a 100-pixel wide image in your grid, you probably
don’t want its column to get thinner than 100 pixels! The minmax() function can help us
solve this problem.
.grid {
display: grid;
grid-template-columns: 100px minmax(100px, 500px) 100px;
}
In this example, the first and third columns will always be 100 pixels wide, no matter the
size of the grid. The second column, however, will vary in size as the overall grid resizes.
The second column will always be between 100 and 500 pixels wide.
Grid Gap
In all of our grids so far, there hasn’t been any space between the items in our grid. The
CSS properties row-gap and column-gap will put blank space between every row and
column in the grid.
.grid {
display: grid;
width: 320px;
grid-template-columns: repeat(3, 1fr);
column-gap: 10px;
}
It is important to note that grid gap properties do not add space at the beginning or
end of the grid. In the example code, our grid will have three columns with two ten-
pixel gaps between them.
Let’s quickly calculate how wide these columns are. Remember that using fr considers
all of the available space. The grid is 320 pixels wide and 20 of those pixels are taken up
by the two grid gaps. Therefore each column takes a piece of the 300 available pixels.
Each column gets 1fr, so the columns are evenly divided into thirds (or 100 pixels each).
Finally, there is a shorthand CSS property, gap, that can set the row and column gap at
the same time.
.grid {
display: grid;
width: 320px;
grid-template-columns: repeat(3, 1fr);
gap: 20px 10px;
}
The example above will set the distance between rows to 20 pixels and the distance
between columns to 10 pixels. Unlike other CSS grid properties, this shorthand does
not take a / between values! If only one value is given, it will set the column gap and
the row gap to that value.
Note: You might have seen grid-row-gap, grid-column-gap, and grid-gap in other code, but
these properties are now deprecated.
Grid Items
In this lesson, we have learned how to define a grid container. When explicitly defining
a grid, you have to declare the quantity of rows and columns and their respective sizes.
In all of our examples, the items placed in the grid have always taken up exactly one
square. This does not always need to be the case; we can drastically change the look of
our grid by making grid items take up more than one row and one column. You can see
this in the diagram to the right. Items A, B, C, and E span more than one row!
Multiple Row Items
Using the CSS properties grid-row-start and grid-row-end, we can make single grid items
take up multiple rows. Remember, we are no longer applying CSS to the outer grid
container; we’re adding CSS to the elements sitting inside the grid!
.item {
grid-row-start: 1;
grid-row-end: 3;
}
In this example, the HTML element of class item will take up two rows in the grid, rows 1
and 2. The values that grid-row-start and grid-row-end accept are grid lines.
Row grid lines and column grid lines start at 1 and end at a value that is 1 greater than
the number of rows or columns the grid has. For example, if a grid has 5 rows, the grid
row lines range from 1 to 6. If a grid has 8 rows, the grid row lines range from 1 to 9.
The value for grid-row-start should be the row at which you want the grid item to begin.
The value for grid-row-end should be one greater than the row at which you want the
grid item to end. An element that covers rows 2, 3, and 4 should have these
declarations: grid-row-start: 2 and grid-row-end: 5.
It is possible for the value of grid-row-start to be greater than that of grid-row-end. Both
properties can also each have negative values. Consult the documentation to learn
more about how to use these features.
Grid Row
We can use the property grid-row as shorthand for grid-row-start and grid-row-end. The
following two code blocks will produce the same output:
.item {
grid-row-start: 4;
grid-row-end: 6;
}
.item {
grid-row: 4 / 6;
}
This code should look similar to the way grid-template is shorthand for grid-template-
rowsand grid-template-columns. In this case, the starting row goes before the “/“ and the
ending row goes after it. Again, the ending row is exclusive; this grid item will occupy
rows four and five.
When an item spans multiple rows or columns using these properties, it will also
include the gap if any exists. For example, if an item spans two rows of height 100 pixels
and there is a ten-pixel gap, then the item will have a total height of 210 pixels.
Grid Column
The previous three properties also exist for columns. grid-column-start, grid-column-
end and grid-column work identically to the row properties. These properties allow a grid
item to span multiple columns.
When using these properties, we can use the keyword span to start or end a column or
row, relative to its other end. Look at how span is used in the code below:
.item {
grid-column: 4 / span 2;
}
This is telling the item element to begin in column four and take up two columns of
space. So item would occupy columns four and five. It produces the same result as the
following code blocks:
.item {
grid-column: 4 / 6;
}
.item {
grid-column-start: 4;
grid-column-end: span 2;
}
.item {
grid-column-start: span 2;
grid-column-end: 6;
}
span is a useful keyword, because it avoids off-by-one errors (miscalculating the ending
grid line) you might make when determining the ending grid line of an element. If you
know where you want your grid item to start and how long it should be, use span!
Grid Area
We’ve already been able to use grid-row and grid-column as shorthand for
properties like grid-row-start and grid-row-end. We can refactor even more using
the property grid-area. This property will set the starting and ending positions for
both the rows and columns of an item.
.item {
grid-area: 2 / 3 / 4 / span 5;
}
grid-area takes four values separated by slashes. The order is important! This is
how grid-area will interpret those values.
1. grid-row-start
2. grid-column-start
3. grid-row-end
4. grid-column-end
In the above example, the item will start on row 2 and end on row 4, though the
4th row is not actually included, only rows 2 and 3! The item will then start on
column 3 and instead of setting a number for which column to end on, we want
this item to span 5 columns — this means the item will include columns 3, 4, 5, 6,
and 7.
Using grid-area is an easy way to place items exactly where you want them in a
grid.
Advanced CSS GRID

In the previous lesson, you learned all the foundational properties necessary to create a
two-dimensional grid-based layout for your web pages! In this lesson, you’ll learn the
following additional properties that you can use to harness the power of CSS Grid
Layout:
 grid-template-areas
 justify-items
 justify-content
 justify-self
 align-items
 align-content
 align-self
 grid-auto-rows
 grid-auto-columns
 grid-auto-flow
You will also learn about the explicit and implicit grids and grid axes.
Grid Template Areas
The grid-template-areas property allows you to name sections of your web page to use as
values in the grid-row-start, grid-row-end, grid-column-start,grid-column-end, and grid-
area properties. This property is declared on grid containers.
<div class="container">
<header>Welcome!</header>
<nav>Links!</nav>
<section class="info">Info!</section>
<section class="services">Services!</section>
<footer>Contact us!</footer>
</div>
.container {
display: grid;
max-width: 900px;
position: relative;
margin: auto;
grid-template-areas: "header header"
"nav nav"
"info services"
"footer footer";
grid-template-rows: 300px 120px 800px 120px;
grid-template-columns: 1fr 3fr;
}
header {
grid-area: header;
}
nav {
grid-area: nav;
}
.info {
grid-area: info;
}
.services {
grid-area: services;
}
footer {
grid-area: footer;
}
You may want to expand this section of the website to view the code above more
clearly.
1. In the example above, the HTML creates a web page with five distinct parts.
2. In the .container ruleset, the grid-template-areas declaration creates a 2-column, 4-

row layout.
3. The grid-template-rows declaration specifies the height of each of the four rows
from top to bottom: 300 pixels, 120 pixels, 800 pixels, and 120 pixels.
4. The grid-template-columns declaration uses the fr value to cause the left column
to use one fourth of the available space on the page and the right column to
use three-fourths of the available space on the page.
5. In each ruleset below .container, we use the grid-area property to tell that section
to cover the portion of the page specified. The header element spans the first
row and both columns. The nav element spans the second row and both
columns. The element with class .info spans the third row and left column. The
element with class .services spans the third row and right column.
The footer element spans the bottom row and both columns.
6. That’s it! An entire page laid out in 40 lines of code.
Overlapping Elements
Another powerful feature of CSS Grid Layout is the ability to easily overlap elements.
When overlapping elements, it is generally easiest to use the grid-area property with
grid row names. Remember that grid-area will set the starting and ending positions for
both the rows and columns of an item.
<div class="container">
<div class="info">Info!</div>
<img src="#" />
<div class="services">Services!</div>
</div>
.container {
display: grid;
grid-template: repeat(8, 200px) / repeat(6, 100px);
}
.info {
grid-area: 1 / 1 / 9 / 4;
}
.services {
grid-area: 1 / 4 / 9 / 7;
}
img {
grid-area: 2 / 3 / 5 / 5;
z-index: 5;
}
In the example above, there is a grid container with eight rows and six columns. There
are three grid items within the container — a <div> with the class info, a <div> with the
class services, and an image.
The info section covers all eight rows and the first three columns. The services section
covers all eight rows and the last three columns.
The image spans the 2nd, 3rd, and 4th rows and the 3rd and 4th columns.
The z-index property tells the browser to render the image element on top of
the services and info sections so that it is visible.
Justify Items
We have referred to “two-dimensional grid-based layout” several times throughout this

course.
There are two axes in a grid layout — the column (or block) axis and the row (or inline)
axis.
The column axis stretches from top to bottom across the web page.
The row axis stretches from left to right across the web page.
In the following four exercises, we will learn and use properties that rely on an
understanding of grid axes.
justify-items is a property that positions grid items along the inline, or row, axis. This
means that it positions items from left to right across the web page. This property is
declared on grid containers.
justify-items accepts these values:
 start — aligns grid items to the left side of the grid area
 end — aligns grid items to the right side of the grid area
 center — aligns grid items to the center of the grid area
 stretch — stretches all items to fill the grid area
There are several other values that justify-items accepts, which you can read about on
the Mozilla Developer Network. The definitions for these values can also be found in
the documentation. It is important to note that the page with the definitions includes
some values that are not accepted in CSS Grid layout.
<main>
<div class="card">Card 1</div>
</main>
main {
display: grid;
grid-template-columns: repeat(3, 400px);
justify-items: center;
}
In the example above, we use justify-items to adjust the positioning of some elements
on this web page.
1. There is a grid container with three columns that are each 400 pixels wide.
2. The container has three grid items that do not have a specified width.
3. Without setting the justify-items property, these elements will span the width of
the column they are in (400 pixels).
4. By setting the justify-items property to center, the .card <div>s will be centered
inside of their columns. They will only be as wide as necessary to contain their
content (the words Card 1, etc).
5. If we specify a width for the .card elements, they will not stretch the width of
their column.
Justify Content
In the previous exercise, we learned how to position elements within their columns. In
this exercise, we will learn how to position a grid within its parent element.
We can use justify-content to position the entire grid along the row axis. This property is
It accepts these values:
 start — aligns the grid to the left side of the grid container
 end — aligns the grid to the right side of the grid container
 center — centers the grid horizontally in the grid container
 stretch — stretches the grid items to increase the size of the grid to expand
horizontally across the container
 space-around — includes an equal amount of space on each side of a grid

element, resulting in double the amount of space between elements as there is
before the first and after the last element
 space-between — includes an equal amount of space between grid items and no

space at either end
 space-evenly — places an even amount of space between grid items and at

either end
There are several other values that justify-content accepts, which you can read about on
<main>
<div class="left">Left</div>
<div class="right">Right</div>
</main>
main {
display: grid;
width: 1000px;
grid-template-areas: "left right";
justify-content: center;
}
1. In the example above, the grid container is 1000 pixels wide, but we only
specified two columns that are 300 pixels each. This will leave 400 pixels of
unused space in the grid container.
2. justify-content: center; positions the columns in the center of the grid, leaving 200
pixels on the right and 200 pixels on the left of the grid.
Align Items
In the previous two exercises, we learned how to position grid items and grid columns
from left to right across the page. Now we’ll learn how to position grid items from top
to bottom!
align-items is a property that positions grid items along the block, or column axis. This
means that it positions items from top to bottom. This property is declared on grid
containers.
align-items accepts these values:
 start — aligns grid items to the top side of the grid area
 end — aligns grid items to the bottom side of the grid area
 center — aligns grid items to the center of the grid area
 stretch — stretches all items to fill the grid area
There are several other values that align-items accepts, which you can read about on
<main>
</main>
main {
display: grid;
grid-template-rows: repeat(3, 400px);
}
In the example above, we use align-items to adjust the positioning of some elements on
this web page.
1. There is a grid container with three rows that are 400 pixels tall.
2. The container has three grid items that do not have a specified width.
3. Without setting the align-items property, these elements will span the height of
the row they are in (400 pixels).
4. By setting the align-items property to center, the .card <div>s will be centered
vertically inside of their rows. They will only be as tall as necessary to contain
their content (the words Card 1, etc).
5. If we specify a height for the .card elements, they will not stretch the height of
their row even if align-items: stretch; is set.
Align Content
In the previous exercise, we positioned grid items within their rows. align-
content positions the rows along the column axis, or from top to bottom, and is
It accepts these positional values:
 start — aligns the grid to the top of the grid container
 end — aligns the grid to the bottom of the grid container
 center — centers the grid vertically in the grid container
 stretch — stretches the grid items to increase the size of the grid to expand
vertically across the container
 space-around — includes an equal amount of space on each side of a grid

element, resulting in double the amount of space between elements as there is
before the first and after the last element
 space-between — includes an equal amount of space between grid items and no

space at either end
 space-evenly — places an even amount of space between grid items and at

either end
There are several other values that align-content accepts, which you can read about on
<main>
<div class="top">Top</div>
<div class="bottom">Bottom</div>
</main>
main {
display: grid;
height: 600px;
grid-template-rows: 200px 200px;
grid-template-areas: "top"
"bottom";
align-content: center;
}
1. In the example above, the grid container is 600 pixels tall, but we only specified
two rows that are 200 pixels each. This will leave 200 pixels of unused space in
the grid container.
2. align-content: center; positions the rows in the center of the grid, leaving 100
pixels at the top and 100 pixels at the bottom of the grid.
Justify Self and Align Self
The justify-items and align-items properties specify how all grid items contained within a
single container will position themselves along the row and column axes, respectively.
justify-self specifies how an individual element should position itself with respect to the
row axis. This property will override justify-items for any item on which it is declared.
align-self specifies how an individual element should position itself with respect to the
column axis. This property will override align-items for any item on which it is declared.
These properties are declared on grid items. They both accept these four properties:
 start — positions grid items on the left side/top of the grid area
 end — positions grid items on the right side/bottom of the grid area
 center — positions grid items on the center of the grid area
 stretch — positions grid items to fill the grid area (default)

align-self and justify-self accept the same values as align-items and justify-items. You can
read about these values on the Mozilla Developer Network. The definitions for these
values can also be found in the documentation. It is important to note that the page
with the definitions includes some values that are not accepted in CSS Grid layout.
Grid Auto Rows and Grid Auto Columns
CSS Grid provides two properties to specify the size of grid tracks added implicitly: grid-
auto-rows and grid-auto-columns. These properties are declared on grid containers.
grid-auto-rows specifies the height of implicitly added grid rows. grid-auto-

columns specifies the width of implicitly added grid columns.
grid-auto-rows and grid-auto-columns accept the same values as their explicit

counterparts, grid-template-rows and grid-template-columns:
 pixels (px)
 percentages (%)
 fractions (fr)
 the repeat() function
<body>
<div>Part 1</div>
<div>Part 2</div>
<div>Part 3</div>
<div>Part 4</div>
<div>Part 5</div>
</body>
body {
display: grid;
grid: repeat(2, 100px) / repeat(2, 150px);
grid-auto-rows: 50px;
}
In the example above, there are 5 <div>s. However, in the body ruleset, we only specify
a 2-row, 2-column grid — four grid cells.
The fifth <div> will be added to an implicit row that will be 50 pixels tall.
If we did not specify grid-auto-rows, the rows would be auto-adjusted to the height of
the content of the grid items.
Grid Auto Flow
In addition to setting the dimensions of implicitly-added rows and columns, we can

specify the order in which they are rendered.
grid-auto-flow specifies whether new elements should be added to rows or columns,

and is declared on grid containers.
grid-auto-flow accepts these values:
 row — specifies the new elements should fill rows from left to right and create
new rows when there are too many elements (default)
 column — specifies the new elements should fill columns from top to bottom
and create new columns when there are too many elements
 dense — this keyword invokes an algorithm that attempts to fill holes earlier in
the grid layout if smaller elements are added
You can pair row or column with dense, like this: grid-auto-flow: row dense;.
Relative Measurements
Em
Incorporating relative sizing starts by using units other than pixels. One unit of
measurement you can use in CSS to create relatively-sized content is the em, written
as em in CSS.
Historically, the em represented the width of a capital letter M in the typeface and size
being used. That is no longer the case.
Today, the em represents the font-size of the current element or the default base font-
size set by the browser if none is given. For example, if the base font of a browser is 16
pixels (which is normally the default size of text in a browser), then 1 em is equal to 16
pixels. 2 ems would equal 32 pixels, and so on.
Let’s take a look at two examples that show how em can be used in CSS.
.heading {
font-size: 2em;
}
In the example above, no base font has been specified, therefore the font size of
the heading element will be set relative to the default font size of the browser. Assuming
the default font size is 16 pixels, then the font size of the heading element will be 32
pixels.
.splash-section {
font-size: 18px;
}
.splash-section h1 {
font-size: 1.5em;
}
The example above shows how to use ems without relying on the default font size of
the browser. Instead, a base font size (18px) is defined for all text within the splash-
section element. The second CSS rule will set the font size of all h1 elements inside
of splash-section relative to the base font of splash-section (18 pixels). The resulting font
size of h1 elements will be 27 pixels.
Rem
The second relative unit of measurement in CSS is the rem, coded as rem.
Rem stands for root em. It acts similar to em, but instead of checking parent elements
to size font, it checks the root element. The root element is the <html> tag.
Most browsers set the font size of <html> to 16 pixels, so by default rem measurements
will be compared to that value. To set a different font size for the root element, you can
add a CSS rule.
html {
font-size: 20px;
}
h1 {
font-size: 2rem;
}
In the example above, the font size of the root element, <html>, is set to 20 pixels. All
subsequent rem measurements will now be compared to that value and the size
of h1 elements in the example will be 40 pixels.
One advantage of using rems is that all elements are compared to the same font size
value, making it easy to predict how large or small font will appear. If you are interested
in sizing elements consistently across an entire website, the rem measurement is the
best unit for the job. If you’re interested in sizing elements in comparison to other
elements nearby, then the em unit would be better suited for the job.
Percentages: Height & Width
To size non-text HTML elements relative to their parent elements on the page you can
use percentages.
Percentages are often used to size box-model values, like width and height, padding,
border, and margins. They can also be used to set positioning properties (top, bottom,
left, right).
To start, let’s size the height and width of an element using percentages.
.main {
height: 300px;
width: 500px;
}
.main .subsection {
height: 50%;
width: 50%;
}
In the example above, .main and .subsection each represent divs. The .subsection div is
nested within the .main div. Note that the dimensions of the parent div (.main) have
been set to a height of 300 pixels and a width of 500 pixels.
When percentages are used, elements are sized relative to the dimensions of their
parent element (also known as a container). Therefore, the dimensions of
the .subsection div will be 150 pixels tall and 250 pixels wide. Be careful, a child
element’s dimensions may be set erroneously if the dimensions of its parent element
aren’t set first.
Note: Because the box model includes padding, borders, and margins, setting an
element’s width to 100% may cause content to overflow its parent container. While
tempting, 100% should only be used when content will not have padding, border, or
margin.
Percentages: Padding & Margin
Percentages can also be used to set the padding and margin of elements.
When height and width are set using percentages, you learned that the dimensions of
child elements are calculated based on the dimensions of the parent element.
When percentages are used to set padding and margin, however, they are calculated
based only on the width of the parent element.
For example, when a property like margin-left is set using a percentage (say 50%), the
element will be moved halfway to the right in the parent container (as opposed to the
child element receiving a margin half of its parent’s margin).
Vertical padding and margin are also calculated based on the width of the parent.
Why? Consider the following scenario:
1. A container div is defined, but its height is not set (meaning it’s flat).
2. The container then has a child element added within. The child
element does have a set height. This causes the height of its parent container to
stretch to that height.
3. The child element requires a change, and its height is modified. This causes the
parent container’s height to also stretch to the new height. This cycle occurs
endlessly whenever the child element’s height is changed!
In the scenario above, an unset height (the parent’s) results in a constantly changing
height due to changes to the child element. This is why vertical padding and margin are
based on the width of the parent, and not the height.
Note: When using relative sizing, ems and rems should be used to size text and
dimensions on the page related to text size (i.e. padding around text). This creates a
consistent layout based on text size. Otherwise, percentages should be used.
Width: Minimum & Maximum
Although relative measurements provide consistent layouts across devices of different

screen sizes, elements on a website can lose their integrity when they become too small
or large. You can limit how wide an element becomes with the following properties:
1. min-width — ensures a minimum width for an element.
2. max-width — ensures a maximum width for an element.
p{
min-width: 300px;
max-width: 600px;
}
In the example above, when the browser is resized, the width of paragraph elements
will not fall below 300 pixels, nor will their width exceed 600 pixels.
When a browser window is narrowed or widened, text can become either very
compressed or very spread out, making it difficult to read. These two properties ensure
that content is legible by limiting the minimum and maximum widths.
Note: The unit of pixels is used to ensure hard limits on the dimensions of the
element(s).
Height: Minimum & Maximum
You can also limit the minimum and maximum height of an element.
1. min-height — ensures a minimum height for an element’s box.
2. max-height — ensures a maximum height for an element’s box.
p{
min-height: 150px;
max-height: 300px;
}
In the example above, the height of all paragraphs will not shrink below 150 pixels and
the height will not exceed 300 pixels.
What will happen to the contents of an element if the max-height property is set too low
for that element? It’s possible that content will overflow outside of the element,
resulting in content that is not legible.
Scaling Images and Videos
Many websites contain a variety of different media, like images and videos. When a
website contains such media, it’s important to make sure that it is scaled proportionally
so that users can correctly view it.
.container {
width: 50%;
height: 200px;
overflow: hidden;
}
.container img {
max-width: 100%;
height: auto;
display: block;
}
In the example above, .container represents a container div. It is set to a width

of 50% (half of the browser’s width, in this example) and a height of 200 pixels.
Setting overflow to hidden ensures that any content with dimensions larger than the
container will be hidden from view.
The second CSS rule ensures that images scale with the width of the container.
The height property is set to auto, meaning an image’s height will automatically scale
proportionally with the width. Finally, the last line will display images as block level
elements (rather than inline-block, their default state). This will prevent images from
attempting to align with other content on the page (like text), which can add
unintended margin to the images.
It’s worth memorizing the entire example above. It represents a very common design
pattern used to scale images and videos proportionally.
Note: The example above scales the width of an image (or video) to the width of a
container. If the image is larger than the container, the vertical portion of the image will
overflow and will not display. To swap this behavior, you can set max-
height to 100% and width to auto (essentially swapping the values). This will scale
the height of the image with the height of the container instead. If the image is larger
than the container, the horizontal portion of the image will overflow and not display.
Scaling Background Images
Background images of HTML elements can also be scaled responsively using CSS
properties.
body {
background-image: url('#');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
In the example above, the first CSS declaration sets the background image (# is a
placeholder for an image URL in this example). The second declaration instructs the CSS
compiler to not repeat the image (by default, images will repeat). The third declaration
centers the image within the element.
The final declaration, however, is the focus of the example above. It’s what scales the
background image. The image will cover the entire background of the element, all while
keeping the image in proportion. If the dimensions of the image exceed the dimensions
of the container then only a portion of the image will display.
Responsive Web Design
Because websites can be displayed on thousands of different screen sizes, they must be
able to respond to a change in screen size and adapt the content so that users can
access it.
Media Queries
CSS uses media queries to adapt a website’s content to different screen sizes. With
media queries, CSS can detect the size of the current screen and apply different CSS
styles depending on the width of the screen.
@media only screen and (max-width: 480px) {

body {
font-size: 12px;
}
}
The example above demonstrates how a media query is applied. The media query
defines a rule for screens smaller than 480 pixels (approximately the width of many
smartphones in landscape orientation).
Let’s break this example down into its parts:
1. @media — This keyword begins a media query rule and instructs the CSS
compiler on how to parse the rest of the rule.
2. only screen — Indicates what types of devices should use this rule. In early
attempts to target different devices, CSS incorporated different media types
(screen, print, handheld). The rationale was that by knowing the media type, the
proper CSS rules could be applied. However, “handheld” and “screen” devices
began to occupy a much wider range of sizes and having only one CSS rule per
media device was not sufficient. screen is the media type always used for
displaying content, no matter the type of device. The only keyword is added to
indicate that this rule only applies to one media type (screen).
3. and (max-width : 480px) — This part of the rule is called a media feature, and
instructs the CSS compiler to apply the CSS styles to devices with a width of 480
pixels or smaller. Media features are the conditions that must be met in order to
render the CSS within a media query.
4. CSS rules are nested inside of the media query’s curly braces. The rules will be
applied when the media query is met. In the example above, the text in
the body element is set to a font-size of 12px when the user’s screen is less than
480px.
Range
Specific screen sizes can be targeted by setting multiple width and height media
features. min-width and min-height are used to set the minimum width and minimum
height, respectively. Conversely, max-width and max-height set the maximum width and
maximum height, respectively.
By using multiple widths and heights, a range can be set for a media query.
@media only screen and (min-width: 320px) and (max-width: 480px) {

/* ruleset for 320px - 480px */
}
The example above would apply its CSS rules only when the screen size is between 320
pixels and 480 pixels. Notice the use of a second and keyword after the min-width media
feature. This allows us to chain two requirements together.
The example above can be written using two separate rules as well:
@media only screen and (min-width: 320px) {

/* ruleset for >= 320px */
}
@media only screen and (min-width: 480px) {

/* ruleset for >= 480px */
}
The first media query in the example above will apply CSS rules when the size of the
screen meets or exceeds 320 pixels. The second media query will then apply CSS rules
when the size of the screen meets or exceeds 480 pixels, meaning that it can override
CSS rules present in the first media query or apply additional CSS rules that are not
already present in the first.
Both examples above are valid, and it is likely that you will see both patterns used when
reading another developer’s code.
Dots Per Inch (DPI)
Another media feature we can target is screen resolution. Many times we will want to
supply higher quality media (images, video, etc.) only to users with screens that can
support high resolution media. Targeting screen resolution also helps users avoid
downloading high resolution (large file size) images that their screen may not be able
to properly display.
To target by resolution, we can use the min-resolution and max-resolution media features.
These media features accept a resolution value in either dots per inch (dpi) or dots per
centimeter (dpc). Learn more about resolution measurements here.
@media only screen and (min-resolution: 300dpi) {

/* CSS for high resolution screens */
}
The media query in the example above targets high resolution screens by making sure
the screen resolution is at least 300 dots per inch. If the screen resolution query is met,
then we can use CSS to display high resolution images and other media.
And Operator
In previous exercises, we chained multiple media features of the same type in one
media query by using the and operator. It allowed us to create a range by using min-
width and max-width in the same media query.
The and operator can be used to require multiple media features. Therefore, we can use
the and operator to require both a max-width of 480px and to have a min-
resolution of 300dpi.
For example:
@media only screen and (max-width: 480px) and (min-resolution: 300dpi) {

/* CSS ruleset */
}
By placing the and operator between the two media features, the browser will require
both media features to be true before it renders the CSS within the media query.
The and operator can be used to chain as many media features as necessary.
Comma Separated List
If only one of multiple media features in a media query must be met, media features
can be separated in a comma separated list.
For example, if we needed to apply a style when only one of the below is true:
 The screen is more than 480 pixels wide
 The screen is in landscape mode
We could write:
@media only screen and (min-width: 480px), (orientation: landscape) {

/* CSS ruleset */
}
In the example above, we used a comma (,) to separate multiple rules. The example
above requires only one of the media features to be true for its CSS to apply.
Note that the second media feature is orientation. The orientation media feature detects
if the page has more width than height. If a page is wider, it’s considered landscape, and
if a page is taller, it’s considered portrait.
Breakpoints
We know how to use media queries to apply CSS rules based on screen size and
resolution, but how do we determine what queries to set?
The points at which media queries are set are called breakpoints. Breakpoints are the
screen sizes at which your web page does not appear properly. For example, if we want
to target tablets that are in landscape orientation, we can create the following
breakpoint:
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation:
landscape) {
/* CSS ruleset */
}
The example above creates a screen size range the size of a tablet in landscape mode
and also identifies the orientation.
However, setting breakpoints for every device imaginable would be incredibly difficult
because there are many devices of differing shapes and sizes. In addition, new devices
are released with new screen sizes every year.
Rather than set breakpoints based on specific devices, the best practice is to resize your
browser to view where the website naturally breaks based on its content. The
dimensions at which the layout breaks or looks odd become your media query
breakpoints. Within those breakpoints, we can adjust the CSS to make the page resize
and reorganize.
By observing the dimensions at which a website naturally breaks, you can set media
query breakpoints that create the best possible user experience on a project by project
basis, rather than forcing every project to fit a certain screen size. Different projects
have different needs, and creating a responsive design should be no different.
CSS Transitions
After a website is displayed, the visual appearances of various elements can
change for many reasons. For example:
 Moving your mouse over a link may change the color or appearance of
that link.
 Changing the size of the window may change the layout.
 Scrolling causes some elements to disappear and others to appear.
With CSS transitions, we can control how these changes happen.
These changes are a type of state change. CSS transitions allow us to control the
timing of visual state changes. We can control the following four aspects of an
element’s transition:
 Which CSS properties transition

 How long a transition lasts
 How much time there is before a transition begins
 How a transition accelerates
Duration
To create a simple transition in CSS, we must specify two of the four aspects:
1. The property that we want to transition.

2. The duration of the transition.
a{
transition-property: color;
transition-duration: 1s;
}
In the example above, transition-property declares which CSS property we will be

transitioning, the text color. The second property, transition-duration, declares
how long the transition will take — one second.
Many properties’ state changes can be transitioned. The type of transition

depends on the property you choose. For a complete list of all animated
properties, see this resource.
Different properties transition in different ways, for example:
 Color values, like color and background-color, will blend to a new color.
 Length values like font-size, width, and height will grow or shrink.
Duration is specified in seconds or milliseconds, such as 3s, 0.75s, 500ms. The
default value is 0s, or instantaneous, as if there is no transition.
When choosing a duration, think about how long actions take in real life. For
example, a human eye blink takes around 400ms. People might expect the
animation of clicking a button to be as sudden as a blink.
Timing Function
The next transition property is transition-timing-function. The timing function describes

the pace of the transition.
The default value is ease, which starts the transition slowly, speeds up in the middle, and
slows down again at the end.
Other valid values include:
 ease-in — starts slow, accelerates quickly, stops abruptly
 ease-out — begins abruptly, slows down, and ends slowly
 ease-in-out — starts slow, gets fast in the middle, and ends slowly
 linear — constant speed throughout
transition-duration: 1s;
transition-timing-function: ease-out;
In the example above, the text color will be animated over one second. The timing
function is ease-out which means it will begin abruptly and slow down as it ends.
If you’re interested in learning more about timing functions or seeing a full list of the
possible values, we recommend this resource from the Mozilla Developer Network.
Delay
Our last transition property is transition-delay. Much like duration, its value is an amount
of time. Delay specifies the time to wait before starting the transition. As with the
duration property, the default value for transition-delay is 0s, which means no delay.
transition-property: width;
transition-duration: 750ms;
transition-delay: 250ms;
In the example above, a change in the width of the element will start after a quarter of
a second, and it will animate over three quarters of a second.
Shorthand
Now that we’ve explored each transition property, you may find yourself with many CSS
rule sets that look like the code below.
transition-duration: 1.5s;
transition-timing-function: linear;
transition-delay: 0.5s;
Because these four properties are so frequently declared together, CSS provides a
property that can be used to declare them all in one line: transition. This shorthand
property describes each aspect of the transition puzzle in a single declaration. The
properties must be specified in this order: transition-property, transition-
duration, transition-timing-function, transition-delay.
transition: color 1.5s linear 0.5s;
In the example above, we have refactored the four lines of code in the previous
example into one concise line. This example will cause any change in text color to
transition at constant speed over 1.5 seconds, after a delay of 0.5 seconds.
Leaving out one of the properties causes the default value for that property to be
applied. There is one exception: You must set duration if you want to define delay.
Since both are time values, the browser will always interpret the first time value it sees
as duration.
Combinations
The shorthand transition rule has one advantage over the set of separate transition-
<property> rules: you can describe unique transitions for multiple properties, and
combine them.
To combine transitions, add a comma (,) before the semicolon (;) in your rule. After the
comma, use the same shorthand syntax. For example:
transition: color 1s linear,

font-size 750ms ease-in 100ms;
The above code transitions two properties at once. The text color transitions over one
second with linear timing and no delay. At the same time, the font size transitions over
750 milliseconds with an ease-in timing and a 100 millisecond delay. This “chaining” is a
powerful tool for expressing complicated animations.
All
Even with the shorthand, specifying transitions for many properties can be tedious. It is
common to use the same duration, timing function, and delay for multiple properties.
When this is the case you can set the transition-property value to all. This will apply the
same values to all properties. To effect this, you can use all as a value for transition-
property.
all means every value that changes will be transitioned in the same way. You can
use all with the separate transition properties, or the shorthand syntax. This allows you
to describe the transition of many properties with a single line:
transition: all 1.5s linear 0.5s;
In this example, any change will be animated over one and a half seconds after a half-
second delay with linear timing.
CSS Animations
CSS animations are made up of two basic building blocks.
1. Keyframes - define the stages and styles of the animation.

2. Animation Properties - assign the @keyframes to a specific CSS element and
define how it is animated.
Let’s look at each individually.
Building Block: Keyframes
Keyframes are the foundation of CSS animations. They define what the animation looks
like at each stage of the animation timeline. Each @keyframes is composed of:
 Name of the animation: A name that describes the animation, for

example, bounceIn.
 Stages of the animation: Each stage of the animation is represented as a
percentage. 0% represents the beginning state of the animation. 100%
represents the ending state of the animation. Multiple intermediate states can
be added in between.
 CSS Properties: The CSS properties defined for each stage of the animation
timeline.
Let’s take a look at a simple @keyframes I’ve named “bounceIn”. This @keyframes has
three stages. At the first stage (0%), the element is at opacity 0 and scaled down to 10
percent of its default size, using CSS transform scale. At the second stage (60%) the
element fades in to full opacity and grows to 120 percent of its default size. At the final
stage (100%), it scales down slightly and returns to its default size.
The @keyframes are added to your main CSS file.

@keyframes bounceIn {
0% {
transform: scale(0.1);
opacity: 0;
}
60% {
transform: scale(1.2);
opacity: 1;
}
100% {
transform: scale(1);
}
}
Building Block: Animation Properties
Once the @keyframes are defined, the animation properties must be added in order for
your animation to function.
Animation properties do two things:
1. They assign the @keyframes to the elements that you want to animate.
2. They define how it is animated.
The animation properties are added to the CSS selectors (or elements) that you want to
animate. You must add the following two animation properties for the animation to
take effect:
 animation-name: The name of the animation, defined in the @keyframes.

 animation-duration: The duration of the animation, in seconds (e.g., 5s) or
milliseconds (e.g., 200ms).
Continuing with the above bounceIn example, we’ll add animation-name and
animation-duration to the div that we want to animate.
div {
animation-duration: 2s;
animation-name: bounceIn;
}
Shorthand syntax:
div {
animation: bounceIn 2s;
}
By adding both the @keyframes and the animation properties, we have a simple
animation!
Animation Property Shorthand
Each animation property can be defined individually, but for cleaner and faster code,
it’s recommended that you use the animation shorthand. All the animation properties
are added to the same animation: property in the following order:
animation: [animation-name] [animation-duration] [animation-timing-function]

[animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-
mode] [animation-play-state];
Just remember for the animation to function correctly, you need to follow the proper
shorthand order AND specify at least the first two values.
Additional Animation Properties
In addition to the required animation-name and animation-duration properties, you

can further customize and create complex animations using the following properties:
 animation-timing-function
 animation-delay
 animation-iteration-count
 animation-direction
 animation-fill-mode
 animation-play-state
Let’s look at each of them individually.
Animation-timing-function
The animation-timing-function: defines the speed curve or pace of the animation.

You can specify the timing with the following predefined timing options:
ease, linear, ease-in, ease-out, ease-in-out, initial, inherit. (Or for more advanced
timing options, you can creating custom timing functions using cubic-bezier curve.)
The default value, if no other value is assigned, is ease, which starts out slow, speeds
up, then slows down. You can read a description of each timing function here.
CSS syntax:
animation-timing-function: ease-in-out;
Animation shorthand syntax (recommended):
animation: [animation-name] [animation-duration] [animation-timing-function];

animation: bounceIn 2s ease-in-out;
Animation-delay
The animation-delay: allows you to specify when the animation (or pieces of the
animation) will start. A positive value (such as 2s) will start the animation 2 seconds
after it is triggered. The element will remain unanimated until that time. A negative
value (such as -2s) will start the animation at once, but starts 2 seconds into the
animation.
The value is defined in seconds (s) or milliseconds (ms).
CSS syntax:
animation-delay: 5s;

[animation-delay];
animation: bounceIn 2s ease-in-out 3s;
Animation-iteration-count
The animation-iteration-count: specifies the number of times that the animation will
play. The possible values are:
#- a specific number of iterations (default is 1)
infinite - the animation repeats forever
initial - sets the iteration count to the default value
inherit - inherits the value from the parent
CSS syntax:
animation-iteration-count: 2;

[animation-delay] [animation-iteration-count];
animation: bounceIn 2s ease-in-out 3s 2;
Animation-direction
The animation-direction: property specifies whether the animation should play

forward, reverse, or in alternate cycles. The possible values are:
- normal (default) - The animation plays forward. On each cycle the animation
resets to the beginning state (0%) and plays forward again (to 100%).
- reverse - The animation plays backwards. On each cycle the animation resets to
the end state (100%) and plays backwards (to 0%).
- alternate - The animation reverses direction every cycle. On each odd cycle, the
animation plays forward (0% to 100%). On each even cycle, the animation plays
backwards (100% to 0%).
- alternate-reverse - The animation reverses direction every cycle. On each odd
cycle, the animation plays in reverse (100% to 0%). On each even cycle, the
animation plays forward (0% or 100%).
CSS syntax:
animation-direction: alternate;

[animation-delay] [animation-iteration-count] [animation-direction];
animation: bounceIn 2s ease-in-out 3s 3 alternate;
Animation-fill-mode
The animation-fill-mode: specifies if the animation styles are visible before or after the
animation plays. This property is a little confusing, but once understood it is very useful.
By default, the animation will not effect the styles of the element before the animation
begins (if there is an animation-delay) or after the animation is finished. The animation-
fill-mode property can override this behavior with the following possible values:
- backwards - Before the animation (during the animation delay), the styles of
the initial keyframe (0%) are applied to the element.
- forwards - After the animation is finished, the styles defined in the final
keyframe (100%) are retained by the element.
- both - The animation will follow the rules for both forwards and backwards,
extending the animation properties before and after the animation.
- normal (default) - The animation does not apply any styles to the element,
before or after the animation.
CSS syntax:
animation-fill-mode: forwards;

[animation-delay] [animation-iteration-count] [animation-direction]
[animation-fill-mode];
animation: bounceIn 2s ease-in-out 3s 3 forwards;
Animation-play-state
The animation-play-state: specifies whether the animation is playing or paused.

Resuming a paused animation starts the animation where it was left off.
The possible values are:
- playing - The animation is currently running

- paused - The animation is currently paused
Example :
.div:hover {
animation-play-state: paused;
}
Multiple Animations
To add multiple animations to a selector, you simply separate the values with a comma.
Here’s an example:
.div {
animation: slideIn 2s, rotate 1.75s;
}

Documentation: Font-Weight

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Documentation: Font-Weight

Uploaded by

Copyright:

Available Formats

Documentation

Documentation is an essential tool to learn about properties. However, what if you

To search for a question on Stack Overflow, type your question and

<p style='color: red;'>I'm learning to code!</p>

<p style='color: red; font-size: 20px;'>I'm learning to code!</p>

Linking the CSS File

<link href='https://www.codecademy.com/stylesheets/style.css' rel='stylesheet'>

<link href='./style.css' rel='stylesheet'>

Using a relative path is very common way of linking a stylesheet.

Tooltips and Titles

Codecademy is the best place to learn to code!

In the previous lesson, you changed the color of a paragraph element.

Some important notes on the type selector:

 The type selector does not include the angle brackets.

<p class='brand'>Sole Shoe Company</p>

<h1 class='green bold'> ... </h1>

<h1 id='large-title'> ... </h1>

The id name is large-title, therefore the CSS selector for it is #large-title.

Attributes can be selected similarly to types, classes, and IDs.

A pseudo-class can be attached to any selector. It is always written as a colon : followed

Classes and IDs

<h1 class='headline'>Breaking News</h1>

In addition to chaining selectors to select elements, CSS also supports selecting

Chaining and Specificity

Consider the following CSS:

Web Safe Fonts

Fallback Fonts and Font Stacks

Serif and Sans-Serif

Web Fonts Using <link>

Web Fonts Using @font-face

 OTF (OpenType Font)

 TTF (TrueType Font)

 WOFF (Web Open Font Format)

 WOFF2 (Web Open Font Format 2)

Let’s take a look at the example above, line by line:

 The @font-face at-rule is used as the selector. It’s recommended to define

 bold: Bold font weight.

 normal: Normal font weight. This is the default value.

 center — centers text inside of its parent element.

 right — aligns text to the right side of its parent element.

You can also italicize text with the font-style property.

Color and Background Color

 color: this property styles an element’s foreground color

 background-color: this property styles an element’s background color

Hue, Saturation, and Lightness

color: hsl(120, 60%, 70%);

Opacity and Alpha

color: hsla(34, 100%, 50%, 0.1);

color: rgba(234, 45, 98, 0.33);

1. The background-image property will set the element’s background to display an

2. The value provided to background-image is a url. The url should be a URL to an

!important can be applied to specific declarations, instead of full rules. It will

The Box Model

Height and Width

 width—The thickness of the border. A border’s thickness can be set in pixels or

You can specify these properties in a few different ways:

Similar to padding shorthand, margin shorthand lets you specify all of

You can specify these properties in a few different ways:

 300 pixels wide

 200 pixels tall

 10 pixels padding on the left and right

 10 pixels padding on the top and bottom

 2 pixels border on the top and bottom