Coding Skills

I. Build your first web pages with HTML and CSS.

1. Write your first lines of HTML and CSS.

HTML (Hypertext Mark-up Language) is the tool which will allow you to build webpages
and CSS (Cascading Style Sheets) is what you use to make them look the way you want them to.

The separation is exactly the same as newspaper for web pages. You have:

 Content
 Its appearance

HTML is the language that handles the first concern: creating structured content to tell a story.

CSS covers the second concern: customizing the appearance of that content to visually bring it to life.

Example:

 Simple text with HTML or CSS

 Same text structured with HTML

 Same structured text with some decoration with CSS

 2. Create content using HTML.

Unstructured and structured text.

The content on the right tells a better story! It shows hierarchy of information, and the content is
more understandable thanks to this structure. This, on the web, is accomplished by writing good
HTML.

Search engines like Google read your website's code in order to figure out what the page is about.
That way, when users search for something, your website will appropriately be shown in the list of
results. Your browser also reads your code in order to show elements in a certain way. If you don't
write clear HTML, your site won't be readable because browsers won't know what to do with it. End
of story.

Basic HTML syntax.

HTML uses tags in order to describe each piece of content on a webpage.

 <h1>

In HTML, this first set of characters is called an opening tag. Whatever comes between the < and >
signs indicate which type of element you're creating. h1 is a heading, for example, and it's the most
powerful (biggest) heading possible.

After an opening tag, you'll often have the text content that will be shown. In this heading, the text
"Camping essentials" is shown as a heading as specified in the opening tag.

 </h1>

This final set of characters in HTML is a closing tag. It indicates that you've concluded this particular
element. It should be identical to the opening tag except with a forward slash after the <.

Therefore, when you write HTML code for an example article on camping supplied:

You end up with this result:

Almost every HTML element you write will follow this pattern (opening tag, content, closing tag).

Example:

<p> is the opening tag in the above example (therefore, </p> is the closing tag). The content in the
middle becomes a paragraph because "p" stands for "paragraph".

HTML elements names are often abbreviations of the kind of content they represent.

3. Decorate your content with CSS.

CSS stands for Cascading Style Sheets.

Styles are like decoration. All of the colours, spacing, placement… is style.

You also use CSS to create a layout for your site, such as placing a certain section on the left of the
page, determining the size of the navigation bar that appears at the top of your website, or making
multiple sections appear side-by-side in one row.

CSS controls the way different pieces of content are arranged on websites. For example, the fact that
there is a column with articles on the left of the New York Times and newspaper sections arranged in
a horizontal bar (World, U.S., etc.) is not a coincidence! Developers created this layout with CSS:

While CSS is very powerful, it depends on HTML.

CSS applied to HTML.

There are two steps while using CSS to make your HTML look awesome:

 Identify and select the relevant HTML element (ex. paragraph, header, etc).
 Add some styles (specify how it should look).

Let's say we want the text of our paragraph to be blue:

 p: refers to the paragraph tag in HTML, which is <p>.

 colour: blue: colour is a CSS property. Here, we've made the text colour blue.
 font-family: this is also a CSS property to set the font of your text. In the example above, it is
set to Arial.
 {}: curly brackets open and close a set of style rules in CSS.
Example:
 Before (no CSS, just the default HTML appearance)

After (CSS applied to HTML)

Remember:

1) Write your content in HTML.

2) Decorate your content with CSS.

4. Create headings for strong page structure.

To type code and see it online:

 codepen.io

Textual structuring.

Adding structure to a text creates a hierarchy for the content in an immediate, easy-to-understand
way. Apply the same thinking to the text in your web pages by using <h> elements and <p> elements.

Heading elements.

Create headings in HTML by using tags that include a lowercase "h" and a number from 1-6. The
numbers 1-6 let you control the default size of your heading and therefore the importance it has in
your page structure.
As the number from 1-6 increases, the heading becomes smaller!

Remember that <h1> headings often reserved for page titles, smaller headings are to delineate
articles and sub-sections, etc. You should only use one <h1> heading per page so as not to confuse
your reader or browsers/search engines about the page's primary content, but you're free to use the
others as much as you like.

Make sure your opening and closing tags match as you make headings.

5. Add text in paragraphs.

Creating paragraphs is much easier. There's only one default type of paragraph! It’s <p>, verbally
known as a "p" tag.

Even though there are empty lines in the HTML code that separate each paragraph, they count for
nothing – the program can't see them!

This is because HTML collapses whitespace. Even if we add 5 blank lines between simple lines of text,
HTML will still collapse them all onto one another.
In other words, when writing HTML, you must manually create the meaning you want your content
to have by wrapping it in the proper element tags. Because you want paragraphs, you must add <p>
tags. You cannot just add line breaks in your code between text that you want to appear as separate
paragraphs.

You would then go ahead and throw some <p> tags around each paragraph, such as:

Adding a <p> opening tag and a </p> closing tag turns each text block into a paragraph.

6. Strengthen and emphasize text.

In a normal word processing scenario, you can highlight the text you want to make bold or italic and
then click buttons that usually look like this:

This will make your text bold or italic. However, to do the same thing in HTML, we must adjust our
thinking about text appearance.

HTML should add meaning to your content and shouldn't be concerned with your content's pure
appearance. Adding the right HTML tags allows your web content to be viewed by human eyes, but it
also allows browsers and search engines to understand your content – and they don't care how it
looks. Browsers and search engines only look to your HTML in order to tell elements apart from
another. This helps browsers provide a consistent browsing experience across the web.

That's why thinking of text as "bold" or "italicized" doesn't make sense in HTML. "Bold" and
"italicized" only describe text appearance. In reality, transforming text like this adds meaning to
certain words. Making words bold or italicized actually makes certain text more powerful.

The names of the tags you'll use in HTML are <strong> and <em> (for emphasized) to accomplish
your goal of making certain text more powerful.

Strong text.

Bold text is considered to be "strong" in HTML. Surround the text you wish to strengthen with a
<strong> opening tag and a </strong> closing tag.

Whether the text you wish to strengthen appears in the middle of a sentence or is an entire sentence
itself, the tag wrapping process is the same.
Emphasized text.

Strong ("bold") text is useful, but sometimes you need more nuance. Enter emphasized text, which
produces a default result that is visually identical to italicized text. Use the tags <em> and </em>.

7. Add links and understand attributes.

Hyperlinks – "links" for short – are the core of the web. They let you hop from one page to another,
connecting all information online.

It's therefore imperative to learn how to create them in HTML.

<a> tag.

Links are made with an <a> tag, where the "a" stands for "anchor." There is one noteworthy
difference between <a> tags and the others.

Somewhere in this tag, we need to tell the link where it should go when someone clicks it.

Attributes.

HTML elements sometimes require additional information in order to do their jobs. This additional
information lives in attributes.

There are many, many kinds of attributes. The attributes you use will depend on the elements you're
creating. Sometimes, you don't need any attributes at all. For example, when you created h1 tags,
you weren't obligated to give the element additional information.

When you do need to give an element additional information, you add it within the opening tag. In
the case of links, we use an attribute called href:
href is short for Hypertext Reference. This is a goofy name that really only means a URL.

In the illustration above, you see that in order to add an attribute to an element, you must:

 Give name of the attribute (in our case, "href")

 Add an equal sign
 Add the contents of the attribute in quotes (in this example, the URL of the website we want
to link)
Examples:

Broken down, we see:

 The opening <a> tag with the href attribute and its contents inside
 The text which will been seen: Arctic Circle
 The closing </a> tag
In the above code, you'll notice tags inside of tags. This is very common in HTML. The above links will
each appear within a heading or paragraph.

Links that open in a new window.

You'll sometimes want your links to open in new tabs or windows when users click on them. That
way, users also keep the current page open.
To do so, add a second attribute to your <a> tag: the target attribute. By setting target="_blank", you
create a link that opens in a new window.

Don't forget your href attribute as well. Here are the two attributes combined within the same <a>
opening tag:

This produces a link that says "Go to Google Maps" that opens Google Maps in a new tab or window,
while keeping the original web page open as well.

8. Organise elements in a list.

Lists allow you to better structure your text and order information on your web page in a way that is
helpful to the reader as well as to browsers and search engines.

There are two types of lists:

 unordered lists (you may be familiar with them as bulleted lists)

 ordered lists (you may be familiar with them as numbered lists)

HTML allows to create both.

Unordered lists.

Unordered lists are perfect for when you need to show several different items, and the numerical
order of them doesn't matter. You may already think of them as "bulleted lists" or other list forms
where a tiny shape appears in front of each item (a dash, an empty circle, a star, etc).

For example, a general list of fruits could be shown in text form as:

 Bananas
 Blueberries
 Strawberries
 Apples
 Raspberries
 Kiwis
 Pineapples
To create lists like this, the HTML tag <ul> is appropriate. <ul> stands for unordered list.

The <ul> tag is only used to define the type of list you'll be working with. It is not used to individually
define the items in the list. In order to do so, you need another HTML tag: <li>, which stands for list
item.

Therefore, you'll first create your opening and closing <ul> and </ul> tags to indicate you want to
create an unordered list. Then, add your list items using <li> tags inside as follows:
The <li> tags are indented to the right, relative to the <ul> tags, because it's important for code
readability. Developers indent elements when they're inside other elements (they're called "nested
elements" in developer vocab). Because the <li> tags are inside a set of <ul> tags, they are indented
one level.

Ordered lists.

Imagine you'd rather create a list of your favourite fruits. The order of that list would matter.
Alternatively, maybe you want to create a step-by-step list of how to do something or the top 10
reasons to visit a city. In either example, the order of the list items matters.

Numbers are useful in these cases.

Create numbered lists using the tag <ol>. <ol> stands for ordered list. As usual, wrap your list items in
an <ol> opening tag and </ol> closing tag.
Note that there is no need to manually type "1., 2., 3., etc." before each list item. Surrounding the list
items with ordered list tags is enough. The tag handles the numbers! HTML adds the numbers
automatically to convey meaning through your list.

Choosing which type of list to use.

Example: You’re building a new page for your company that lists the steps necessary to create an
account. Which kind of list would make sense, unordered or ordered?

Here’s the HTML for both:

An ordered list makes more sense! Since the order of the steps matters, your HTML should reflect
this. Surround your <li> (list items) with <ol> opening and closing tags.

9. Add images to your website.

A picture is worth a thousand words! That's why you'll likely include images in your web pages at
some point, whether it's to display a user's profile picture, show a vacation photo, add some visual
enhancement to an article, or something else!

Creating images in HTML will allow us to re-explore attributes because, as you saw with links, they
are necessary for the image element to actually show anything.

The <img> tag

Everything in HTML is added via a tag. Additionally, every tag until now has had a closing tag. For
example, to show a paragraph, you have both a <p> opening tag and </p> closing tag around the
content.

The tag for images, which is <img>, is different in this regard. Image tags can just stand by
themselves: <img>. No closing tag is necessary.

All the information necessary for the image to be displayed is placed in the attributes of the first tag.
You will often see three attributes on images:

 src
 alt
 title
Here's what the HTML for an image might look like:
The src attribute.

The first attribute to include in an <img> element is src. The contents of the src attribute
indicate where the image is stored. An image can be loaded from:

 A URL that's already online (like an image on another website)

 A file that's loaded from elsewhere in your codebase
Either way, you're loading a file. The only difference is how you describe its location. Take the above
photo as an example.

Pay attention to the If you loaded the image from Wikimedia directly, you could write the following
within your img tag:

If you saved the image among your own files, you could write:

Storing images in among your own files is a good habit to get into (but only if you have the rights to
the image! More on that in the next chapter). Even if Wikimedia were to remove the image above
from their site or change the link, you'd still have it in your own files and would thus be spared the
embarrassment of a broken image.

The alt attribute.

Once you have told the <img> tag where the image is located (via the src attribute), you must add a
description of the image within another attribute: alt.

Think of "alt" like "alternative text." If someone is using a screen reader and can't see your image
with their eyes, they will see the descriptive text of the image instead. So will search engines, which
is important for SEO.

A good alt text to describe the Millie Hughes-Fulford photo would be: "Astronaut Millie Hughes-
Fulford displays the modernist Blackburn & Danne NASA logotype." It's sufficiently descriptive so that
even users who can't see your page won't miss any of the important information contained in the
photo!

However, if an image truly adds no additional information to the page and is purely decorative, you
can leave the quotation marks empty (like for a decorative dot image):

The title attribute.

The title of your image appears when a user hovers over the image itself, as in the Millie Hughes-
Fulford image above.

Image placement.

You can place images wherever you like on your page, but you'll get different results even with subtle
changes.

For example, placing the image within a <p> tag makes the image appear on the first line of the
paragraph:
Placing it above a <p> tag makes it appear above the paragraph:

But putting two consecutives <img> tags makes the images appear right next to each other.
This is due to CSS behaviour. We’ll learn more about it later.

Figures.

Now that you know how to insert images plain and simple, HTML also offers a specific kind of image
tag for figures. A figure is an image that could be moved around in your web page without
dramatically altering the "flow" of the page. This is similar to how we think of figures in an
encyclopaedia, for example. Because they're labelled, they can be next to one paragraph or another,
and it doesn't really matter.

Figures also allow for captions. To insert a figure, surround your <img> tag with two other tags:
<figure> and <figcaption>.

You can even include multiple images within one <figure> tag, and they'll appear next to one
another.

Using <figure> is a great way to write semantically wonderful HTML. "Figure" is more descriptive than
"image", so if figure suits your content, it's a good choice to use it.

10. Use the best images possible.

When adding images to your code, there are a few things to bear in mind, like intellectual property
and file formats/sizes that ensure the best browsing experience.

Finding images.
As you continue building websites, you'll have opportunities to add many different kinds of images.
Some, you can make yourself. You can create charts to show relevant figures, use your own
photography for an article, mark up screenshots to illustrate a concept, or hand-draw illustrations to
accompany a story.

Some images, you just can't get yourself, though. This is not an excuse to use copyrighted images
without attribution or photographs that aren't yours.

Stock images are a safe choice when you're in a tight spot and need visuals to accompany your text!

Here are some solid options if you need stock photos:

 Adobe Stock (they often have free trials running): https://stock.adobe.com

 Shutterstock: http://www.shutterstock.com/
 iStock: http://www.istockphoto.com/
 Getty Images: http://www.gettyimages.com/
 Fotolia: https://fotolia.com/
 Picography (free, more niche/hipster): https://picography.co/

Image format.

We covered that images should often be saved in their own folder in their codebase. There are
several different image formats (otherwise known as file types) available, and you should be sure to
save or use image with the one most suited to your page's needs:

JPEG.

Most digital cameras save photos in JPEG or JPG (they're the same thing) format because it can blend
red, green, and blue to produce many colours. JPEG is a good format to use when adding a photo
with many colours or with photography in general. The JPEG stands for Joint Photographic Experts
Group. Sample image files could be winter_landscape.jpg or family_portrait.jpeg.

GIF.

Everyone loves animated GIFs. That's because this file type is perfect for animated images. It's less
suited to photography though because it can't handle as many colours. You can still use it for still
photos with very few colours, like simple logos. It also allows for transparency, which JPEGs do not. A
sample image file could be brand_logo.gif or dancing_bear.gif.

PNG.

There are two different types of PNG formats, PNG-8 and PNG-24. The latter allows for more colours,
but both formats allow transparency and do not result in quality loss when saved over and over again
(unlike JPEGs). PNG stands for Portable Network Graphics. A sample image file could be
simple_illustration.png or transparent_background_cutout.png.

SVG.
If the name "Scalable Vector Graphics" doesn't give it away, SVG images are vector images. They can
be scaled up or down and not lose any quality. However, they're only suited to simple images like
logos or flags. Sample image files could be logo.svg or american_flag.svg.

One of the most important things you can do when building great web pages is to keep your image
sizes reasonable and to measure your images in pixels. If you want to show an image at a size of
200px by 200px, it should be saved at that size. This will help your pages load faster.

11. Create general page structure.

Web page structure.

What do the New York Times, Wikipedia, Airbnb, and Lady Gaga's website have in common? They
can all be broken down into predictable blocks.

We could name almost any website, and you could break down the site into remarkably predictable
sections. Developers write HTML in a way that permits consistent content structure across the entire
web. This reduces cognitive work for users and makes different sites display reliably across browsers,
screen readers, and search engines.

We have four wildly different sites, but they all use the same structural elements, or zones: headers,
navigation areas, sections, and articles.

For example, if you look at the New York Times, they use the nav for browsing sections, searching for
an article, or accessing membership options and account settings. On Airbnb, the nav allows you to
become a host or access your account settings. The navigation bars are suited to each site's content
but are not fundamentally different.
Additionally, websites often rearrange their content blocks when viewed on mobile devices and
tablets. You'll often notice articles or smaller content pieces stacking vertically on smaller screen
sizes.

Structural elements in HTML include:

 <header>: the section at the top of a web page that often includes a logo and sometimes a
nav
 <nav>: a set of menu items that allow a user to navigate to different pages on a site
 <section>: a general section of related content
 <article>: a piece of content that can be independently shared, like a blog post or newspaper
article (even if you don't display the full article text, like you just show a preview, you can still
use an article tag to delineate this content)
 <footer>: the section at the bottom of a page that often has additional links and perhaps
social sharing icons
 <aside>: content that is complementary but not crucial to the page's main content (this could
be an informative side section on a related subject)
 <figure>: a grouped image and caption that create an informative visual of some kind
Very generic desktop page structure:

Real-life example: Etsy. Content does have a layout that spreads from left to right:
On the other hand, mobile views often "stack" elements vertically so they take up less horizontal
space.

On this mobile view of Etsy, content indeed stacks more vertically than in the previous screenshot of
the desktop view.

This is the core of semantic HTML: your code should match your content! The sooner you start
thinking in terms of content zones as presented above, the better your HTML will be and the more
you can adapt your CSS to make your site look differently on desktop, mobile, and more.

Structural HTML tags.

You already know how to create an HTML element (like a heading), you use a set of opening and
closing tags. The format is exactly the same for creating structural elements like sections or footers.

The following tags create the structural elements in the website examples above:
 12. Understand block-level and inline elements.

HTML elements have default behaviour, via CSS behind the scenes, that controls their positioning.

Look at the behaviour of the paragraph elements versus the image elements in this example:

Each paragraph expands to take up the full width of the page on its own line! However, the images
all appear in the same line. That also explains why before the two images of Millie Hughes-Fulford
stacked right next to each other.

Every HTML element has a default block-level or inline behaviour. Paragraphs are block-level
elements, which means that they block off a whole line for themselves, and images are inline
elements, which means they will automatically be placed next to one another on the same line.

Block-level elements that you've seen so far include:

 Headings
 Paragraphs (p)
 Lists and list items (ul, ol, li)
 Structuring elements (header, nav, section, article, aside, figure, footer)
Inline elements that you've seen so far include:

 Images (img)
 Emphasized text (em)
 Strong text (strong)
 Links (a)
As you code more and more, you'll memorize which HTML elements are block-level or inline. You'll
also easily see their behaviour every time you create them.

13. Group content with divs and spans.

Divs and spans are the most general way to group content together and used to be the only way to
do so.

The difference between divs and spans is simple: one is block-level, and the other is inline.

Divs.

Divs are a block-level element used to group content together, not dissimilar to <header>, <nav>,
<section>, <article>, <footer>, <figure>, and <aside>. There's one key difference, though.

Most of the time, when you want to group content together, you'll be able to do it using an HTML5
semantic element like header, nav, section, article, footer, figure, or aside. However, sometimes your
content doesn't really fit any of these categories! In that case, you're encouraged to use divs to
create block-level content groups.

Example.

The dark green disclaimer block isn't really a full section, nor is it an article, footer, nav, etc.
Nonetheless, its two paragraphs need to be grouped together so the block's appearance can be
changed to have a dark green background and be visually different using CSS.

This is a legitimate reason to use a div to group the two paragraphs together.

Here's the code:

Spans.

Spans are similar to divs, except they are inline elements. You might use them to group words
together, since words appear inline and not each on their own line.

Imagine the newspaper above always prints its name in bolded light green. You need to grab those
two words – "Sun Journal" – to be able to apply CSS to them.

14. Add classes and ids to elements.

Class and id tags will revolutionize your HTML. They're absolutely necessary when your pages start
becoming more complex.

Let's say you're working on a news website, which is likely to contain paragraphs and paragraphs of
text. Some paragraphs will be within news articles, others might be disclaimer text at the bottom of
the page, others will be short article blurbs; in sum, you have no way to tell these paragraphs apart
from one another. Since they're all just <p> tags, you won't be able to apply CSS (appearance)
changes to some paragraphs but not others.

This is where classes and ids enter the scene.

Classes and ids are custom attributes you can add to your elements in order to distinguish them from
one another.

Classes apply to groups of elements, and ids apply to only one single element on an entire page.
Classes.

Setting a class attribute is as simple as choosing the class name and adding the attribute to your
element.

In this very generic code example,

 The heading has a class of "breaking-news".

 The paragraph has a class of "warning".
 The span has a class of "highlight".
Classes like this allow you to apply custom CSS to certain elements but not others.

The code behind it has 6 different paragraph tags, but 2 of them are orange to indicate a warning, or
something the reader should watch out for. The way to accomplish this is to add a class of
"warning" to the appropriate paragraphs:
By adding class="warning" as an attribute to certain paragraph tags, you can grab the relevant
paragraphs and update the background colour to orange for specific paragraphs!

Classes can be applied to multiple elements on a page, unlike ids.

Ids.

Ids are just like classes — they are custom attributes that can be added to elements – except they'll
only apply to one element per page.

There were multiple warning paragraphs. On the same page, let's say we want to have one single key
takeaway (added to the HTML above):

Now in your CSS, you can adapt that one element's appearance!

Naming classes and ids.

We named the class warning and the id key-takeaway, but we could've given them ridiculous names
like grizzly-bear-jazz-trio and taco-tuesday and they would still work, as long as I referenced the same
names (grizzly-bear-jazz-trio and taco-tuesday) in my CSS.

Nonetheless, it's good to name your classes and ids understandably. Name them based on context or
function, not on appearance.

For example, a class called "warning" could apply to scenarios where the content should have a
warning function or context.

A really bad class name for the same example would be "orange-background-paragraph" because it
describes the content's pure appearance and not its function or context. Besides, what if you decide
warning text should be yellow someday instead of orange? You'd have to change your class name.
Not cool.

Don't name classes and ids to describe an element's appearance. Name them to describe an
element's function context.

15. Add breaks and lines to your content.

There are easy ways to break up the structure of your page in order to separate themes or ideas
without creating classes or ids.

You can use line breaks or horizontal rules (i.e., lines) to do so!

Let's say you want to code an article about New York's best coffeeshops by borough, and you want it
to be structured as follows:
Pay attention to two things:

 The addresses under each coffeeshop name

 The line separating Manhattan listings from Brooklyn listings
Line breaks.

Paragraphs are block-level elements, meaning they take up the width of their containing element by
default. They also have spacing above and below them. It's more than a simple line break.

See the space between "Line 1" and "Line 2" in the following image? That space is added
automatically to the HTML element (by CSS):

Sometimes, you don't want that extra space, though. You'll want less space between each line:

This is true especially for addresses and poems. You don't need an entirely new paragraph for each
line in an address! A simple, and narrower, line break will do.

To create line breaks in HTML, use the <br> tag. There is no closing tag necessary.
In the code above, there will be a line break between "125 N 6th St" and "Brooklyn, NY 11249" that
won't have the outrageous amount of space that appears between two paragraph elements. It'll just
be a nice line break!

This is what the address would look like as two separate <p> elements instead of one paragraph
containing a line break:

It doesn't make sense semantically because an address is one unit, so to separate it as multiple
paragraphs isn't appropriate.

Don't add <br> tags everywhere just to create additional space on the page. Use them if a line break
between two lines of text makes sense for your content. Otherwise, if the extra space you want is
purely visual, create it using CSS. Remember that HTML tags are for your content, not its appearance.

Horizontal rules.

You may have different content themes in one page that are related but are worth separating for
clarity. In the above example, coffeeshops in Manhattan are separated from coffeeshops in Brooklyn
because it helps group different content within the article.

To create a line, or a "horizontal rule" in HTML, simply use an <hr> tag.

Here's the full HTML code for the coffeeshop article:
 16. Add a head to your HTML for information about your website.

As you start creating real pages with all of this awesome content on them, you'll need to give
browsers information about the pages themselves.

Examples:

Look up at your browser's address bar. In a tab, you probably see the name of the page and its logo.

Paste a link to any OpenClassrooms course in a new post on Facebook. The post automatically grabs
the image for the course page, its title, and its description. Ask yourself: how did Facebook get that
information?

Information about web pages, like their titles, icons, social sharing images, and descriptions live in an
area of your HTML document called the head.

HTML document structure.

When creating a page in HTML, you'll often refer to it as a "document." HTML documents have two
major sections: the head and the body.

The body will contain all the content we've already learned to create: text, images, and anything on
the page.
The head will contain information about the page. This culminates in a basic page structure like this:

This HTML page structure is not very "fun" to create because it has no visible content yet, but it is
very necessary.

1. First, define the document type, which is HTML. This should become a line of code you
robotically type when you're creating new HTML, and you don't need to think about it much
beyond this.
2. Start your HTML content with an opening <html> tag that includes a language attribute. This
could be "en" for English, "fr" for French, "hi" for Hindi, or something else. It helps screen
readers (a tool used people who have difficulty seeing) know which language to read out
loud. There are more than 8000 languages to choose from, but in your career, you'll probably
use a few at most.
3. Define and close the document's <head>.
4. Define the document's body and fill it with the elements we've already learned about in this
course (sections, articles, headings, paragraphs, images, whatever's necessary for your page).
5. Conclude your HTML content with a closing </html> tag.
You already know what to put in the <body>. Let's explore what goes inside the <head> tags shown
above.

<head>.

Some common information is almost always included in a HTML file's head:

 Page title
 Links to your CSS files or page icon
 Meta data that used for social sharing
The total sum of all these elements could resemble this, which we'll break down shortly:
The grayed-out lines in the HTML are called code comments. They appear in the code but not as part
of the final page so are very useful for making notes to yourself. The syntax for code comments
depends on the language you use. In HTML, write them by typing <!-- --> and putting the note you
want to make to yourself or other developers inside the empty space in the middle.

Although this all looks complicated, it's just a series of three tags: <title>, <link>, and <meta>. They
have different attributes each time they're listed.

<title>: define a site title using the <title> tag. Put your site's title between the opening and closing
<title> tags.

<link>: tell your HTML document where your CSS lives or where your site's icon lives by specifying an
href attribute (pointing to the file location), type (specifying the kind of document), and rel
attribution (specifying its relationship to the HTML. These are standard lines of code you can almost
copy and paste every time.

<meta>: specify as many types of meta data as you need. <meta charset="utf-8"> is a good line of
code to set in your HTML pages so that your page can display any type of characters (English, Korean,
etc), even if the page is mostly in one main language. A site description can also be set via a line like
this:

If set, this will be shown in search engine result listings underneath your site title. You just need to
specify a name attribute with a value of "description" and a content attribute with a value that
describes your site.
The rest of the meta tags above are specific for sharing your page on Twitter and Facebook. This
comes into play when your websites are live on the web

17. Apply CSS to elements.

The basic structure of a CSS statement is as follows:

Selector: the HTML element you want to modify. It's called a "selector" because you're selecting the
element.
Property: the element's CSS property you want to modify, like its colour, spacing, etc.
Value: the new value of the CSS property, like "blue" for its colour.

Imagine you are ordering in a Thai restaurant. A custom order would involve selecting the item you
want to modify and changing its properties. Let's say you want red curry that's extremely spicy, and
you want them to hold the onions. Translated to CSS, your order might look like this:

Here is a real example that you might see in CSS that involve selecting HTML elements; not Thai food!

The code follow the same structure you saw above:

1. Select the HTML element using its name, like h1 or p.

2. Open a set of curly braces. There will also be a space between the element name and the
first curly brace.
3. Type a CSS property and set its value. Conclude each of these lines with a semicolon.
4. Close the curly braces on a new line.
You can also select elements based on class or id. To select an element using a class from its HTML,
use a period. The following code selects all elements with a class of "warning":
To select an element using an id from its HTML, use a pound sign. The following code selects the
element with an id of "intro":

Cascading effects.

CSS stands for "Cascading Style Sheets," which means that the CSS you write "cascades" throughout
your style file. When modifying the appearance of HTML content using CSS, you'll often have many
CSS rules.

If the same element is affected by multiple appearance modifications, the line of code farthest down
the CSS page will take precedence.

In the following example, the relevant paragraph would be teal, not indigo!

Bear this in mind as you write CSS, so you don't get unexpected visual effects that are just the result
of stray code.

18. Decide where to write CSS.

Your CSS must be written in the right place so that it communicates with your HTML. Otherwise, you
won't see any changes to your elements!

CSS can be written either:

 Outside your HTML file

 Inside your HTML file
Writing CSS in the same file might sound easier. However, by shoving all your HTML and CSS into one
file, you often end up with a long and unreadable mess.

We'll first look at writing CSS in a separate file because it's what you'll do most often.

External CSS.
In a HTML and CSS project, you often have the following file structure:

There is:

1. A general folder for the project ("website").

2. The "website" folder contains a file called index.html.
3. The "website" folder contains another folder called "css."
4. The "css" folder contains a file called "style.css."
You might have a folder called images as well that will contain the images used in your web pages.

This is what most of your simple website projects will look like! You'll write HTML in an index.html
file and CSS within a style.css file.

The HTML file is what is read by a user's browser. Therefore, you need a link in there to the CSS file;
otherwise, your groovy styles won't be applied to the HTML elements you want.

Look at line 5.

The <link> element in the HTML's <head> tells the page where to find its matching CSS. It should
have the following attributes:

 href: the file path to the CSS. If you structure your project as shown in the image, this will be
"css/style.css."
 type: describes the type of link, which will always be "text/css" for your stylesheets
  rel: describes the relationship between the pages, which will always be "stylesheet" for your
stylesheets
 There is no closing tag necessary for the <link> element!
Lazy but extremely common developer tip: you can always just start a new HTML document by
copying and pasting the code above into your own file, replacing the site title with your own and
filling the <body> tag with your own material. Hardly anyone types the whole thing from scratch
every single time.

Internal CSS.

You can also write CSS in your HTML as follows:

Look at lines 5-9.

A <style> tag within the HTML file's <head> defines the CSS for the page. This is fine if you only have
a couple lines of CSS. However, it can quickly become unwieldy. It's not fun to read lines and lines of
CSS in a file before the actual page content even starts!

Inline CSS.

You can even write CSS directly on elements in the HTML's body. In that case, you don't need to
actually select them, since it's clear (based on where you place the style tag) which element you want
to change the appearance of using CSS:

Use external CSS most of the time because writing styles in HTML can quickly become unwieldy and
disorganized, unless you're working on a very small project.

19. Set your first colours.

Colour has a way of livening up even the drabbest of web experiences. It also allows you to create
unique brand identity for a client or for your own business!

The first two CSS properties we'll explore are therefore:

  color
 background-color
A combination of the two lets you change the colour of your text and the background colour of any
HTML elements!

There are several ways to specify colour values in CSS, we’ll see that later.

Colour.

Consider the colour property of CSS to reference an element's foreground. This applies to text!

Let's say you're a hiking enthusiast and are writing an article on the web about which camping
supplies people should bring on their trips. Here's some simple HTML with an article, a heading, and
an unordered list with list items that sometimes include links (that currently go nowhere, thus the #)
and descriptions:

With CSS, we want to change the colour of the heading to green and each list strong list item and link
to teal to end up with a result like this:
In order to do so, we select the appropriate HTML element and set its "color" property to the value
of our choice.

Background colours are also useful. To change an element's background colour, type background-
color and set it to the value of your choice.
Is this the most aesthetically pleasing colour scheme? Not really! But it goes to show you how much
colour can change the vibe of a page.

20. Understand colour theory.

Colour values can be set in CSS in several ways. Whichever way you choose to set colours, be
consistent.

We'll check out the following ways to set colour:

 Hex codes
 RGB values
 Colour names
 HSL values
Accessibility.

One quick note before we jump into ways of setting colour: make sure to use colour schemes that
are easily readable. This means choosing sufficiently high contrast colour combinations so that even
people who can't see well can still tell letters and content apart from each other on your page.

Using a high-contrast combination helps readability:

Green over green is a bad colour combination. Keep this in mind as you set colours in CSS.
HEX codes.

A hex code is a 6-digit string of numbers and letters that represents the red, green, and blue values of
a colour in hexadecimal format.

The good news is you don't really need to think about how the code are set. Hex codes are really
easy to find by using a colour picker tool. There are many available online, such as this
one: https://htmlcolorcodes.com/color-picker/

By using a colour picker tool, you'll often immediately see a set of characters starting with #. Think no
further. This is the hex code for your selected colour.

Here are some sample hex codes of nice colours (including our green).

Set a heading’s colour to the first green above via hex code, we’d write the following HTML and CSS:

See the "#1BDA76" in the CSS statement? That's the hex code! Here's our result:

RGB values.
Each pixel on your computer screen is a tiny light that expresses colour by adapting levels of red,
blue, and green light. "RGB" as a way to set colour therefore stands for "Red, Green, Blue".

An RGB value in CSS is formatted as follows: rgb(red, green, blue);

Luckily, colour pickers will often give you the RGB values in addition to a hex code. The green above
in RGB is 27, 218, 118. This means:

 our colour's "red" value is 27.

 our colour's "green" value is 218.
 our colour's "blue" value is 118.
Let's set a heading to the same green as above via an RGB value:

The same green expressed differently.

Sometimes, you will see rgba() colors that include a fourth value as well. The fourth value controls
opacity (e.g. how transparent it is). To create a color that is halfway opaque, you would write color:
rgba(27, 218, 118, 0.5).

Colour names.

There are 147 defined colour names in CSS. While they might seem practical, they're actually very
limiting.

Some even have obscure names, like PapayaWhip or LemonChiffon. This is cool if you're into desserts
but is not very useful in your codebase.

This means we can't set an exact match to our green above using a simple colour name. The closest
we can get is probably "LightGreen":

We end up with this which isn’t the exact colour as the previous ones.
HSL values.

Recent updates to CSS have added a new way to set colour values called "HSL." This stands for hue,
saturation, and lightness. It is intended to be a more human-understandable format; if you
understand the 360 degrees of a colour wheel, you can easily guess at what a colour code might be
(which is not the case with a hex code or RGB value).

The first value, hue, represents where the colour is in a colour wheel (which is circular, so the
maximum value is 360).

The second value, saturation, represents the amount of grey in the colour you select. You can think
of this as the vibrancy of the colour. It's expressed as a percentage from 0% to 100%.

The third value, lightness, represents the amount of black in a colour. It's also expressed as a
percentage from 0% to 100%.

The HSL values for our green above are 149, 88%, and 48%.

By stacking all ways of setting the green above, here are the results. All are identical except for the
green set via colour name, which is less specific than using a hex code, RGB, or HSL value:

21. Set fonts.

Fonts can make your site look unique and attractive. CSS offers you several ways to set fonts; the way
you ultimately do so will depend on your needs.
You probably already know a bunch of fonts you might've used in presentations or at work, like
Times New Roman, Arial, Verdana, etc. Let's take a step back from there to look at fonts more
basically.

The most common general font types you see online are:

 Sans-serif fonts
 Serif fonts
 Monospace fonts

What do these terms mean? Serif fonts have little ticks ("serifs") on the edges of each letter. Sans-
serif fonts do not. Monospace fonts feature letters that are all the same width.

Compare the three main font types below:

With these differences in mind, let's see how to set specific fonts.

Font-family property.

The most fundamental CSS property to know for setting fonts is font-family.

However, you can't just set its value to any font and assume it'll work for every user. A font will only
display correctly if the user already has it installed on their computer.

That's why the font-family property will often contain multiple values that serve as fallbacks if a user
doesn't have a certain font installed.

To set all the HTML body text (including headings, paragraphs, and everything else) to Helvetica, you
might write this:

Helvetica will display just fine if the user has it installed on their machine. Specifying additional fonts
allows for a similar font to be used if the user doesn't have Helvetica installed.
Therefore, the above line of code says, "If the user has Helvetica installed, show that. If they don't
have Helvetica installed, but they DO have Arial installed, show Arial. If not, show whatever the
default sans serif font is on their computer."

If you want to use a font that is more than one word, you must put it in quotation marks, such
as font-family: 'Helvetica Neue';.

Font combinations.

Some distinctive web aesthetics come from combining different font types, like a sans-serif font with
a serif font.

There are some general design rules to follow when combining multiple font types on one page.

1. Don't use more than three different fonts per page. This font combination looks a little ridiculous
because there is just way too much going on:

That's why it's best to stick with no more than three fonts per page, and it's important to use them
consistently. This brings us to our next rule.

2. Use the same fonts consistently for content types. For example, make all your headings use the
same font, all of your paragraphs use the same font, all your image captions use the same font, etc.
This allows a viewer to follow a pattern of fonts instead of being mentally jarred every time they see
the same content type in a different font.

3. Combine a sans-serif headline with a serif paragraph. Serif fonts allow the eye to travel easily
between letters, since the little ticks ("serifs") guide the eye from one letter to the next. Sans-serif
fonts are starker and more attention-grabbing. That's why a sans-serif headline can complement a
serif paragraph but using the opposite combination can fatigue your reader.

In this example, you can see that a sans-serif headline with a serif paragraph is more readable than
its opposite:
Installing your own fonts.

Sometimes, you'll want to use fonts besides the standard ones that are installed on most peoples'
machines. In that case, you'll need to install a custom font and include the font file as part of your
project files.

Nearly an infinite number of fonts are available for download on various websites, such as:

 Font Squirrel: https://www.fontsquirrel.com/

 Google Fonts: https://fonts.google.com/
 Urban Fonts: https://www.urbanfonts.com/
There are also many more websites that offer fonts for a paid download (the above are, in theory,
free).

You'll just want to make sure the fonts you choose are licensed for commercial use. Otherwise, you
can get into intellectual property trouble! Usually, this will be indicated clearly on the font page.

To include an installed font as part of your project, you need to define a font-face rule (starting with
an @ sign) that defines the font family and the location of the downloaded font file:

As you can see, our special font is called Milkshake. We've saved the downloaded font in a file called
"fonts" and told the CSS file to go find it there.

Different font file types can work differently depending on the user's browser. If you're interested in
exploring this route, check out this article that explains the difference between font file types
like .eot, .otf, and more: https://creativemarket.com/blog/the-missing-guide-to-font-formats

22. Control font sizes, line spacing and word spacing.

Font sizing.
Several units of measurement are available to control font size in CSS:

 pixels
 em
 rem
 percentages
The primary differences between them is how sizing is calculated relative to the overall web page.
There are two options: setting absolute sizes and relative sizes.

Setting absolute sizes means that you define exact size values, like saying you want to make t-shirts
that are sizes 34, 36, 38, 40, and 42.

Setting relative sizes means that you define all values relative to a base value, like saying that you
want to create a t-shirt line with a base size of 34. All sizes will be defined relative to the size 34. You
might say that you want to produce another size that's 2 inches wider than that base value, a size
that's 4 inches wider than that base value, a size that's 6 inches wider than that base value, and so
on. If the base size of 34 is redefined, the other sizes will change as well.

Let's start defining sizes with pixels (an absolute way to define sizes).

Pixels.

Defining a font size using pixels most closely resembles the way you set font sizes in most other
contexts. When working in Word or Google Documents, you choose a font size from a dropdown list.

This number is defined in a unit called "points" or "pt" for short. It's a good unit for setting font sizes
in print documents.

On web pages, however, you won't use points. You'll use a similar value of measurement
called pixels. A screen is composed of many pixels, and by setting a font size of 12 pixels, you are
saying that you want your text to have a height of 12 pixels.

The one downside with defining size by via pixel values is that your elements' sizes are defined
absolutely and are not relative to one another. This can cause strange behaviour sometimes on
certain screen sizes or if a user uses custom size settings in their browser.

The default body text size in CSS is 16px. By "body text", we mean the height of paragraph text. This
is the most fundamental text on any website, and 16px is an important number to keep in mind as
you start working with the other units described in this chapter.

Ems and rems.

An "em" or "rem" (pronounced as one syllable) are very commonly used units of sizing in CSS
because they let you define sizes relative to other elements.

When setting fonts, 1em is equal to the default body (paragraph) text size of 16px. To set a font size
of 32 px, you would use 2em.

The following math will help you set a font size in ems:
em = desired element pixel value/parent element pixel value

A rem is similar to an em, except that it doesn't compound. When using ems, if you have an element
at a size of 2em inside another element of 2em, the inner element will be shown at 4em. When using
rems, it will still be shown at 2rem.

Percentages.

Setting sizes via percentages is similar to setting them using ems. Sizes are defined as relative to one
another, not as absolute values.

The following math will help you set font sizes in percentages:

percent value = em = desired element pixel value / parent element pixel value * 100

Font-size.

Use the font-size property in CSS to adjust the size of text using any of the units above.

Once you choose a unit, just be consistent. For example, if you define one font size using ems, define
all font sizes using ems.

We mentioned above that the default text size for body (paragraph) text is 16px. Therefore:

Say you want to make an h1 element larger than its default size, which is 32px, and you want to
increase the paragraph text size to 18px. You can see the smaller size on the left, and the new, bigger
size on the right.
The 3 different sets of CSS below all result in the same new font sizes:

Only the above units of measurement are different. The resultant visual size is the same!

Line-height.

In CSS, you control the vertical space between lines of text using the line-height property. This can
particularly help with the readability of long paragraphs.

This paragraph is a little tough to read:

An increased line height can help. I advise you to start with a line of 1.4em and adjust it as necessary.

Letter-spacing.

Increasing the space between letters is often useful when dealing with headings in all-caps. You
should always give this value in the em or rem unit, so it is proportional to the font the user has set in
their browser. The spacing will be added on top of the default spacing.

Notice how the default appearance of an all-caps heading is fairly cramped (see the "C" and "A"
almost touching?).
A little letter spacing can help this:

Word-spacing.

You won't often need to increase the space between words, but it can be useful for poetic or literary
effect. You should always give this value in the em or rem unit, so it is proportional to the font the
user has set in their browser.

A simple bit of text can be more theatrical with some word spacing. Here's some regular text:

Plus, a little bit of spacing:

With extra space between words, readers focus more on each word, which can increase the
sentences power. Don't do this all the time though, or your pages will be tiring to read!

23. Trick out your text.

Font-weight:

Adapting the weight of your font via CSS will cause your text to appear bolder or lighter than normal.
Remember that HTML is semantic mark-up for your content, and CSS controls its appearance.
<strong> elements are bold by default but should only be used when the content you're writing is
emphatic. Sometimes, you'll want a heavier font weight just for the sake of appearances — not for
emphatic content. Use the font-weight property instead!

We'll use a navigation bar as our example.

Navigation bars are sometimes coded as lists as HTML, sometimes not. A quick Google search will
reveal many methods for creating navs.

font-weight can be set in several different ways. It can be:

 A word like "normal" or "bold"

 A numerical value like 400 (for normal weight), 700 (for bold), or a number in between

By setting a font-weight of normal, the font will appear at its default heaviness.
As mentioned above, you can also set a numerical value for your font weight (where 400=normal and
700=bold). You can also set a font-weight of less than 400, which often gives a nice result but
depends on the font you're using:

Font-style.

We can't talk about bold text without talking about italics! To italicize text, you'll use the font-style
property. It can also be combined with a font-weight property if you like:

The font-style property has two other possible values: normal and oblique. Oblique text vaguely
resembles italic text but takes up more horizontal space. You'll rarely use it.

divration.

How to underline text? The <strong> HTML tag produces bold text by default, the <em> HTML tag
produces italicized text by default, but no HTML element produces underlined text by default.

You must use CSS to accomplish this, no matter what. The text-decoration property will help you out.

It can take multiple values:

 underline
 none
 line-through
<a> elements are underlined by default, so you'll often find yourself setting text-decoration: none on
them to get rid of an unwanted underline.

Draw a line through text by using a property called line-through:

You can also add wavy or dashed effects to lines (text-decoration: underline wavy or underline
dashed), but they look a little goofy. Use sparingly!

Another useful visual trick is to change all your letters to uppercase or lowercase. This can be
accomplished without changing your HTML. Handle it in CSS using the text-transform property.

When used, the text-transform property will most often take one of the following values:

 capitalize
 uppercase
 lowercase
Creating letter-case harmony in navigation bars can be a pleasing visual effect:
Styles based on status.

You'll sometimes want to apply styles when an element has a particular status, like when a link has
been visited or when the user is hovering over an element with their mouse.

Enter CSS pseudo-classes. Despite the sci-fi-sounding name, their syntax is simple! Just add a colon
and the name of the pseudo-class onto your selected element.

We'll cover only a few pseudo-classes in this chapter that are commonly applied to links:

 :visited
 :hover
 :active

You can find the full list of pseudo-classes

here: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

:visited.

Web links are blue by default and purple when they've visited. You've probably seen these colors
before:
The generic blue and purple are not very awe-inspiring, and you'll often want to change them. You
can change the blue by changing the colour property on the <a> tag directly, but what about that
bummer purple?

Let's apply a new visited link colour to the navigation example above, where a user has already
clicked on the "contact" link:

This isn't a dramatic visual effect but nonetheless helps users orient themselves around your site by
making it clear which links they haven't clicked yet.

:active.

When an element is clicked, it's nice to show a little visual effect to increase the sensation of
interactivity. A light visual effect can be pleasant when an element is clicked. In this case, the clicked
element is an "active" element only while the mouse button is pressing down on it.

When a link is clicked in our navigation example, I've made it so the background colour changes from
the light green in its hovered state to a light yellow in its active state:
CSS rule: if you're using them, you should specify pseudo-classes in a particular order. That order
is :visited, :hover, and then :active.

codepen.io

II. Create web page layout with CSS.

1. Discover elements as boxes.

Customizing an element's appearance often means setting where it lives on the page and how much
space it takes relative to other elements. In other words, the layout of your web page can make the
difference between a great, well-designed user experience and a confusing one!

In order to understand the extent to which layouts are important, consider which of the following
looks like a more realistic website layout:

In the second layout there’s:

  Less unnecessary white space between elements.
 Increased space between the text and the edge of its background colour.
 Two blocks that appear next to each other instead of everything stacking vertically.

Elements as boxes.

Creating layouts requires complete understanding of one key concept: every HTML element lives in
its own box. This concept is called the box model.

By default, that box will be just big enough to contain the element itself. In the first layout, there’s a
background colour to different HTML elements so you can see the boxes that contain each element.

Notice that some boxes (like the purple box for the first heading) span the entire width of the page,
whereas the light green box containing the link is only as big as the link itself! Boxes behave
differently depending on the element type.

Let's look again at the first image from above and the code behind it:
Why do the boxes behave differently depending on the element type? Some of the elements
are block-level elements and some are inline elements. Block-level elements span the entire width of
their containing element, whereas inline elements are only wide enough for their contents.

Equally important for layouts is the notion of a containing element. We'll talk a lot about "containing
elements" or "containers". A containing element is one element that contains others.

Let's take a closer look at this. In the following example, the <div> is the container for the <p>
elements, which means the <p> elements will take up the width of the <div> (whatever it may be).

2. Add custom borders to elements.

Much like you can frame a picture and hang it on your wall, you can add borders to your HTML
elements that frame them visually.

This element has an orange border, for example:

There are many different ways to adapt a border's style! Here are just some examples of what web
borders in CSS might look like:

In CSS, you can control a border's:

 Width (thin, wide, 5px, etc.)

 Style (solid, dashed, etc.)
 Colour (hex code, RGB value, etc.)
This results in a ton of border options that can spice up your elements.

You can also create borders around elements in either a shorthand or longhand way, depending on
your preference.

Border syntax.

There are two general ways to set borders:

 A longhand way where you list out each value in a different property (ex. border-
width, border-style, and border-color).
 A shorthand way where you combine all values into one property called border.
Let's look at the shorthand way first. You can set borders in CSS using one simple property called
border. In it, you will specify three border properties in the following order:

 Width
 Style
 Colour
Here are three quick examples of setting borders using the shorthand method:
You can also set borders the longhand way by specifying all border values as different properties.

You'll often set borders the shorthand way because it's faster and more concise.

Border widths can be set as either pixel values, em/rem values, or using a word that CSS has already
pre-defined, like "thin," "medium," or "thick."

As you saw above, the width will be the first value in the shorthand way to specify borders. However,
it can also be set on its own with the border-width property.

We most often set borders using pixels, but you could also use em/rem in order to keep the border
width proportional to the text. If an element has a font-size of 16px, setting a border width of 1em
means the border will be 16px wide. If a user has their font preferences set to a higher size, though,
and you set your border size in em/rem, your border will grow or shrink accordingly (which would
not happen with a pixel value).
Setting border style.

In reality, you'll most often specify a "solid" border style. Depending on a certain style you're going
for, though, you might choose a different border aesthetic. Here is the full list of possible options for
setting borders in CSS:

 solid  groove  inset

 dashed  hidden  outset
 dotted  none
 double  ridge
The following image represents each border style, except "hidden."
You can even set specific border styles per side by using property names that specify the top, bottom,
left, or right border:

This usually looks a little goofy though.

Setting border colour.

Set border colours the same way you set most colours in CSS, using:

 Hex codes
 RGB or RGBA values
 Colour names
 Hsl values

Like we saw with border style, you can even set a different border colour per side by specifying
whether you're talking about the top, bottom, right, or left border colour.

Setting border radius.

Lastly, you can also set rounded borders by using a property called border-radius using em/rem
values, pixels, or percentages:

Despite all the fancy things you can do with borders, we advise you to keep your borders simple so
that users can focus on the content itself.

3. Cushion elements with padding.

You'll often want the border of an element to be pushed out from the element's contents itself.
Borders can visually suffocate your elements, and it would be nice to let them breathe!

You can see the difference in spacing between an element's contents and its below. There's more
space on the right:
Padding is the space between an element's contents and border. It is still within the element itself,
not around it.

Unlike many other CSS properties, padding is not inherited from parent elements. You must explicitly
set it on the elements where you want it.

How to set padding.

Setting padding is as simple as giving the padding property a space value via:

 Pixels
 Em/rem
 A percentage.
Here's the example we'll use in this course, which currently has no padding:
Setting padding in pixels.

Adding padding in pixels is a great way to set padding that never changes. Regardless of the text size
the user has set, the padding will always be shown at the same size.

Select your element, declare a padding property, and set it to a numerical value in pixels:

Setting padding in em/rem.

You can also set padding as an em or rem value. The padding value will then be relative to the
element's text size. If an h1 has a font-size of 32px, 1em of padding would be 32px. If a p has a font-
size of 16px, 1em of padding would be 16px.

Setting padding with a relative unit like em or rem means that if a user has a default font size set in
their browser, your design will be relative to that font size. This could allow for more design
consistency.
Setting padding via percentages.

You can also set padding as a percentage value. The percentage is relative to the width of the
containing element. This is a bit abstract, so stick with me.

Take the following example of a paragraph within the body of your page:

Say that:

 The body of the page is 850px wide.

 The paragraph inside the body is 300px wide.
If you set padding: 10% on the paragraph element, the paragraph's padding will be 85px (10% of
850px); not 30px (10% of 300px).

Padding percentages are not relative to the width of the element itself; they're relative to the width
of its containing element.

To calculate your ideal padding value as a percentage, here's some easy math:

padding as percentage = desired padding in pixels / width of containing element * 100

In our previously used example, a body contains the heading and paragraph. Because the body is
500px wide, the h1's padding (5%) will be 25px. The paragraph's padding (3%) will be 15px.
Setting multiple padding values.

You'll often want to set one vertical padding value and another horizontal padding value. Let's take
the case of buttons; it's a little too intense to have 30px of padding on every side of a button (top,
right, bottom, and left):

It would make more sense to have more padding on the left/right sides of the button and less on the
top/bottom sides:

You can set top, right, bottom, and left padding values in that order:

If your top/bottom values are the same, and your left/right values are the same, you can also just set
two values: one for the top/bottom padding and another for left/right padding.
Here are different padding values and their results:

In the middle example, the same result is achieved in both lines of code!

4. Add breathing room with margins.

Margin is the CSS property that controls spacing between elements. In this diagram, see how it
relates to the other layout elements you've seen so far:

An element has padding around it, which is then surrounded by a border, which then has margins
outside of it that determine the space between this element and its neighbour(s).

How to set margins.

Margins are similar to padding in that they can be set as:

 Pixels
 Em/rem values
 Percentages that are relative to the width of the containing block.

Margins also can have a value called auto that is useful for centring content.

Let's start with checking out an example using a paragraph and some images:
You'll notice there's a very small amount of space between each image already. This is the default
space set by the browser when images are placed on new lines in HTML.

Here's the HTML and CSS for the example below:

Setting margins via pixels.

Adding margins in pixels is a great way to set margins that never change, regardless of the size of the
element or the text size involved.

Let’s select the image element, declare the margin property, and set it to 20 pixels:
By specifying one single value, you set the top, bottom, right, and left margins all to the same
amount. Now, 20px of margin has been added to the top, left, bottom, and right of each image
element. This means that there's more space between:

 The paragraph and the images, which is a result of the image's top margin value

 The images themselves, which is a result of the image's left and right margin values

Setting margins in em/rem.

You can also set margins using em or rem values. The margin value will then be relative to the
element's text size. If an h1 has a font-size of 32px, a 1em margin would be 32px. If a p has a font-size
of 16px, a 1em margin would be 16px.

Setting margin with a relative unit like em or rem means that if a user has a default font size set in
their browser, your design will be relative to that font size. This could allow for more design
consistency.

In our tree image example, the default body text size of 16px is applied (since images don't really
have their own text size). Setting a 1em margin will result in a margin of 16px:
Setting margins via percentages.

You can also set margins as percentage values. Like we saw in the last chapter for padding, the
percentage is relative to the width of the containing element.

Take the following example of a paragraph within the body of your page:

Say that:

 The body of the page is 850px wide.

 The paragraph inside the body is 300px wide.
If you set margin: 10% on the paragraph element, the paragraph's margin will be 85px (10% of
850px); not 30px (10% of 300px).

Margin percentages are not relative to the width of the element itself; they're relative to the width of
its containing element.

To calculate your ideal margin value as a percentage, here's some easy math:

margin value as percentage = desired margin in pixels / width of containing element * 100

In our tree image example, a body contains the paragraph and three images. Because the body is
700px wide, setting a margin of 1% will result in a margin of 7px:

Setting multiple margin values.

You'll sometimes want to set top/bottom margins that are different than the left/right margins.

You can therefore set top, right, bottom, and left margin values in that order:
If your top/bottom values are the same, and your left/right values are the same, you can also just set
two values: one for the top/bottom margins and another for left/right margins.

Default spacing between elements can be tricky to control. That space is the paragraph's default
margin that you didn't specify; paragraphs have 16px of margin around them by default.

In order to get rid of that space, you'd have to work on the paragraph's margins or set a negative top
margin value for the images (yes, negative values are possible!):

Collapsing margins.

Margins exhibit one unusual feature: vertical margins collapse.

Let's say you have the following elements stacked on top of each other:

 One element that has a bottom margin of 30px

 One element that has a top margin of 20px
The vertical margin between them seems like it would be 50px. After all, 20 + 30 = 50. In reality, the
vertical margin between them will be 30px. When there are two different vertical margin values
touching each other, only the largest of the two will be kept. This applies to block elements.
Auto.

Setting left and right margin values to auto will often centre an element on your page. However, you
must also declare a width for the element.

If I take paragraph two from the previous example and set its width to 300px, you'll notice it is not
cantered on the page:

By setting the left and right margins to auto, the paragraph moves to the centre of its containing
element (in this case, the body of the page):
 5. Control an element’s width and height.

Every element has a width and a height that can greatly affect its appearance on your web page.
Element widths and heights can be controlled in order to create large header images, stacked
paragraphs, content columns, and more.

An element has a default width and height that are just enough to hold its contents. For example, a
paragraph element that contains 5 words will be just wide enough to hold those five words and just
tall enough for the font size of those words.

Setting a new width or height property can make an element be just as wide or tall as you want it to
be. To make an element an even 200px wide and 200px tall, you could set:

Padding and borders are added onto the width and height of the element, however. Adding 10 pixels
of padding and a 3px border makes any element take up more space.

Even if you set a width of 200px on an element, the additional padding and border would make its
width actually 226 pixels on the page (200px width + (210px for the padding) + (23px for the
borders)).
This is probably the wonkiest behaviour to consider when dealing with widths. With one line of code,
you can override this behaviour:

By setting the box-sizing property to border-box on any element, you declare that its padding and
borders should be included in the width of the element. In the above scenario, the element would
only be 200px wide total – including padding and borders.

The default value of the box-sizing property is content-box. There are only two possible values for
the box-sizing property.

With that in mind, we'll shortly explore the various ways to set widths. We'll use a slightly more
complicated example in order to show the various ways in which width can be set to achieve a
desired effect.

In our example, we have a div that has a class of "main" that contains a heading, a paragraph, and
several block quotes. The div has a dotted border, and the block quotes have a light green
background.

Here's the starter example and its code:

Setting width and height in pixels.

As previously, widths and heights can also be set in pixels. Setting a width or height in pixels means
that the width or height will always be the same, regardless of the screen size from which the page is
viewed.

Setting a width of 600px on the main div will reduce its width and the width of its child elements
automatically so that everything still fits inside:

The div is centred on the page because it has a defined width and has its left/right margins set to
auto.

Setting widths in em/rem.

When an element's width or height is set in em or rem, the measurement will be equal to the
element's font size. For example, if an element's font size is 16px, 1em of width would be equal to
16px.

Because main div's font size is the default 16px, we'd have to set its width to 37.5em in order to
achieve a width of 600 pixels (because 600/16 = 37.5).

Setting heights and widths as percentages.

When an element's width or height is set as a percentage, the value will be relative to the width or
height of the containing block. Let's say a div is 700px wide. A paragraph inside the div with a width
of 50% would ultimately be 350px wide.

We most recently set the width of our div above to 37.5em. Let's keep that value and set the block
quote widths to 50%. The block quotes will be reduced to half the width of the main div.
Minimum and maximum widths and heights.

Many websites are responsive now, which means that they respond depending on a user's screen
size. For example, if you're on your computer and gradually reduce the size of your browser window
while on OpenClassrooms, you'll notice that most elements get smaller as well.

You may want to set values that never let an element's width or height go above or below a certain
value. The min-width, max-width, min-height, and max-height properties are good for this.

The max-width and max-height properties will ensure that an element is never wider or taller than
the value you set, even if there's enough room on the page for it to take up more space.

The min-width and min-height properties will ensure that an element is never narrower or shorter
than the value you set, even if the browser window is too small to display the whole element.

6. Set media queries for different devices.

When writing CSS, there's one thing to be particularly concerned about: visitors' screen resolutions.
The space or number of pixels wide vary from one screen to another.

This information is important when you build a design: how should your website be displayed for
different screen resolutions? If you have a widescreen, you may forget that some people browse with
smaller screens. Not to mention the browsers of smartphones, which are even less wide.

This is where media queries come in. These are the rules to be applied to change the design of a
website based on the screen's characteristics! Using this technique, we can create a design that
automatically adjusts to each visitor's screen!

Implementation of media queries.

Media are not new properties but rather rules that can be applied under certain conditions.
Specifically, you'll be able to say, "If the visitor's screen's resolution is less than a certain value, then
apply the following CSS properties." This allows you to change the website's appearance under
certain conditions. You can increase the text size, change the background colour, position your menu
differently with certain resolutions, etc.

Contrary to what one might think, media queries are not just about screen resolutions. You can
change your website's appearance based on other criteria, such as screen type (smartphone, TV,
projector, etc.), number of colours, screen orientation (portrait or landscape), etc. There are a great
number of possibilities!

Media queries work in all browsers, including Internet Explorer as of version 9 (IE9) onwards.

Applying a media query.

Media queries are thus rules that specify when CSS properties have to be applied. There are two
ways to use them:
  By loading a different.css stylesheet based on the rule (e.g. "If the resolution is less than
1280px wide, load the small_resolution.css") file;

 By writing the rule directly in the usual.css file (e.g. "If the resolution is less than 1280px
wide, load the CSS properties below").

Loading a different stylesheet.

You can add a media attribute in which we're going to write the rule to be applied for the file to be
loaded. This is known as making a media query. For example:

In the end, your HTML code may provide several CSS files: one as default (which is loaded in all cases)
and one or two others which are only charged in addition if the corresponding rule applies.

Loading rules directly in the style sheet.

Another technique is to write these rules in the same CSS file as usual. In this case, we write the rule
in the .css file like this:

Possible rules.

There are many rules for building media queries. The main ones are:

 color: colour management (in  media: output screen type. A few of

bits/pixel). the possible values: screen:
 height: display field height (window). "conventional" screen;
 width: display field width (window).  handheld: mobile device;
 device-height: device height.  print: printing;
 device-width: device width.  tv: television;
 orientation: device orientation  projection: projector;
(portrait or landscape).  all: all types of screens.
The prefix min- or max- can be added in front of most of these rules. So min-width means "Minimum
width" and max-height means "Maximum height", etc. The difference between width and device-
width can primarily be seen in mobile browsers for smartphones.

The rules can be combined using the following words:

 only: "only";
 and: "and";
 not: "not";
Here are a few examples of media queries to help you understand the principle.

Older browsers, including IE6, IE7, and IE8, don't know media queries but are able to interpret the
start of the rule (they can read @media screen, for example). They will thus read the following CSS
properties even if they are not affected by the rule! To avoid this, one trick is to use the only keyword
that these old versions don't know: "@media only screen " does not cause a bug on older browsers.

Testing media queries.

Media queries are mostly used to adapt the website design to different screen widths.

Let's do a very simple test: we're going to change the text size and colour if the window is more or
less than 1024 pixels wide. For this test, let’s use the second method which is to write the rule
directly in the same .css file as usual:
We have added a media query that applies to all screens not wider than 1024px and applies some
colour and text changes depending on the screen size.

Practical use of media queries in the design.

Changing the text colour is nice, but it doesn't really add much. However, using media queries to
change your website's appearance depending on screen resolution is immediately much more useful.
You'll see that you can do whatever you want!

On mobile sites, you'll often see navigation bars stacked vertically instead of horizontally. Since the
smaller screens are narrower, the full horizontal bar can't be shown.

Let's take a basic navigation bar and make its menu items stack upon one another when the screen
size is less than 320px wide (a standard measurement for smartphone screen width).

On screens greater than 320px wide, the nav bar should look like this:

On screens les than 320px wide, the nav bar should look like this:

Here’s the starter code for the horizontal nav bar (no media queries yet):
We only need to change the CSS rules for the list item (li) elements in order to make them stack upon
one other. We'll change:

 Their display property to block instead of inline-block

 Their top and bottom margins to 5px so there's some vertical space between each item (this
was not necessary when the items were in one row)
Here's the resultant media query that can simply be placed under all the other CSS code above:

Media queries and mobile browsers.

As you probably know, the screens of smartphones are much narrower than our usual computer
screens (they're only a few hundred pixels wide). To adapt to this, mobile browsers display the
website by "zooming out" to allow the whole page to be seen. The simulated display area is called
the viewport: it's the width of the mobile phone's browser window.

With media queries, if, in CSS, you target the screen with max-width on a mobile phone, it will
compare the width you specify against the width of its viewport. The problem is that the viewport
changes according to the mobile browser used!
 Browser Default viewport width

Opera Mobile 850 pixels

iPhone Safari 980 pixels

Android 800 pixels

Windows Phone 7 1024 pixels

An iPhone behaves as if the window were 980 px wide, while an Android behaves as if the window
were 800 px wide!

To target smartphones, it may be better, rather than using max-width, to use max-device-width: this
is the device's width. Mobile devices are not more than 480 px wide, so we can target mobile
browsers only, using this media query:

We could theoretically target mobile screens using the handheld media rule... Unfortunately, no
mobile browser except Opera mobile recognizes handheld. They all behave as if they were normal
screens (screen). So, you can't really use handheld for mobile phones.

You can change the mobile browser's viewport width with a meta tag to be inserted in the document
header: <head>.

You can use this tag to change the way your page content is organized on mobile phones. To obtain
readable render without zooming, you can set the viewport to the same width as the screen:

7. Introduction to CSS Grid.

Many developers handle layouts in different ways because there are so many different ways to
position elements. In recent years, though, there has been a major focus on making CSS easier to
write.

It's become much more pleasant to create layouts using native CSS instead of having to use external
tools, though! One such recent development in CSS is called CSS Grid. It's a set of CSS properties that
allow creation of two-dimensional layouts defined by columns and rows.
Instead of having to manually set an element's position using pixel distances and complicated math
(which is the way things used to be!), you can simply set the number of columns and rows you want
and let Grid position them for you.

Most websites are, after all, based on grids. It may not be apparent at first glance, but websites
often have columns and rows which determine how elements are distributed on the page. Check out
the following websites:

Once you start noticing the rows and columns engineered into website layouts, it's hard to unsee
them. CSS Grid will let you create this same type of structured layout in your own projects.

To get a sense of what CSS Grid allows you to create, check out the following layouts, all of which
were all written with several simple lines of code:
As you can see, CSS Grid is very powerful. It can also be used in combination with the concepts
you've already seen, like padding, borders, and margins.

Browser compatibility.

The only reason anyone might hesitate to use CSS Grid is because, like many new features, it
was incompatible with certain browsers. However, CSS Grid is now integrated into all browsers, so
you can use it with relative certainty.

Just one note: in order for it to work with Internet Explorer, you must preface your grid rules with -
ms.

“As with any front-end technology choice, the decision to use CSS Grid Layout will come down to the
browsers your site visitors are typically using. If they tend to use up-to-date versions of Firefox,
Chrome, Opera, and Safari, then it would make sense to start using CSS grids once those browsers
update. If your site serves a market sector that is tied to older browsers, however, it may not make
sense yet.”

We agree with this summary of how to decide regarding layouts in CSS. You should remember,
though, that you can write CSS Grid code and fallback code for older browsers in the same code base.
They're not mutually exclusive!
 8. Set up a basic grid.

In order to create layouts using CSS Grid, you only need to add one line of code to the element where
you want to create a grid!

A grid display type is usually added to container elements, meaning an element that contains other
elements. This could be a section or div, for example. Let's imagine that we have a div with a class of
"container":

We'll use this same example to explore CSS Grid's power. Let's say that our div, with a class of
container, contains eight other divs, each of which contains a number:

We have a div called "container", then made 8 nested divs. Now, let's put a different background
colour for each nested div.
Instead of giving each nested div a separate class name, which would be really time-consuming, using
nth-child allows us to just indicate which nested div we want to change. In our code, we've:

 Indicated our container div (.container)

 Then named the nested element (in this case a div)
 Added :nth-child( )
 Then specified which nested div we want via the number in the parenthesis.
In other words, .container div:nth-child(5) refers to the 5th nested div in our container div.

The result is a group of blocks that make it easy to see the structure created by different grid
configurations:
Setting up a basic grid.

The first step for using CSS Grid is to set the display property of a container element to grid:

There will be no immediate changes with this line of code. No magic grids appear! It's now time to
actually set a custom grid ourselves.

Set the columns and rows of your grid using two properties:

 grid-template-columns lets you set the number of columns and each of their widths.
 grid-template-rows lets you set the number of rows and each of their widths.
Let's start with columns.

Setting columns.

Let's set 3 columns using the grid-template-columns property. Each column is 20% wide. The 20% is
relative to the width of the containing element: in this case, the container div.
Notice that we don't explicitly say "I want 3 columns!" The number of columns is set depending on
how many widths you specified. If you specify 3 column widths, you'll get 3 columns. If you specify 10
column widths, you'll get 10 columns.

Setting rows.

Now let's add rows using the grid-template-rows property:

We now have 3 rows: the first is 3em tall, the second is 1.6em tall, and the third is 1.6em tall.
What if we add more blocks? A fourth row would be created, and you'd have to modify your CSS
code to add a height for that new row! Sometimes it's hard to know how many rows you'll have in
advance. Setting row-by-row values is very limiting and inflexible.

That's why you can set a default row value that will apply for row numbers you haven't specified. This
property is called grid-auto-rows.

You can set the same thing for columns, but since columns are usually related to page widths (which
are more predictable and less flexible), you may not need to set additional default column widths
very often.

Now, when I add 3 additional blocks (in bright red to help you see the difference), notice the fourth
row that gets created has a default height of 3em. Even if I added enough content to fill 20 new rows,
each new row would have a height of 3em! The other rows still keep their specified heights (1.6em)
though.

Grid gaps.

In order to set gaps between your grid elements, use a simple property called grid-gap. Set one value
if you want the gap to be the same between rows and columns. Otherwise, set two values (the first
for the gap between rows, the second for the gap between columns).

Column and row measurements.

You can set column and row values using the same units you've seen so far like em/rem,
percentages, and pixels.

However, there's another great unit will help you set grid measurements. It's called "Fraction unit",
or fr for short. It's similar to percentages but more flexible.

Percentages can get complicated when combined with grid gaps. If you have 2 columns, each with a
50% width, you'd expect this to take up 100% of the viewport. However, adding any grid gap will
make your container extend beyond the viewport. The percentages don't recalculate to factor the
gap in.

This can be avoided by using fraction units instead of percentages.

Let's use a column example. The width of a "1fr" column will depend on the width of the containing
element, similar to percentages. You don't need to do much math, though! If you set 1fr, 3 times,
you'll have 3 equally wide columns:
You could even set different measurements for each column. Say you wanted the middle column to
be doubly as wide as the other two. Let fraction units handle the math for you!

9. Set columns and rows in shorthand.

The repeat function.

When setting grids, you'll often have values that repeat. In our above example, there are 3 columns
that are each 1fr wide. You can create the 3 columns by specifying each of their widths one-by-one,
as you've already seen, or you can use a CSS function called repeat to create a repeating pattern.

Inside the repeat function, you must specify:

  The number of times you want the measurement pattern to repeat
 The measurement(s) in pixels, em, percentages, fr... whichever unit you're feeling

In our example, we want 3 columns, each 1fr wide.

Therefore,

It can also be written as:

Translated into ordinary language, this reads as "Repeat a 1fr measurement 3 times." The visual
result is exactly the same.

Using repeat, you can even create repeating patterns with multiple measurements! To create 2
columns, one that's 0.5fr wide, and another that's 1fr wide, and then to repeat that pattern twice,
you could write the following line of code:

Translated into ordinary language, this reads as "Repeat a pattern with 0.5fr and 1fr columns 2
times." The result is:

 Column 1 is 0.5fr wide.

 Column 2 is 1fr wide.
 Column 3 is 0.5fr wide.
 Column 4 is 1fr wide.
Row and columns specification shorthand.

You've previously defined grid measurements using separate lines of code to describe rows and
columns.

Here's our example written two separate ways (one with the repeat function and the other without):
The separate column and row measurements can be combined into one line of code. The new
property is simply called grid-template – the same as the properties you already learned, just without
-column or -row at the end!

Within the grid-template property, you'll:

1. Specify your row measurements

2. Type a forward slash
3. Specify your column measurements
You must provide specifications in that order!

Let's apply this shorthand syntax to our multicolour grid example:

The result is the same, except you used one line of code instead of two. Efficient!

Don't forget to create a default row height separately using the grid-auto-rows property if you think
additional rows may pop up someday. This can't be combined into the grid-template shorthand
notation and must be written on a separate line.

10. Define grid element height and width.

Up until this point, we've only talked about setting measurements for your overall grid (like how wide
each column or row should be).

We haven't talked about how to control sizing of individual elements within a grid though. We’ve
only worked with elements of equal sizes:

How could we use CSS Grid to get a result where some elements take up more than one column or
row, like this?
Notice how the grid width is the same, but the "1" block takes up 3 columns, the "2" block takes up 2
rows and 2 columns, etc?

We'll now see how, using grid-column and grid-row properties.

Grid columns and rows.

Each grid has elements in it. However, there are also "lines" between each element in the grid.
Consider graph paper: there are squares that are marked by vertical and horizontal lines.

In the illustration below, you can see these lines represented (the coloured squares are the elements
themselves):

This is the simplest representation of a grid. It's just a bunch of squares between evenly spaced lines,
each of which is marked with a number.

You could also have the same overall lines but with some elements that take up more space. In the
image below, do you see the red section that spans line 1-5, or the yellow section that spans the
vertical lines 3-5?
The grid lines remain the same, but elements take up different amounts of space across them.

Set elements measurements.

To define on which grid lines an element should start and end, use the following properties:

 grid-column-start
 grid-column-end
 grid-row-start
 grid-row-end
Inside each property, fill out the line number of your choice. Let's go to the example we've been
using in this course to play with these properties. Here's the example and its starter code:
The colour and text properties for each element haven't changed. They be copied from the previous
examples. The difference here in this code is that an id has been assigned to each div. We'll select
elements using these ids for the sake of simplicity.

Look at the image below. The code above gives us the left result, and we want the result on the right:

We've marked up the starter result with line numbers like you saw in the images at the beginning of
the chapter. They'll help us define where elements should start and end:

Column measurements.

To make the first element take up the distance from column line 1 to column line 4 (the full width of
the grid), we must specify that it should begin at column 1 and end at column 4:

You can write as one line of code, separating the lines by a forward slash.

Subtract the first number from the second number, and you'll get the number of columns the
element takes up. 4 - 1 = 3, so this element takes up 3 columns.

The result would be the same! The other elements rearrange themselves automatically around these
new measurements.

Row measurements.
Now, we want the second element to take up two rows' worth of height. Since it now begins on row
line 2 (the first element bumped it down), we can specify that it should begin on row line 2 and end
on row line 4:

Subtract the first number from the second number, and you'll get the number of rows the element
takes up. 4 - 2 = 2, so this element takes up 2 rows.

Here's the final grid and column code that produces the desired result we wanted from above. Take
your time to go through the code and draw, by hand, what you think the result will be! It helps a lot
to practice this. Plus, it's totally possible to get a perfect result if you measure carefully:

Span and alternative values.

So far, we've only used numerical values to define element sizing along column/row lines. To take
some math out of the process, though, you can also define a simple span:

This code says, "The element should start at column line 1 and span 3 columns." It's the same result
as you saw above (grid-column: 1 / 4).

Lastly, it's sometimes tough to know how many columns or rows you'll have, especially if your
content changes all the time. You can also use negative numerical values to ensure that your element
always spans the full number of rows, for example. The last row or column line will always be line "-
1".
This code says, "The element should start at column line 1 and end at the last column line." For our
example, it's the same result as you saw above with grid-column: 1 / 4; or grid-column: 1 / span 3;.

11. Create a grid template area.

Now, we'll look at another way to set how many columns or rows an element takes up.

This new way will be more visual and consider an entire layout at once (instead of working element
by element).

Take this very general layout:

Here's the layout marked up in much more detail, including column lines and white letters that
represent which section is which.

Consider that:

 h = header
 a = section A
 b = section B
 f = footer
If the grid (4 columns, 3 rows) were written out in text, with each letter representing the element
that takes up a particular position, it'd look like this:
hhhh

aabb

ffff

And actually, that's EXACTLY what we'll put in our code!

Grid template areas.

Here’s the beginning HTML for this example:

Before we get started, here are the general steps we'll follow:

1. Set the number of columns and rows, and their measurements, in grid-template (or
separately in grid-template-columns and grid-template-rows).
2. Define a template using letters, words, or numbers of your choice in grid-template-areas,
putting a space between each and putting each row in a set of quotation marks.
3. Map elements to these letters, words, or numbers of your choice by defining grid-area on
each element.
4. Firstly, in the accompanying CSS, set a grid-template with how many columns and rows you
want and their measurements.

Next, create a layout using grid-template-areas, which will contain a coded representation of where
your elements fit into a grid, putting each row in a set of quotation marks:

Next, assign each letter in your grid area template to an element within your grid using the grid-area
property. For example, to assign the header element to all instances of the letter "h" in your layout:
Here is the full CSS (including colours and background colours) to end up with the final result below
the code:

To sum up:
  Set the number of columns and rows, and their measurements, in grid-template (or
separately in grid-template-columns and grid-template-rows).
 Define a template using letters, words, or numbers of your choice in grid-template-areas,
putting a space between each and putting each row in a set of quotation marks.
 Map elements to these letters, words, or numbers of your choice by defining grid-area on
each element.

Comparison with other measurements.

Before, you learned about setting measurements using:

 grid-column-start
 grid-column-end
 grid-row-start
 grid-row-end

That way of setting measurements requires some light math.

Using grid-template-areas instead is a more abstracted, visual way of ending up with the same
results. In either case, you're setting a grid and then identifying how much space elements should
take up within that grid.

12. Set columns depending on screen size.

Up until now, we've talked about rigid grid definitions. For example, defining the following code
means there will ALWAYS be 6 columns of content, regardless of a device's screen size:

Result on a desktop screen.

Result on a mobile screen.

What’s far more likely is that you’ll want a result like this on a mobile screen:

That way, the columns aren't nearly as smashed together just for the sake of getting 6 in a row! You
may be thinking back to the first part of this course, when we learned about media queries. With
media queries, you can control how content is displayed on different screen sizes.

However, CSS Grid offers flexible solutions for different screen sizes that don't involve media queries
at all!

We'll learn two new keywords:

 auto-fit
 minmax
The two of them are often combined together, so we'll explore them in tandem.

Auto-fit and minmax.

Look at the line of code below. From left to right, it reads:

"Repeat as many columns that will fit on a screen. Each column should be a minimum of 100px wide
and a maximum of 1fr wide."

The result of this code is much more apparent when you visualize the code in the browser and resize
the window.

Overall, you'll notice that the grid will readjust itself to add another 100px column when there's
enough available space for it. As you keep resizing the window, the columns keep growing until the
very moment when there'd potentially be space for another 100px column.
When downsizing the window, columns get removed one by one as content gets pushed down onto
rows instead. However, the columns will never be less than 100px. This avoids the squished columns
you saw at the beginning.

The same combination of auto-fit and minmax can be used for rows.

13. What is flexbox?

Before, you learned about CSS Grid. CSS Grid is a way to create two-dimensional layouts using a
system of columns and rows.

There are other ways to set layouts using CSS, though. Another popular way is to use a tool
called Flexbox!

Like CSS Grid, Flexbox is pure CSS. You don't have to install any fancy external tools. However, you
don't set columns and rows; with Flexbox, you'll only set rows or columns. Flexbox is therefore
considered a way to set one-dimensional layouts.

However, this doesn't mean you can't have any vertical content if you set rows, or any horizontal
content if you set columns! It just means you can't control the measurements of the other direction.

In the image on the left, you can see elements arranged using Flexbox rows. In the image on the
right, you see elements arranged using Flexbox columns.

In both cases, the following code vocabulary is used:

 flex-container: the container with the items inside that will be arranged in either rows or
columns
 flex-direction: the direction in which the elements are arranged, which can be either
row, column, row-reverse (a row from right to left), or column-reverse (a column from
bottom to top)
 flex-item: an item arranged via Flexbox
With Grid, you can set columns and rows. In the following image, 3 columns of equal width have
been set, and 2 rows of equal height have been set:

With Flexbox, you can set only columns or only rows. In the following image, we've defined that we'll
be working with columns. Therefore, elements are automatically stacked as a column:

In the following image, we've defined that we'll be working with rows. Therefore, my elements are
automatically stacked next to each other in a row. Admittedly, this looks weird for now:

In Flexbox, you can also control the sizing of the elements inside. That would be useful in the row
example above.

14. Set flex direction and wrapping.

Here's the starter code for the example we'll be using.

There is a container div that contains 6 items. To be as clear as possible, each item has a class of
item. Each is also 100px wide and 70px tall with a different background colour.

There is also a black border around the containing div. This will help you visualize the relationship
between the flex items and the flex container.

The divs stack vertically without any Flexbox or Grid code because they're block-level elements. Even
though their width is only 100px, they still don't float up next to each other.

Adding Flexbox.
Adding Flexbox capability to an element is easy! The one simple line of code to remember is display:
flex;. This goes on your container element:

Immediately, your elements will float up into a row inside the container!

Let's jump right into the next property: flex-direction. This lets you add elements in a row or column.

flex-direction has four possible values:

 row (elements from left to right)

 row-reverse (elements from right to left)
 column (elements from top to bottom)
 column-reverse (elements from bottom to top)

Flexbox row

Flexbox row-reverse
 Flexbox column

Flexbox column reverse

Wrapping.

Sometimes, your elements will be too large for your containing element.
However, the elements won't actually be 200px wide; they're only 139.328px wide, in reality. There's
not enough space for them in the container. That's because we've defined "row" in Flexbox, which
means only one row. The elements don't have the ability to wrap into multiple rows if they're too
wide.

That's why the next Flexbox property to explore is flex-wrap. It can take three specified values:

 wrap: the flex items can take up multiple lines as needed, whether they're arranged in rows
or columns.
 nowrap: the flex items cannot take up multiple lines. They'll all cram into either one row or
column.
 wrap-reverse: the flex items can take up multiple lines as needed but are displayed in reverse
(see the example below to make sense of this).

Flexbox wrapping

Flexbox reverse wrap

Combine direction and wrapping.

You can combine both direction and wrapping into one property called flex-flow. The first value
should be the direction. The second should be the wrapping. Therefore:
 15. Align items and justify content.

Items in Flexbox are arranged horizontally or vertically depending on whether you

specify row or column for your flex-direction. This "main" direction is what we call the flex
items' main axis. The perpendicular direction is therefore the cross axis.

 If the elements are arranged horizontally in a row (or rows), the main axis is horizontal, and
the cross axis is vertical.
 If the elements are arranged vertically in a column (or columns), the main axis is vertical, and
the cross axis is horizontal.

Alignment along the main axis.

We'll start with elements that are aligned horizontally because that's the case by default. To change
their alignment, use justify-content, which can accept the following values:

 flex-start: aligned at the start of the container

 flex-end: aligned at the end of the container
 center: aligned in the centre of the container
 space-between: elements are spread out along the axis (there's space between each)
 space-around: elements are spread out along the axis, but there's also space around the
edges
For example:

Do you see how the elements align differently depending on the value of justify-content? With one
simple property, we can intelligently align elements the way we want.

While this may seem more intuitive for rows, the same justify-content property can be applied to
Flexbox columns too! For example, check out how space-around presents on a column:

Alignment along the cross axis.

This is where Flexbox gets a little trippy.

When we talk about aligning items along the cross axis, the direction that cross direction goes
depends on the flex-direction. Let's check out the same illustration we saw at the beginning of the
chapter:

Remember:

 If the elements are arranged horizontally in a row (or rows), the main axis is horizontal, and
the cross axis is vertical.
 If the elements are arranged vertically in a column (or columns), the main axis is vertical, and
the cross axis is horizontal.
With the align-items property, we can change element alignment along the cross axis. align-items can
take the following properties:

 stretch: the elements are stretched out along the whole cross axis (this is the default value)
 flex-start: aligned at the start of the container
 flex-end: aligned at the end of the container
 center: aligned in the centre of the container
 baseline: aligned along the baseline of the container

Aligning items in the centre (and justifying the content in the centre) means we have both
horizontally AND vertically centred content! Vertical centring is especially tough in CSS, but Flexbox
gives you a way to do it easily. Here's the result:
Aligning one item.

You can even align one single element instead of the whole group using the align-self property. Let's
align the last item in our group to the end of the cross-axis:

Remember, since we're talking about a row, the cross axis is vertical; that's why the 6 is aligned to
the bottom instead of to the far right.

16. Align multiple lines of content.

The examples we have seen so far involved a single row or column. Sometimes, though, you'll have
multiple lines of content. You can control how to distribute them with a property called align-
content.

I know, all these properties sound the same. Just remember:

 justify-content: align items along the main axis

 align-items: align items along the cross axis
 align-content: align multiple rows or columns along the cross-axis
Because this property only applies to multiline content, we'll add more elements to our HTML.
Here's the accompanying starter CSS for the container element. Note that the elements are set to
wrap, which is important! Otherwise, they'd all try to cram onto one line:

Now, we can add an align-content property that can take the following values:

 flex-start: elements are placed at the beginning of the container

 flex-end: elements are placed at the end of the container
 center: elements are placed in the centre
 space-between: elements are separated with space around them
 space-around: elements are separated with space around them, as well as space between
the elements the container edge
 stretch: this is the default. Elements stretch to take up the whole container
The content is aligned along the Y-axis for flex rows and along the X-axis for flex columns.
If the flex-direction were set as column or column-reverse, the multiple lines would be aligned along
the X-axis instead.

17. Adjust element dimensions.

You may recall the fr unit from the chapters on CSS Grid. The fr unit is a really handy measurement
unit that allows elements in a container to take up space relative to each other depending on the
container width.

In Flexbox, you can control element sizing using several different properties. Let's go through them
now.

Flex-basis.

By setting a flex-basis property on your elements, you control the space they take up along the
container's main axis. That means setting flex-basis on a row will affect the elements' widths. Setting
flex-basis on a column will affect the elements' heights.

You may recall that in the starter CSS for our example, we set each element's width using a basic
width property:

This can be replaced by flex-basis, and the elements will take up the same space along the main axis.
Growing elements with flex-grow.

It's rare that you'll want all your elements to be the same width in your layouts! Elements that are all
the same size give no sense of informational hierarchy or importance, plus they just look dang
repetitive.

In order to grow elements within a Flexbox container to make them larger than their neighbours, use
a property called flex-grow.

Setting flex-grow to 1 for every single item makes the elements take up the full width of the
container. All the elements are the same width because they all have the same flex-grow value.

Remember: we're talking about width here because the flex-direction for our example is row. The
main axis is therefore from left to right (thus we're dealing with "widths" when setting flex-
basis or flex-grow). If the flex-direction for our example were column, we'd be talking about heights.
The main axis would be up and down (thus we'd deal with "heights").

What's really interesting about setting flex-grow values is that they are relative. For example, if we
increase the flex-grow value to something absurd like 6000, the result is the same:

When every element is set to the same flex-grow value, they'll all expand to take up the full width of
the container, no matter what the value is, as long as it's a positive number.

Things actually get interesting when we set values relative to each other. Now, instead of setting flex-
grow on every element, we'll set it on every element by default with the item class but then specify
on the 1st and 6th elements that their flex-grow should be different:
Now, our flex-container is essentially divided into 8 spots. The first element takes up 2 of those spots,
the second through fifth elements take up 4 of those spots, and the last element takes up 2 of those
spots.

Shrinking elements with flex-shrink.

Growing elements to take up available space is more intuitive to understand than shrinking elements
when there's not enough space. However, you can still set an "opposite" property to flex-grow called
flex-shrink.

Similar to flex-grow, flex-shrink controls how elements will lose width (for rows) or height (for
columns) when a flex container does not have enough space for them.

Consider that flex-shrink is 1 for all elements by default. If we therefore set flex-shrink: 3; on our first
and sixth elements, they'll shrink at 3 times the rate of the other elements as the browser window is
resized:

The flex shortcut.

All three properties you just learned (flex-basis, flex-grow, and flex-shrink) can be combined into one
handy property called flex.
The flex property takes the 3 values in this order:

1. flex-grow
2. flex-shrink
3. flex-basis
Therefore:

This means the second element in the container will have a flex-grow of 1 (default), a flex-shrink of 3
(meaning it will shrink 3 times faster than the other elements), and a flex-basis of 100px (it's starting
"width" if you will).

18. Reorder elements.

Flexbox allows you to easily reorder items depending on your layout needs. As you'd expect, the
property that lets you set ordering is called order. In the example we've been using so far (with 6
different elements), let's reorder them to show all the odd elements first, followed by the even
numbers:

We could set outrageous values, and as long as the values are in order (ex. the first element's
order value is lower than second element's order value), the ordering will still happen the way we
want:

You can also set an order to -1 to ensure it always appears first.

19. Manually adjust element’s positions.

Let’s recap how an element's position is usually determined. An element will have a default display
property whose value is either block, inline-block, or inline.

 Block-level elements start on new lines and take up the full width available to them
 Inline elements take up only as much space as they need and do not start on new lines
 Inline-block elements can display side-by-side but still can have width and height properties,
which regular inline elements cannot
Since these properties determine elements' positions, bear them in mind as we go further with
layout properties.

Positioning.

Even without using Flexbox or CSS Grid, you can adjust where an element appears on a page by using
a property called position.

The position property's default value is static. This just means the element appears where it normally
would in the flow of your HTML document. Additional possible positioning properties we'll explore
include relative, absolute, and fixed positioning.

Relative positioning.

The first alternative position property we will explore is relative positioning. Setting a position
to relative means you can position it relative to where it would normally be.
Relative positioning does not position an element relative to its preceding element! It sets a position
relative to where the element itself would normally be. This is where most people get tripped up.

Let’s explore positioning through the following example: the beginning of an article on New York’s
coffeeshops. The HTML and CSS behind this starter page are below the image:
We'll focus on the image element in particular. There are no custom position values on it right now,
so by default, its value is static.

Setting a position value of relative doesn't change anything right away:

You must also supply the exact relative positioning values you want using top, bottom, right, and left
in order to see a change. Setting top: 40px; and left: 30px will move the element 40px from the top of
where it'd normally be and 30px from the left of where it'd normally be:
Notice that now the image overlaps with the "Manhattan" heading. Setting custom positioning values
like this can be a little risky because your other elements don't automatically readjust
themselves accordingly! That's why CSS Grid and Flexbox are so powerful: other elements usually
adjust accordingly to the positions of the elements around them.

Absolute positioning.

The second custom positioning value we'll explore is absolute positioning.

Absolutely positioned elements are set relative to their nearest explicitly positioned ancestor. If you
haven't explicitly set any positioning values on previous elements, the absolutely positioned element
will appear relative to the edges of the document. Define offset values for absolutely positioned
elements the same way you would for relatively positioned elements: by defining top, bottom, left,
or right values.

Let's change our coffee image to have an absolute position, offset by 10px from the top and 30px
from the left:
Notice that the image appears to have been visually removed from where it was before and is
floating up in its own little world as if it weren't even in the article anymore! Its position is
determined by the edges of the document since there are no other explicitly defined position values
on preceding elements.

If you scroll down the page, the image stays exactly where it is. It does not scroll with the page.
That's important to remember as we check out one last custom positioning value.

Let's recap the one bit of confusing nuance to keep in mind: absolutely positioned elements are
positioned relatively to their most recent ancestor that also has defined specific positioning. Since
this is not the case for our image (none of its ancestors have defined positions applied to them), the
image is positioned relative to the document itself.

Fixed positioning.

The last positioning value we'll see here is fixed positioning. This is similar to absolute and relative
positioning in that you have to set top, bottom, left, and right values. However, an element with a
fixed position will scroll with the page and will often be positioned relative to the entire viewport,
except in a very specific subset of cases. It will always stay exactly where it is, visually, as the rest of
the page scrolls normally. This can look goofy sometimes but can, in fact, be useful for elements you
want to have displayed permanently on the side of a page, no matter whether the user is at the top
or bottom of the page (like a digital assistant or chatbot option).

Let's reduce the size of the coffee image, move it to the top right of the page, and change its
positioning to fixed:
Now, if you were to scroll up and down this page, the coffee element would never move!

20. Float elements.

Another very common legacy way of creating layouts that you might see in older codebases
involves floats. The float property in CSS was originally created so that developers could float text
around images, like in the following example where an image is floated to the left of text:

Floats quickly took on lives of their own, though. Developers started using them to float anything left
or right; not just images in text, as originally expected.

Before the advent of Flexbox and CSS Grid, though, you would've likely created your elements and
then floated them around each other to achieve your desired effect, like a three-column layout or a
sidebar on the right side of the page.

Take three simple divs, each of which has some basic styling just for aesthetic purposes:

Ordinarily, they divs will stack on top of one another because they're block-level elements:

You can float them up next to each other, though, using the float property. Its value can be
either right or left. Let's float them to the left first:
This means that each element will be floated to the left, either to the left edge of its containing
element or next to its neighbouring element.

You can also float elements to the right:

You can get very nuanced with your floats, especially if you're floating every single element on your
page in order to create a precise layout. Since creating layouts this way is seen as outdated, we won't
explore the use of floats to create layouts in more detail.

21. Clear floated elements.

Elements below a float will come up around the floated element. For example, if an image is floated
left, the text will wrap up around it.

Sometimes, though, you don't want adjacent elements all to float up around the floated element!
This is where you'll need to clear a float. Think of when you 'clear' an obstacle, for example; it means
it's out of your way. When you want a floated element to be out of another element's way, clear it.

Take the example of this simple article with an image that floats to the right:
If only the first paragraph were relevant to the image, we may not want the second paragraph also
floating up there next to it! The clear property will let us specify that we want a particular element to
be below a floated element, not next to it.

The clear property can have a value of left, right, or both (meaning it will clear floated elements to
the left, right, or either direction; "both" is probably what you'll see most often because it covers all
cases):
Knowing how to float elements and add the clear property when you want other elements to not be
affected by the float is important. Remember, though, that you should not be using these techniques
in your layouts anymore.

22. Stack elements in an order.

When you start positioning elements in an inflexible way, like by using absolute, relative, or fixed
positioning, you may need to also control the stacking order of elements.

Stacking elements also comes up with modern ways of setting layouts. It's a less legacy concept than
floats or positioning, so pay attention! You may actually need this.

Consider when you're using PowerPoint, Keynote, Sketch or other software that allows you to "Send
to back", "Send to back", "Forward", etc, in order to make something appear in front of or behind
something else:

If you're working with a layout that was set in a legacy way, you may end up with overlapping
elements. You saw elements that were accidentally overlapped in the positioning chapter, but you
may want to do this on purpose too!

The CSS property z-index will allow you to stack overlapping elements in the order of your choice.
Simply give it a numerical value. The numbers you give will determine the stacking order. If you give
one element a z-index of 1 and another a z-index of 2, the second element will appear in front of
the first (the higher the value, the more "forward" it will be).
Let's take an example of three simple square cards. Right now, they appear in the same order as they
appear in the HTML: from 1 to 3, where 3 is the last one (and therefore appears on top). This is the
default behaviour with no custom z-index value applied:
In order to make card number 1 appear above the others, you can assign each card a z-index, where
card 1's z-index is the highest. We'll set:

 card 1's z-index to 3

 card 2's z-index to 2
 card 3's z-index to 1

In reality, you could even set these silly values:

 card 1's z-index to 5000

 card 2's z-index to 342
 card 3's z-index to 6
The result would be the same. All that matters is how the numbers relate to one another; they don't
actually have to be in order, although that does keep your code logical and easier to read!

23. Discover third-party solutions.

CSS offers an incredible range of ways to set elements' locations and appearances. However, there
are also third-party solutions that you can integrate into your code in order to add styling that you
don't have to code yourself.

One such third-party solution is Bootstrap, but there are others. We'll explore a few, and it'll be up to
you to go further with them if you so desire!
Bootstrap.

Bootstrap is a library that has an incredible wealth of components including navigation bars, buttons,
and fonts. Once you integrate Bootstrap into your code, your pages will look instantly cleaned up to
match the default Bootstrap style. It's not too bad!

Check out this image that shows off some of Bootstrap's components (I guarantee you'll recognize
the nav bars or buttons from sites you've visited before. Chances are they were using Bootstrap!):

Including Bootstrap in your projects is as easy as either:

 Downloading the Bootstrap code and including it in your project files, or

 Adding the following link to your HTML: <link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/
K68vbdEjh4u" crossorigin="anonymous">
This link may be outdated depending on when you view this course because Bootstrap is constantly
updated. To get the most up-to-date link, visit https://getbootstrap.com/.

To see what we mean by "integrate Bootstrap into your code", take the following very simple page
with no styling and no Bootstrap added yet:
The second we add this link into the <head> of the HTML, you’ll see a huge difference!

Bootstrap has loaded its default styling for fonts and buttons, and there's much more where that
comes from. Check out the Bootstrap website for more information and try adding it to your own
basic projects!

Just beware of using Bootstrap as a crutch for all your styling needs. It's great but definitely
important to know CSS so you can understand what Bootstrap is doing behind the scenes.

Bulma.

Bulma is another CSS framework that gives you easy column systems, fonts, icons, buttons, and
more. Like Bootstrap, it also has layout options that allow you to create navigation bars, huge header
images, carousels, etc. The biggest difference between Bootstrap and Bulma is that Bootstrap has
JavaScript included, and Bulma does not.

JavaScript may not be part of your web development toolkit for the moment; however, it is a
powerful front-end language that will probably become necessary in your coding journey if you want
to be a front-end developer. If you want to focus just on CSS for now, Bulma could be useful for you
to explore.

Check out some of these projects created with Bulma if you want inspiration: https://bulma.io/expo

Foundation.

The final third-party solution we'll briefly discuss in this chapter is Foundation. This front-end
framework is used by a ton of well-known companies like Pixar, North Face, National Geographic,
and more.

The most defining element of Foundation is perhaps its integration of a mobile-first mentality.
Mobile-first is an increasingly common design practice that involves designing layouts for
smartphones first and then moving onto desktop layouts. This encourages minimalism and
cleanliness in design, since there's much less screen size to work with during the initial design phase!

Foundation is also extremely customizable, meaning that you can take its defaults and adjust them to
your own needs.

Colorzilla (to know the hex code of a colour  Extension)

Coolors

Fontface Ninja (to detect the fonts of a website  Extension)

Unsplash

Pexels

Font Awesome – Nucleo (Icon)