CSS

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. — like the anchor element, the value of this attribute must

href
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.

<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:

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.

SELECTORS

Universal

The universal selector uses the * character in the same place

where you specified the type selector in a ruleset, like so:

* {
font-family: Verdana;
}

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

To select this element using CSS, we can create a ruleset with a class
selector of .brand.

.brand {
}

Multiple Classes

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.

NOTA: Navigate to style.css, and add a ruleset using

the .uppercase class selector. Then, add the declaration below
inside of the curly braces.

text-transform: uppercase;
Checkpoint 3 Passed

ID
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 (#).

#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,

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

[href]{
color: magenta;
}

[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.

<img src='/images/seasons/cold/winter.jpg'>
<img src='/images/seasons/warm/summer.jpg'>

img[src*='winter'] {
height: 50px;
}
img[src*='summer'] {
height: 100px;

NOTA: To use the attribute selector to select the <a> element with
an href attribute value containing ‘florence’, add the following code
to style.css:
a[href*='florence'] {
color: lightgreen;
}

Pseudo-class

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 give
elements a different state with.

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.

Specificity

Specificity is the order by which the browser decides which CSS styles
will be displayed.

IDs are the most specific selector in CSS, followed by classes,

and finally, type.

<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.

Over time, as files grow with code, many elements may have IDs, which can make CSS
difficult to edit since a new, more specific style must be created to change the style of an
element.
To make styles easy to edit, it’s best to style with a type
selector, if possible. If not, add a class selector. If that is not
specific enough, then consider using an ID selector.

Chaining

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.

<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 {

Chaining and Specificity

In the last exercise, instead of selecting all <h5> elements, you
selected only the <h5> elements nested inside
the .description elements. This CSS selector was more specific than
writing only h5. Adding more than one tag, class, or ID to a CSS
selector increases the specificity of the CSS selector.
For instance, 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 {
font-family: Georgia;}

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 {
font-family: Georgia;
}
VISUAL RULES
Font Family
h1 {
font-family: Garamond;
}
When setting typefaces on a web page, keep the following points in
mind:
  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';
}

Font Size

p {
font-size: 18px;
}

Font Weight

In CSS, the font-weight property controls how bold or thin text

appears.

p {
font-weight: bold;
}

Text Align

The text-align property will align text to the element that holds it,
otherwise known as its parent.

h1 {
text-align: right;
}

 left —center —right —justify—

Color and Background Color

 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;
}
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.

.overlay {
opacity: 0.5;
}
In the example above, the .overlay element would be 50%
visible, letting whatever is positioned behind it show through.

Background Image
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');
}

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.

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;
}
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;
}

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;
}
Border Radius

Thanks to CSS, a border doesn’t have to be square.

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;
}
The code in the example above will set all four corners of the border
to a radius of 5 pixels (i.e. the same curvature that a circle with a
radius of 5 pixels would have).
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

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.

If you want to be more specific about the amount of padding on each

side, use:

 padding-top
 padding-right
 padding-bottom
 padding-left

Each property affects the padding on only one side of the box’s
content, giving you more flexibility in customization.

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.

4 Values

p.content-header {
padding: 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;
}
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;
}
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.

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.
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.

Margin Shorthand
4 Values

p {
margin: 6px 10px 5px 12px;
}
The amount of padding 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;
}
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;
}
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.

Minimum and Maximum Height and Width

Because a web page can be viewed through displays of differing

screen size, the content on the web page can suffer from those
changes in size. To avoid this problem, CSS offers two properties that
can limit how narrow or how wide an element’s box can be sized to:

 min-width—max-width—

p {
min-width: 300px;
max-width: 600px;
}
In the example above, the width of all paragraphs will not shrink
below 300 pixels, nor will the width exceed 600 pixels.

Content, like text, can become difficult to read when a browser

window is narrowed or expanded. These two properties ensure that
content is legible by limiting the minimum and maximum widths of an
element.

You can also limit the minimum and maximum height of an element:

 min-height —max-height —

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.

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.

Resetting Defaults
All major web browsers have a default stylesheet they use in the
absence of an external stylesheet.

* {
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.

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.

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 solid black;
height: 200px;
width: 300px;
padding: 10px;
}
In the example above, the height of the box would remain at 200
pixels and the width would remain at 300 pixels. The border thickness
and padding would remain entirely inside of the box.
 DISPLAY AND POSITIONING

Position

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.

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

Position: 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;
}

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).

It’s important to note that offset properties will not work if the
element’s position property is the default static.
.green-box {
background-color: green;
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

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.

The “Website building 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:

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 {
background-color: blue;
}

.green-box {
background-color: green;
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.

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 {
background-color: blue;
position: relative;
z-index: 1;
}

.green-box {
background-color: green;
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 the example image below:

Inline Display
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.

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.

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
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.

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

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:

<div class="rectangle">
<p>I’m a rectangle!</p>
</div>
<div class="rectangle">
<p>So am I!</p>
</div>
<div class="rectangle">
<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

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.

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.

COLOR

Hexadecimal
One syntax that we can use to specify colors is called hexadecimal. 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.

Notice that black, white, and aqua are all represented with both three
characters and six characters. This can be done with hex colors
whose number pairs are the same characters.

RGB Colors

There is another syntax for representing RGB values,, 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.

Hue, Saturation, and Lightness

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. You can see an example of a
color wheel below.

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. 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 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.

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);

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;

Linear Gradient

One thing to remember is that the linear-gradient function actually creates

an image element, and is usually paired with the background property which
can accept an image as a value.

linear-gradient(gradientDirection, color1, color2, ...);

gradientDirection is the direction of the line used for the

transition. color1 and color2 are color arguments, which are the colors that
will be used in the transition itself. These can be any type of color, including
color keywords, hex, rgb, or hsl.

Now you'll apply a red-to-green gradient along a 90 degree line to the first
marker.

First, in the .red CSS rule, set the background property to linear-
gradient(), and pass it the value 90deg as the gradientDirection.

You'll use the rgb function for the colors of this gradient.

In the linear-gradient function, use the rgb function to set the first color
argument to pure red.
You won't see gradient yet because the linear-gradient function needs at
least two color arguments to work.

In the same linear-gradient function, use the rgb function to set the
second color argument to pure green.

.red {
background: linear-gradient(90deg, rgb(255, 0, 0), rgb
(0, 255,0));
}

Color Stops
Color-stops allow you to fine-tune where colors are placed along the gradient
line. They are a length unit like px or percentages that follow a color in
the linear-gradient function.

For example, in this red-black gradient, the transition from red to black takes
place at the 90% point along the gradient line, so red takes up most of the
available space:

linear-gradient(90deg, red 90%, black);

.red {
background: linear-gradient(90deg, rgb(255, 0, 0)
75%, rgb(0, 255, 0), rgb(0, 0, 255));

Box Shadow
The box-shadow property lets you apply one or more shadows around an
element. Here is basic syntax:

box-shadow: offsetX offsetY color;

Start by adding a simple shadow to the red marker.

In the .red CSS rule, add the box-shadow property with the
values 5px for offsetX, 5px for offsetY, and red for color.

 offset-x (how far to push the shadow horizontally from the element),
 offset-y (how far to push the shadow vertically from the element),

As you can see, you added a simple red shadow around your marker
that's 5 pixels to the right, and 5 pixels down.

But what if you wanted to position your shadow on the opposite side?
You can do that by using negative values for offsetX and offsetY.

Notice that the edges of the shadow are sharp. This is because there is an
optional blurRadius value for the box-shadow property:

box-shadow: offsetX offsetY blurRadius color;

If a blurRadius value isn't included, it defaults to 0 and produces sharp

edges. The higher the value of blurRadius, the greater the blurring effect
is.

But what if you wanted to expand the shadow out further? You can do that with
the optional spreadRadius value:

box-shadow: offsetX offsetY blurRadius spreadRadius color;

Like blurRadius, spreadRadius defaults to 0 if it isn't included.

Practice by adding a 5 pixel shadow directly around the blue marker.

TYPOGRAPHY
Font Family
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';
}

Serif and Sans-Serif

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.

Font Weight
In CSS, the font-weight property controls how bold or thin text
appears

The font-weight property can take any one of these keyword values:

 bold--normal: lighter
 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;
}
Font Style

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

h3 {
font-style: italic;
}

Text Transformation
Text can also be styled to appear in either all uppercase or
lowercase or capitalize with the text-transform property.

h1 {
text-transform: uppercase;
}

Text Decoration
To underline text, you can use the u tag. This is often used to signify that a
section of text is important, or something to remember. With the u tag, the
browser applies the CSS of

h1 {
text-decoration: underlined;
}
Text Layout

Letter Spacing

The letter-spacing property is used to set the horizontal spacing

between the individual characters in an element. The letter-
spacing property takes length values in units, such
as 2px or 0.5em.

p {
letter-spacing: 2px;
}

Word Spacing

You can set the space between words with the word-spacing property.
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;
}

Web Fonts Using <link>

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>
<!-- Add the link element for Google Fonts along with
other metadata -->
<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. 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.

Within the “Selected Families” section, you can use the “Download”
button to download the font files to your computer. The files will be
downloaded as a single format, in this case, TTF. You can use a tool
such as Google Web Fonts Helper to generate additional file types for
WOFF and WOFF2.

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.

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'.

--------------------------------//---------------------------------

RESPONSIVE WEB DESIGN

Media Queries

Media Queries change the presentation of content based on different viewport

sizes. The viewport is a user's visible area of a web page, and is different
depending on the device used to access the site.

@media only screen and (max-width: 480px) {

body {
font-size: 12px;
}
}
The media query defines a rule for screens smaller than 480 pixels
(approximately the width of many smartphones
in landscape orientation).
Range

Specific screen sizes can be targeted by setting multiple width and

height media features. min-width and min-height.

@media only screen and (min-width: 320px) and (max-width: 480px)

{
/* ruleset for 320px - 480px */
}
Apply its CSS rules only when the screen size is between 320 pixels
and 480 pixels.

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.

Dots Per Inch (DPI)

Another media feature we can target is screen resolution. 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).

@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
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.

@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.

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

@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.
Make an Image Responsive
Making images responsive with CSS is actually very simple. You just need to
add these properties to an image:

img {
max-width: 100%;
height: auto;
}
The max-width of 100% will make sure the image is never wider than the
container it is in, and the height of auto will make the image keep its
original aspect ratio.

Use a Retina Image for Higher Resolution

Displays
The simplest way to make your images properly appear on High-
Resolution Displays, such as the MacBook Pros "retina display" is to
define their width and height values as only half of what the original file
is. Here is an example of an image that is only using half of the original height
and width:

<style>
img { height: 250px; width: 250px; }
</style>
<img src="coolPic500x500" alt="A most excellent picture">

Make Typography Responsive

Instead of using em or px to size text, you can use viewport units for responsive
typography. Viewport units, like percentages, are relative units, but they are
based off different items. Viewport units are relative to the viewport dimensions
(width or height) of a device, and percentages are relative to the size of the
parent container element.

The four different viewport units are:

 vw (viewport width): 10vw would be 10% of the viewport's width.

 vh (viewport height): 3vh would be 3% of the viewport's height.
  vmin (viewport minimum): 70vmin would be 70% of the viewport's
smaller dimension (height or width).
 vmax (viewport maximum): 100vmax would be 100% of the viewport's
bigger dimension (height or width).

Here is an example that sets a body tag to 30% of the viewport's width.

body { width: 30vw; }

--------------------------------//---------------------------------

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.

To designate an element as a flex container, set the

element’s display property to flex or inline-flex.

display: flex

Any element can be a flex container. Flex containers are helpful

tools for creating websites that respond to changes in screen
sizes.

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.
inline-flex

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.

<div class='container'>
<p>I’m inside of a flex container!</p>
<p>A flex container’s children are flex items!</p>
</div>
<div class='container'>
<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.

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='container'>
<div class='child'>
<h1>1</h1>
 </div>
<div class='child'>
<h1>2</h1>
</div>
</div>
.container {
width: 200px;
}

.child {
display: inline-flex;
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

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.

 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.
 Space-evenly
align-items

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.

 flex-start —flex-end —center —.

 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).

flex-grow

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='container'>
<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.

This property — flex-grow — is the first we have learned that is

declared on flex items.

flex-shrink

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='container'>
<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-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='container'>
<div class='side'>
<h1>Left side!</h1>
</div>
<div class='center'>
<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.

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. — child elements of a flex container that don’t fit into a row

wrap
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
3. nowrap — prevents items from wrapping; this is the default
value.

<div class='container'>
<div class='item'>
<h1>We're going to wrap!</h1>
</div>
<div class='item'>
<h1>We're going to wrap!</h1>
</div>
<div class='item'>
<h1>We're going to wrap!</h1>
</div>
</div>
.container {
display: inline-flex;
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. The 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—flex-end —center —space-between —space-around

 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='container'>
<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.

align-self

This property allows you to adjust each item's alignment individually, instead of
setting them all at once. This is useful since other common adjustment
techniques using the CSS properties float, clear, and vertical-align do
not work on flex items.

align-self accepts the same values as align-items and will override

any value set by the align-items property.

#box-2 {
background-color: orangered;
align-self: flex-end;
height: 200px;
width: 200px;

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='container'>
<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. — elements will be positioned from left to right across the

row
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;
flex-direction: column;
}

.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='container'>
<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 {
display: inline-flex;
flex: 2 1 200px;
flex-direction: column;
}
.right {
display: inline-flex;
flex: 1 2 400px;
align-items: center;
}
.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.

--------------------------------//---------------------------------
 CSS GRID
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.

Creating a Grid

To set up a grid, you need to have both a grid container and grid
items.

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.

Creating Columns

By default, grids contain only one column.

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 pixels, and 60 pixels:

.grid {
display: grid;
width: 100px;
grid-template-columns: 20px 40% 60px;
}

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!

Creating Rows

This property is almost identical to grid-template-columns.

.grid {
display: grid;
width: 1000px;
height: 500px;
grid-template-columns: 100px 200px;
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.

Grid Template

The shorthand property, grid-template, can replace the previous two

CSS properties. Both grid-template-rows and grid-template-columns.

.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.

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.

.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
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 does 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.

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.

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.

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

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 occupy rows two and three and
columns three through eight.

--------------------------------//---------------------------------

ADVANCED CSS GRID

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: "head head"
"nav nav"
"info services"
"footer footer";
grid-template-rows: 300px 120px 800px 120px;
grid-template-columns: 1fr 3fr;
}
header {
grid-area: head;
}
nav {
grid-area: nav;
}
.info {
grid-area: info;
}
.services {
grid-area: services;
}
footer {
grid-area: footer;
}

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.

Overlapping Elements

When overlapping elements, it is generally easiest to use the grid-

area property with grid row names.

<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
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.

justify-itemsis 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. start — aligns grid items to the left side of the grid
area—end — center —

 stretch — stretches all items to fill the grid area

<main>
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
</main>
main {
display: grid;
grid-template-columns: repeat(3, 400px);
 justify-items: center;
}

1. 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).
2. If we specify a width for the .card elements, they will not stretch the
width of their column.

Justify Content
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.

 start — aligns the grid to the left side of the grid container— end —
center —
 stretch — stretches the grid items to increase the size of the grid to
expand horizontally across the container
 space-around —space-between —
 space-evenly — places an even amount of space between grid items
and at either end

<main>
<div class="left">Left</div>
<div class="right">Right</div>
</main>
main {
display: grid;
width: 1000px;
grid-template-columns: 300px 300px;
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
Now we’ll learn how to position grid items from top to bottom!
 is a property that positions grid items along the block, or
align-items
column axis. This means that it positions items from top to bottom.

 start — aligns grid items to the top side of the grid area— end —
center —
 stretch — stretches all items to fill the grid area

<main>
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
</main>
main {
display: grid;
grid-template-rows: repeat(3, 400px);
align-items: center;
}
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. 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).
3. 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 declared on grid containers.

It accepts these positional values:

 start — aligns the grid to the top of the grid container— end —
center —
 stretch — stretches the grid items to increase the size of the grid to
expand vertically across the container
 space-around —space-between —space-evenly — places an even amount
of space between grid items and at either end

<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.

 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)

Implicit vs. Explicit Grid

What happens if the developer has specified a 3-column, 5-row grid

(for a total of 15 items), but the search results return 30?

Something called the implicit grid takes over. The implicit grid is an
algorithm built into the specification for CSS Grid that determines
default behavior for the placement of elements when there are more
than fit into the grid specified by the CSS.

The default behavior of the implicit grid is as follows: items fill up

rows first, adding new rows as necessary. New grid rows will only be
tall enough to contain the content within them.
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 :

 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-flowspecifies 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;.

--------------------------------//---------------------------------

CSS TRANSITIONS
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;
}

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.

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.

 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-property: color;
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.

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. 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

transition-property: color;
transition-duration: 1.5s;
transition-timing-function: linear;
transition-delay: 0.5s;

The properties must be specified in this order: transition-

property, transition-duration, transition-timing-function, transition-delay.

transition: color 1.5s linear 0.5s;

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.

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

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.

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.

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.

--------------------------------//---------------------------------

SIZING ELEMENTS
Em
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.

.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;
}
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

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.

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.

Scaling Images and Videos

Many websites contain a variety of different media, like images and

videos. 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).

Scaling Background Images

Background images of HTML elements can also be scaled .

body {
background-image: url('#');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}

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.
 FREECODECAMP

NOTA: Change the width property's value to be 80%, to make it is 80% the
width of its parent element (body).

NOTA: You change properties of a link when the link has actually been visited
by using a pseudo-selector that looks like a:visited { propertyName:
propertyValue; }.

Change the color of the footer Visit our website link to be grey when
a user has visited the link.

NOTA: You change properties of a link when the mouse hovers over them by
using a pseudo-selector that looks like a:hover { propertyName:
propertyValue; }.

Change the color of the footer Visit our website link to

be brown when a user hovers over it.
NOTA: You change properties of a link when the link is actually being clicked
by using a pseudo-selector that looks like a:active { propertyName:
propertyValue; }.

Change the color of the footer Visit our website link to

be white when clicked on.

NOTA: The menu text CAMPER CAFE has a different space from the top than
the address at the bottom of the menu. This is due to the browser having
some default top margin for the h1 element.

Change the top margin of the h1 element to 0 to remove all the top
margin.

NOTA: It would be nice if the vertical space between the h2 elements and their
associated icons was smaller. The h2 elements have default top and bottom
margin space, so you could change the bottom margin of the h2 elements
to say 0 or another number.

There is an easier way, simply add a negative top margin to

the img elements to pull them up from their current positions. Negative
values are created using a - in front of the value.

NOTA: Add a Negative Margin to an Element

If you set an element's margin to a negative value, the element will grow
larger.

NOTA: For this challenge, you will use the [attr=value] attribute selector to
style the checkboxes in CatPhotoApp. This selector matches and styles
elements with a specific attribute value. For example, the below code changes
the margins of all elements with the attribute type and a corresponding value
of radio:

[type='radio'] {

margin: 20px 0px 20px 0px;}

NOTA: Select only the .inline elements, and give them width of unset.
This will remove the earlier rule which set all the input elements
to width: 100%.

Use the CSS Transform scale Property to

Change the Size of an Element
To change the scale of an element, CSS has the transform property,
along with its scale() function. The following code example doubles
the size of all the paragraph elements on the page:

p {
transform: scale(2);
}

Use the CSS Transform Property skewX to Skew an

Element Along the X-Axis(Colocar na Diagonal)

The next function of the transform property is skewX(), which skews the
selected element along its X (horizontal) axis by a given degree.

The following code skews the paragraph element by -32 degrees along the X-
axis.

p {
transform: skewX(-32deg);
}

Use the CSS Transform rotate Property to Rotate an

Element

Rotate each rectangle to give them more of an imperfect, hand-painted look.

Use the transform property on the .one selector to rotate it counter

clockwise by 0.6 degrees.
transform: rotate(0.6deg);

Create a More Complex Shape Using CSS and HTML

::before creates a pseudo-element that is the first child of the selected
element; ::after creates a pseudo-element that is the last child of the
selected element. In the following example, a ::before pseudo-element is
used to add a rectangle to an element with the class heart:

.heart::before {
content: "";
background-color: yellow;
border-radius: 25%;
position: absolute;
height: 50px;
width: 70px;
top: -50px;
left: 5px;
For the ::before and ::after pseudo-elements to function properly, they
must have a defined content property. This property is usually
used to add things like a photo or text to the selected element.

When the ::before and ::after pseudo-elements are used to make

shapes, the content property is still required, but it's set to an empty
string.

In the above example, the element with the class of heart has
a ::before pseudo-element that produces a yellow rectangle with height
and width of 50px and 70px, respectively. This rectangle has round
corners due to its 25% border-radius and is positioned absolutely
at 5px from the left and 50px above the top of the element.