Get a solid grasp of HTML essentials with this course. From structuring web pages to understanding semantic tags, you'll build a strong foundation for creating well-organized and accessible content on the web.

HTML Foundations

INTRODUCTION

Learn HTML Foundations

HTML Foundations Question A

Watch Kevin Powell’s [Introduction to HTML video](https://www.youtube.com/watch?v=LGQuIIv2RVA&list=PL4-IK0AVhVjM0xE0K2uZRvsM7LkIhsPT-)

 Question A- Assignments

You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content.

There are some HTML elements that do not have a closing tag. These elements often look like this: < br /> or < img/>, but some can also be used without the closing forward slash such as < be > or < img >. These are known as self-closing tags or empty elements because they don’t wrap any content. You will encounter a few of these in later lessons, but for the most part, elements will have both opening and closing tags.

HTML has a vast list of predefined tags that you can use to create all kinds of different elements. It is important to use the correct tags for content. Using the correct tags can have a big impact on two aspects of your sites: how they are ranked in search engines; and how accessible they are to users who rely on assistive technologies, like screen readers, to use the internet.

Using the correct elements for content is called semantic HTML. You will explore this in much more depth later on in the curriculum.

HTML Foundations Question B

Why are self-closing tags like < br/ > or < img > essential in HTML?

Question B- Quiz

To demonstrate an HTML boilerplate, you first need an HTML file to work with.

Create a new folder on your computer and name it html-boilerplate. Within that folder create a new file and name it index.html.

You’re probably already familiar with a lot of different types of files, for example doc, pdf, and image files.

To let the computer know you want to create an HTML file, you need to append the filename with the .html extension as you have done when creating the index.html file.

It is worth noting that you named your HTML file index. You should always name the HTML file that will contain the homepage of your websites index.html. This is because web servers will by default look for an index.html page when users land on your websites - and not having one will cause big problems.

The DOCTYPE
Every HTML page starts with a doctype declaration. The doctype’s purpose is to tell the browser what version of HTML it should use to render the document. The latest version of HTML is HTML5, and the doctype for that version is simply < !DOCTYPE html >.

The doctypes for older versions of HTML were a bit more complicated. For example, this is the doctype declaration for HTML4:

< !DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN " "http://www.w3.org/TR/html4/loose.dtd " >
However, you probably won’t ever want to be using an older version of HTML, and so you’ll always use < !DOCTYPE html >.

Open the index.html file created earlier in your text editor and add < !DOCTYPE html > to the very first line.

HTML Foundations Question C

What is the purpose of the DOCTYPE declaration?

Question C- Quiz 

After you declare the doctype, you need to provide an < html > element. This is what’s known as the root element of the document, meaning that every other element in the document will be a descendant of it.

This becomes more important later on when you learn about manipulating HTML with JavaScript. For now, just know that the html element should be included on every HTML document.

Back in the index.html file, let’s add the < html > element by typing out its opening and closing tags, like so:

 < !DOCTYPE html >
 < html lang=" en " >
 < / html >

What is the lang attribute?
lang specifies the language of the text content in that element. This attribute is primarily used for improving accessibility of the webpage. It allows assistive technologies, for example screen readers, to adapt according to the language and invoke correct pronunciation.

HTML Foundations Question D

Question D- Quiz 

The < head > element is where you put important meta-information about your webpages, and stuff required for your webpages to render correctly in the browser. Inside the < head >, you should not use any element that displays content on the webpage.

**The Charset Meta Element**
You should always have the meta tag for the charset encoding of the webpage in the head element: < meta charset="utf-8" >.

Setting the encoding is very important because it ensures that the webpage will display special symbols and characters from different languages correctly in the browser.

**Title Element**
Another element you should always include in the head of an HTML document is the title element:

< title e >My First Webpage< /title >


The title element is used to give webpages a human-readable title which is displayed in your webpage’s browser tab.

If you didn’t include a title element, the webpage’s title would default to its file name. In your case that would be index.html, which isn’t very meaningful for users; this would make it very difficult to find your webpage if the user has many browser tabs open.

There are many more elements that can go within the head of an HTML document. However, for now it’s only crucial to know about the two elements you have covered here. You will introduce more elements that go into the head throughout the rest of the curriculum.

Back in index.html file, let’s add a head element with a charset meta element and a title within it. The head element goes within the HTML element and should always be the first element under the opening < html > tag:


 < !DOCTYPE html >

< html lang=" en " >
 < head >
   < meta charset=" UTF-8 " >
< title >My First Webpage< /title  >
  < / head >
 < / html >





HTML Foundations Question E

Question E- Quiz 

HTML Foundations Question F

Question F- Quiz

HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great!



HTML Foundations Question G

What are the primary responsibilities of HTML and CSS in creating a webpage?

Question G- Quiz

Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content.

HTML Foundations Question H

Why are HTML and CSS not typically classified as programming languages?



Question H- Quiz

HTML FOUNDATIONS

Explore the intricacies of working with text in web development. Learn about text formatting, manipulation, and presentation to enhance your skills in creating web content.

Working with Text

Working With Text Question A

Question A- Quiz

Headings are different from other HTML text elements: they are displayed larger and bolder than other text to signify that they are headings.

There are 6 different levels of headings starting from < h1 > to < h6 >. The number within a heading tag represents that heading’s level. The largest and most important heading is h1, while h6 is the tiniest heading at the lowest level.

Headings are defined much like paragraphs. For example, to create an h1 heading, we wrap our heading text in a < h1 > tag.
Using the correct level of heading is important as levels provide a hierarchy to the content. An h1 heading should always be used for the heading of the overall page, and the lower level headings should be used as the headings for content in smaller sections of the page.

Working With Text Question B

How many different levels of headings are there and what is the difference between them?

Question B- Quiz 

Working With Text Question C

What element should you use to make text bold and important?

Question C- Quiz

The em element makes text italic. It also semantically places emphasis on the text, which again may affect things like screen readers. To define an emphasized element you wrap text content in an <em> tag.

To use em on its own:

Again, like the strong element, you will find yourself mostly using the em element with other text elements:


Working With Text Question D

What element should you use to make text italicized to add emphasis?

You may have noticed that in all the examples in this lesson you indent any elements that are within other elements. This is known as nesting elements.

When you nest elements within other elements, you create a parent and child relationship between them. The nested elements are the children and the element they are nested within is the parent.

In the following example, the body element is the parent and the p is the child:

< html >

  < head >

  < /head >

  < body >

    < p >Lorem ipsum dolor sit amet.< /p >

  </ body >

 </ html >


Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings.

For example, the two p elements in the following code are siblings, since they are both children of the body tag and are at the same level of nesting as each other:

< html >

  < head >

  < /head >

  < body >

    < p >Lorem ipsum dolor sit amet.< /p >

    < p >Ut enim ad minim veniam.< /p >

  < /body >

 < /htm l>

You use indentation to make the level of nesting clear and readable for yourselves and other developers who will work with your HTML in the future. It is recommended to indent any child elements by two spaces.

The parent, child, and sibling relationships between elements will become much more important later when you start styling your HTML with CSS and adding behavior with JavaScript. For now, however, it is just important to know the distinction between how elements are related and the terminology used to describe their relationships.

Working With Text Question E

What relationship do two elements have if they are at the same level of nesting?

You may have noticed that in all the examples in this lesson you indent any elements that are within other elements. This is known as nesting elements.

When you nest elements within other elements, you create a parent and child relationship between them. The nested elements are the children and the element they are nested within is the parent.

In the following example, the body element is the parent and the paragraph is the child:

< html >

  < head >

  < /head >

  < body >

    < p >Lorem ipsum dolor sit amet.< /p >

  < /body >

 < /html >

Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings.

For example, the two paragraphs in the following code are siblings, since they are both children of the body tag and are at the same level of nesting as each other:

< html >

  < head >

  < /head >

  < body >

    < p >Lorem ipsum dolor sit amet. < /p >

    < p >Ut enim ad minim veniam. < /p >

  < /body >

 < /html >

You use indentation to make the level of nesting clear and readable for yourselves and other developers who will work with your HTML in the future. It is recommended to indent any child elements by two spaces.

The parent, child, and sibling relationships between elements will become much more important later when you start styling your HTML with CSS and adding behavior with JavaScript. For now, however, it is just important to know the distinction between how elements are related and the terminology used to describe their relationships.

Working With Text Question F

What relationship does an element have with any nested element within it?

Question F- Quiz 

HTML comments are not visible to the browser; they allow us to comment on your code so that other developers or your future selves can read them and get some context about something that might not be clear in the code.

Writing an HTML comment is simple: You just enclose the comment with < !-- and -- >tags. For example:

< h1 > View the html to see the hidden comments < /h1 >

< !-- I am a html comment -- >

< p >Some paragraph text< /p >

< !-- I am another html comment -- >

Working With Text Question G

Working with Text Question H

What HTML tag is used to create an unordered list?

If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list.

Unordered lists are created using the < ul > element, and each item within the list is created using the list item element < li >.

Each list item in an unordered list begins with a bullet point:


If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.

Ordered lists are created using the < ol > element. Each individual item in them is again created using the list item element < li >. However, each list item in an ordered list begins with a number instead:



Working with Text Question I

What HTML tag is used to create an ordered list?

Question I- Quiz

If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list.

Unordered lists are created using the < u l> element, and each item within the list is created using the list item element < li >.

Each list item in an unordered list begins with a bullet point:


If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.

Ordered lists are created using the < ol > element. Each individual item in them is again created using the list item element < li >. However, each list item in an ordered list begins with a number instead:

Working with Text Question J

What HTML tag is used to create list items within both unordered and ordered lists?



Question J- Quiz

WORKING WITH TEXT

Learn how to incorporate links and images into your web projects. This course covers the fundamentals of creating links and embedding images to make your websites more interactive and visually appealing.

Links and Images

To get some practice using links and images throughout this lesson you need an HTML project to work with.

- Create a new directory named odin-links-and-images.
- Within that directory, create a new file named index.html.
- Fill in the usual HTML boilerplate.
- Finally, add the following h1 to the body: < h1 >Homepage< /h1 >

Anchor Elements
To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an < a > tag.

Add the following to the body of the index.html page you created and open it in the browser:

< a >click me</a >
You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute.

An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add an href (hyperlink reference) attribute to the opening anchor tag. The value of the href attribute is the destination you want your link to go to.

Add the following href attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied.

< a href="https://www.theodinproject.com/about" >click me</a >
By default, any text wrapped with an anchor tag without an href attribute will look like plain text. If the href attribute is present, the browser will give the text a blue color and underline it to signify it is a link.

It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents.

Links and Images Question A

What HTML tag is used to create a link?



Question A- Quiz 

To get some practice using links and images throughout this lesson you need an HTML project to work with.

- Create a new directory named odin-links-and-images.
- Within that directory, create a new file named index.html.
- Fill in the usual HTML boilerplate.
- Finally, add the following h1 to the body: < h1 >Homepage< /h1 >

Anchor Elements
To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an < a > tag.

Add the following to the body of the index.html page you created and open it in the browser:

< a >click me< /a >
You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute.

An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add an href (hyperlink reference) attribute to the opening anchor tag. The value of the href attribute is the destination you want your link to go to.

Add the following href attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied.

< a href="https://www.theodinproject.com/about" >click me < /a >
By default, any text wrapped with an anchor tag without an href attribute will look like plain text. If the href attribute is present, the browser will give the text a blue color and underline it to signify it is a link.

It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents.

Links and Images Question B

To get some practice using links and images throughout this lesson you need an HTML project to work with.

- Create a new directory named odin-links-and-images.

- Within that directory, create a new file named index.html.

- Fill in the usual HTML boilerplate.

- Finally, add the following h1 to the body: <h1>Homepage</h1>


**Anchor Elements**
To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an < a > tag.

Add the following to the body of the index.html page you created and open it in the browser:

< a>click me< /a >
You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute.

An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add an href (hyperlink reference) attribute to the opening anchor tag. The value of the href attribute is the destination you want your link to go to.

Add the following href attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied.

< a href="https://www.theodinproject.com/about" >click me< /a >
By default, any text wrapped with an anchor tag without an href attribute will look like plain text. If the href attribute is present, the browser will give the text a blue color and underline it to signify it is a link.

It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents.



Links and Images Question C

What attribute tells links where to go to?

Links and Images Question D

What is the difference between an absolute and a relative link?

Question D- Quiz

Links and Images Question E

Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.

To display an image in HTML you use the < img > element. Unlike the other elements you have encountered, the < img > element is self-closing. Empty, self-closing HTML elements do not need a closing tag.

Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a src attribute which tells the browser where the image file is located. The src attribute works much like the href attribute for anchor tags. It can embed an image using both absolute and relative paths.

For example, using an absolute path you can display an image located on The Odin Project site:


To use images that you have on your own websites, you can use a relative path.

Create a new directory named images within the odin-links-and-images project.

Next, download this image and move it into the images directory you just created.

Rename the image to dog.jpg.

Finally add the image to the index.html file:

< body >
  < h1 >Homepage< /h1 >
	< a href="https://www.theodinproject.com/about" >click me< /a >
 
	< a href="pages/about.html" >About< /a >

	< img src="images/dog.jpg" >
< /body >
Save the index.html file and open it in a browser to view Charles in all his glory.

Parent Directories
What if you want to use the dog image in the about page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.

To go to the parent directory you need to use two dots in the relative filepath like this: ../. Let’s see this in action, within the body of the about.html file, add the following image below the heading you added earlier:

< img src="../images/dog.jpg" >
To break this down:

First, you are going to the parent directory of the pages directory which is odin-links-and-images.

Then, from the parent directory, you can go into the images directory.

Finally, you can access the dog.jpg file.

Using the metaphor we used earlier, using ../ in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.

Alt attribute
Besides the src attribute, every image element should also have an alt (alternative text) attribute.

The alt attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.

This is how the The Odin Project logo example you used earlier looks with an alt attribute included:



Links and Images Question F

What two attributes do images always need to have?



Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.

To display an image in HTML you use the < img > element. Unlike the other elements you have encountered, the < img > element is self-closing. Empty, self-closing HTML elements do not need a closing tag.

Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a src attribute which tells the browser where the image file is located. The src attribute works much like the href attribute for anchor tags. It can embed an image using both absolute and relative paths.

For example, using an absolute path you can display an image located on The Odin Project site:


To use images that you have on your own websites, you can use a relative path.

Create a new directory named images within the odin-links-and-images project.

Next, download this image and move it into the images directory you just created.

Rename the image to dog.jpg.

Finally add the image to the index.html file:

< body >
  < h1 >Homepage< /h1 >
	< a href="https://www.theodinproject.com/about" >click me< /a >

	< a href="pages/about.html" >About< /a >

	< img src="images/dog.jpg" >
< /body >
Save the index.html file and open it in a browser to view Charles in all his glory.

Parent Directories
What if you want to use the dog image in the about page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.

To go to the parent directory you need to use two dots in the relative filepath like this: ../. Let’s see this in action, within the body of the about.html file, add the following image below the heading you added earlier:

< img src="../images/dog.jpg" >
To break this down:

First, you are going to the parent directory of the pages directory which is odin-links-and-images.

Then, from the parent directory, you can go into the images directory.

Finally, you can access the dog.jpg file.

Using the metaphor we used earlier, using ../ in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.

Alt attribute
Besides the src attribute, every image element should also have an alt (alternative text) attribute.

The alt attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.

This is how the The Odin Project logo example you used earlier looks with an alt attribute included:



Links and Images Question G

How do you access a parent directory in a filepath?



ebsites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.

To display an image in HTML you use the < img > element. Unlike the other elements you have encountered, the < img > element is self-closing. Empty, self-closing HTML elements do not need a closing tag.

Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a src attribute which tells the browser where the image file is located. The src attribute works much like the href attribute for anchor tags. It can embed an image using both absolute and relative paths.

For example, using an absolute path you can display an image located on The Odin Project site:


To use images that you have on your own websites, you can use a relative path.

Create a new directory named images within the odin-links-and-images project.

Next, download this image and move it into the images directory you just created.

Rename the image to dog.jpg.

Finally add the image to the index.html file:

< body >
  < h1 >Homepage< /h1 >
	< a href="https://www.theodinproject.com/about" >click me< /a >

	< a href="pages/about.html" >About< /a >
 
	< img src="images/dog.jpg" >
< /body >
Save the index.html file and open it in a browser to view Charles in all his glory.

Parent Directories
What if you want to use the dog image in the about page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.

To go to the parent directory you need to use two dots in the relative filepath like this: ../. Let’s see this in action, within the body of the about.html file, add the following image below the heading you added earlier:

< img src="../images/dog.jpg" >
To break this down:

First, you are going to the parent directory of the pages directory which is odin-links-and-images.

Then, from the parent directory, you can go into the images directory.

Finally, you can access the dog.jpg file.

Using the metaphor we used earlier, using ../ in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.

Alt attribute
Besides the src attribute, every image element should also have an alt (alternative text) attribute.

The alt attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.

This is how the The Odin Project logo example you used earlier looks with an alt attribute included:



Links and Images Question H

What are the four main image formats that you can use for images on the web?



LINKS AND IMAGES

Dive into the world of Cascading Style Sheets (CSS) and learn how to style your HTML elements. Explore styling properties, selectors, and layouts to bring your web pages to life.

Learn CSS Foundations

CSS Foundations Question A

Which of the following best describes the CSS code given above?



CSS Foundations Question B

What is the syntax for class and ID selectors?

CSS Foundations Question C

How would you apply a single rule to two different selectors, .red-box and .yellow-box?



CSS Foundations Question D

Given an element that has an id of title and a class of primary, how would you use both attributes for a single rule?

CSS Foundations Question E

What does the descendant combinator do?



Question E- Quiz

CSS Foundations Question F

Which of the following best describes the purpose of the rel attribute in the <link> element when linking an external CSS file to an HTML file?

CSS Foundations Question G

Which of the following is a difference between internal and external CSS methods?

CSS Foundations Question H

Which of the following is the main disadvantage of using inline CSS?



 CSS FOUNDATION

Learn CSS specificity and gain a better understanding of how styles are applied to HTML elements. This course explores the nuances of CSS rules and helps you write efficient and targeted styles for your web pages.

Learn CSS Specificity

Sometimes we may have rules that conflict with one another, and we end up with some unexpected results. “But I wanted these paragraphs to be blue, why are they red like these other paragraphs?!” As frustrating as this can be, it’s important to understand that CSS doesn’t just do things against your wishes. CSS only does what we tell it to do. One exception to this is the default styles that are provided by a browser. These default styles vary from browser to browser, and they are why some elements create a large “gap” between themselves and other elements, or why buttons look the way they do, despite us not writing any CSS rules to style them that way.

So if you end up with some unexpected behavior like this it’s either because of these default styles, not understanding how a property works, or not understanding this little thing called the cascade.

The cascade is what determines which rules actually get applied to your HTML. There are different factors that the cascade uses to determine this. We will examine three of these factors, which will hopefully help you avoid those frustrating “I hate CSS” moments.



The Cascade of CSS Question A

Why might you encounter unexpected behavior in CSS?



A CSS declaration that is more specific will take precedence over less specific ones. Inline styles, which you went over in a previous lesson, have the highest specificity compared to selectors, while each type of selector has its own specificity level that contributes to how specific a declaration is. Other selectors contribute to specificity, but you're focusing only on the ones you’ve gone over so far:

1. ID selectors (most specific selector)
2. Class selectors
3. Type selectors

Specificity will only be taken into account when an element has multiple, conflicting declarations targeting it, sort of like a tie-breaker. An ID selector will always beat any number of class selectors, a class selector will always beat any number of type selectors, and a type selector will always beat any number of anything less specific than it. When no declaration has a selector with a higher specificity, a larger amount of a single selector will beat a smaller amount of that same selector.

The Cascade of CSS Question B

Which of the following is the correct order of specificity for CSS selectors, from most specific to least specific?

Let’s take a look at a few quick examples to visualize how specificity works. Consider the following HTML and CSS code:

< !-- index.html -- >

< div class="main" >
  < div class="list subsection" > < /div >
< /div >
/* rule 1 */
.subsection {
  color: blue;
}

/* rule 2 */
.main .list {
  color: red;
}
In the example above, both rules are using only class selectors, but rule 2 is more specific because it is using more class selectors.

The Cascade of CSS Question C

Based on the given HTML and CSS code, which color would the <div class="list subsection"></div> element be rendered as?

Now, let’s change things a little bit:

< !-- index.html -- >

< div class="main" >
  < div class="list" id="subsection" >< /div >
< /div >
/* rule 1 */
#subsection {
  color: blue;
}

/* rule 2 */
.main .list {
  color: red;
}
In the example above, despite rule 2 having more class selectors than ID selectors, rule 1 is more specific because ID beats class.



The Cascade of CSS Question D

Based on the modified HTML and CSS code, which color would the <div class="list" id="subsection"></div> element be rendered as?

/* rule 1 */
#subsection .list {
  background-color: yellow;
  color: blue;
}

/* rule 2 */
#subsection .main .list {
  color: red;
}
In this final example, both rules are using ID and class selectors, so neither rule is using a more specific selector than the other. The cascade then checks the amounts of each selector type. Both rules only have one ID selector, but rule 2 has more class selectors, so rule 2 has a higher specificity!

While the color: red declaration would take precedence, the background-color: yellow declaration would still be applied since there’s no conflicting declaration for it.



The Cascade of CSS Question E

Considering the updated CSS code, which of the following describes the rendering of the <div class="list" id="subsection"></div> element?

/* rule 1 */
.class.second-class {
  font-size: 12px;
}

/* rule 2 */
.class .second-class {
  font-size: 24px;
}
Here both rule 1 and rule 2 have the same specificity. Rule 1 uses a chaining selector (no space) and rule 2 uses a descendant combinator (the empty space). But both rules have two classes and the combinator symbol itself does not add to the specificity.

/* rule 1 */
.class.second-class {
  font-size: 12px;
}
/* rule 2 */
.class > .second-class {
  font-size: 24px;
}
This example shows the same thing. Even though rule 2 is using a child combinator (>), this does not change the specificity value. Both rules still have two classes so they have the same specificity values.

Note: Not everything adds to specificity When comparing selectors, you may come across special symbols for the universal selector (*) as well as combinators (+, ~, >, and an empty space). These symbols do not add any specificity in and of themselves.



The Cascade of CSS Question F

Based on the given CSS code, which font size would be applied to elements with the class "class second-class"?

Inheritance refers to certain CSS properties that, when applied to an element, are inherited by that element’s descendants, even if we don’t explicitly write a rule for those descendants. Typography based properties (color, font-size, font-family, etc.) are usually inherited, while most other properties aren’t.

The exception to this is when directly targeting an element, as this always beats inheritance:

< !-- index.html -- >

< div id="parent" >
  < div class="child" > < /div >
< /div >
/* styles.css */

#parent {
  color: red;
}

.child {
  color: blue;
}
Despite the parent element having a higher specificity with an ID, the child element would have the color: blue style applied since that declaration directly targets it, while color: red from the parent is only inherited.

The Cascade of CSS Question G

Based on the given HTML and CSS code, what would be the color of the <div class="child"></div> element?

The final factor, the end of the line, the tie-breaker of the tie-breaker. Let’s say that after every other factor has been taken into account, there are still multiple conflicting rules targeting an element. How does the cascade determine which rule to apply?

Really simply, actually. Whichever rule was the last defined is the winner.

/* styles.css */

.alert {
  color: red;
}

.warning {
  color: yellow;
}
For an element that has both the alert and warning classes, the cascade would run through every other factor, including inheritance (none here) and specificity (neither rule is more specific than the other). Since the .warning rule was the last one defined, and no other factor was able to determine which rule to apply, it’s the one that gets applied to the element.



The Cascade of CSS Question H

Question
What determines which CSS rule is applied when there are conflicting rules targeting the same element?

 CSS SPECIFICITY

Learn the CSS box model with this course. Understand how elements are rendered on the web, and learn to manipulate spacing, borders, and padding to achieve your desired layout and design.

Learn the Box Model

Being able to inspect and debug your HTML and CSS is critical to frontend development. This lesson will take us through the Chrome Dev Tools, which allow you to see detailed information about your elements and CSS rules, as well as assist you in finding and fixing problems in your code.

To open up the inspector, you can right-click on any element of a webpage and click “Inspect” or press F12. Go ahead and do that right now to see the HTML and CSS used on this page.

Don’t get overwhelmed with all the tools you’re now seeing! For this lesson, we want to focus on the Elements and Styles panes.

The Box Model Question A

Which panes should you focus on in the Chrome Dev Tools for inspecting and debugging HTML and CSS?

In the Elements pane, you can see the entire HTML structure of your page. You can click on any of the elements in this pane to select that specific element. Alternatively, you can click the blue-highlighted icon shown below on the left, and hover over any element on the page.
![](https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/inspector-icon.png)
When an element is selected, the Styles tab will show all the currently applied styles, as well as any styles that are being overwritten (indicated by a strikethrough of the text). For example, if you use the inspector to click on the “Your Career in Web Development Starts Here” header on [the The Odin Project homepage,](https://www.theodinproject.com/) on the right-hand side you’ll see all the styles that are currently affecting the element, as seen below:
![](https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/overwritten-style.png)


The Box Model Question B

When inspecting an element in the Chrome Dev Tools, if a style property is shown with a strikethrough, what does it indicate?

In the Elements pane, you can see the entire HTML structure of your page. You can click on any of the elements in this pane to select that specific element. Alternatively, you can click the blue-highlighted icon shown below on the left, and hover over any element on the page.
![](https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/inspector-icon.png)
When an element is selected, the Styles tab will show all the currently applied styles, as well as any styles that are being overwritten (indicated by a strikethrough of the text). For example, if you use the inspector to click on the “Your Career in Web Development Starts Here” header on [the The Odin Project homepage,](https://www.theodinproject.com/) on the right-hand side you’ll see all the styles that are currently affecting the element, as seen below:
![](https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/overwritten-style.png)

The Box Model Question C

Which feature in the Elements pane allows you to select any element on a webpage by hovering over it?

In the Elements pane, you can see the entire HTML structure of your page. You can click on any of the elements in this pane to select that specific element. Alternatively, you can click the blue-highlighted icon shown below on the left, and hover over any element on the page.
![](https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/inspector-icon.png)
When an element is selected, the Styles tab will show all the currently applied styles, as well as any styles that are being overwritten (indicated by a strikethrough of the text). For example, if you use the inspector to click on the “Your Career in Web Development Starts Here” header on the The Odin Project homepage, on the right-hand side you’ll see all the styles that are currently affecting the element, as seen below:
![](https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/overwritten-style.png)
# --assignment--
Play around with Chrome Dev Tools and see if you can answer the following question.


The Box Model Question D

In the Styles pane, what information can you view about an element when it is selected?



Now that you understand the basic syntax of HTML and CSS, we’re going to get serious. The most important skills you need to master with CSS are positioning and layout. Changing fonts and colors is a crucial skill, but being able to put things exactly where you want them on a webpage is even more crucial. After all, how many webpages can you find where absolutely every element is just stacked one on top of another?

Learning to position elements on a webpage is not that difficult once you understand just a few key concepts. Unfortunately, many learners race through learning HTML and CSS to get to JavaScript and end up missing these fundamental concepts. This leads to frustration, pain, (and funny gifs) because all the JavaScript skills in the world are meaningless if you can’t stick your elements on the page where you need them to be. So with that in mind, let’s get started.

The Box Model Question E

Why is it important to have a solid understanding of CSS in web development?

The first important concept that you need to understand to be successful in CSS is the box model. It isn’t complicated, but skipping over it now will cause you much frustration down the line.

Every single thing on a webpage is a rectangular box. These boxes can have other boxes in them and can sit alongside one another. You can get a rough idea of how this works by sticking a border on every item on the page like this:

* {
  border: 1px solid red;
}


The Box Model Question F

What is the fundamental concept in CSS that helps you understand the structure of elements as rectangular boxes?

![](https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/box-model-lines.png)
OK, so there might be some circles in the above image… but when it comes to layout, they fit together like rectangular boxes and not circles. In the end, laying out a webpage and positioning all its elements is deciding how you are going to nest and stack these boxes.

The only real complication here is that there are many ways to manipulate the size of these boxes, and the space between them, using padding, margin, and border. But to sum it up briefly:

- padding increases the space between the border of a box and the content of the box.
- margin increases the space between the borders of a box and the borders of adjacent boxes.
- border adds space (even if it’s only a pixel or two) between the margin and the padding.

Be sure to study the diagrams carefully.
![](https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/the-box-model.png)


The Box Model Question G

From inside to outside, what is the order of box-model properties?

The Box Model Question H

What does the box-sizing CSS property do?



Question H-Quiz

The Box Model Question I

What is the difference between the standard and alternative box model?



The Box Model Question J

Would you use margin or padding to create more space between 2 elements?



The Box Model Question K

Which CSS property would you use to create more space between the contents of an element and its border?

Question K- Quiz 

The Box Model Question L

Would you use margin or padding if you wanted two elements to overlap each other?



Question L- quiz

The Box Model Question M

How do you set the alternative box model for all of your elements?

Question M- Quiz

THE BOX MODEL

Discover the power of Flexbox, a layout model that simplifies the design of flexible and responsive web layouts. Learn how to create dynamic and adaptive page structures with ease.

Introduction to Flexbox

**Before we get started**
Flexbox layouts can get a little complicated. In a previous lesson, you learned how to inspect and debug things using your browser’s developer tools. Those tools will be crucial for you in the following lessons. If something isn’t behaving the way you expect, inspecting it in the developer tools should be your first step every time.

Flexbox isn’t necessarily any more difficult than the other concepts that we’ve covered so far, but it does have a few more moving parts. It is going to be somewhat difficult to make use of any of the things you’re learning in these first lessons until you get to the end and can put it all together. As we go, do yourself a favor and **play with all of the code examples.**

You will almost definitely need to come back and reference these lessons (or a couple of the resources we share with you) when you get to the assignments at the end of the section, but if you take your time and experiment with all the code examples we provide, you’ll know better where to look when that time comes.

**Let’s flex**
Flexbox is a way to arrange items into rows or columns. These items will flex (i.e. grow or shrink) based on some simple rules that you can define. To get started, let’s look at a simple demonstration.

We’ve embedded a lot of interactive examples in these lessons. Take your time to experiment with them as you go to cement the concepts in your mind!

We’ll get into exactly what’s going on here soon enough. But for now, let’s uncomment the two flex related CSS declarations in the above Codepen by removing the /* and */ tags surrounding them, then check out the result.

Comments prevent the browser from interpreting lines as code, and are wrapped between specific tags. CSS uses /* as an opening comment tag and */ as a closing comment tag, while HTML and JavaScript have their own syntax. Commented out lines of code can be re-enabled simply by removing the comment tags surrounding the code.

All 3 divs should now be arranged horizontally. If you resize the results frame with the 1x, .5x and .25x buttons you’ll also see that the div elements will "flex". They will fill the available area and will each have equal width.

If you add another div to the HTML, inside of .flex-container, it will show up alongside the others, and everything will flex to fit within the available area.

If it’s hard to see what's going on in the small embedded CodePen, feel free to click the "Edit on CodePen" or "Fork on CodePen" button. This will bring the example into a full-sized environment. Some of the later examples might especially benefit from doing this.

Introduction to Flexbox Question A

INTRODUCTION TO FLEXBOX 

The Odin Project was created in 2013 by a lone developer, Erik Trautman. Over the years, an open source community has sprung up to maintain and expand the project.

freeCodeCamp has expanded upon the open source curriculum to make it run interactively in the browser, with tests to evaluate your code and ensure you've understood key concepts.

If you want the original experience of configuring all of The Odin Project to run on your local computer, you can check out the original Odin Project on [The Odin Project website.](https://www.theodinproject.com/) A huge thanks to The Odin Project community for continuing to maintain this valuable learning resource for developers all around the world.

This course is unofficial, and not endorsed by The Odin Project. Changes to The Odin Project curriculum content have been made, and all instructional material for this course is licenced under [CC-BY-SA-NC 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/)

[© The Odin Project](https://creativecommons.org/licenses/by-nc-sa/4.0/deed)

This course includes content from JavaScript.info, which is licenced under [CC-BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/)

The Odin Project was created in 2013 by a lone developer, Erik Trautman. Over the years, an open source community has sprung up to maintain and expand the project.

The Odin Project - freeCodeCamp Remix

Course Details

Level

Ratings

Modules

Lessons

Public ADA Price

Holder $WORK Price

Similar Courses

Contact Us

Navigation