đ1.3: CSS Foundations
Table of Contents
Introduction to CSS
In the previous lesson, you learned how to write the HTML that determines how a web page is structured. The next step is to make that structure look good with some style, which is exactly what CSS is for. In the next few lessons, weâre going to focus on what we believe are some foundational CSS concepts, things that everyone should know from the beginning â whether they are just starting out or need a refresher.
General overview of topics that you will learn in this module:
- Add styles to HTML with CSS.
- Understand how to use the class and ID attributes.
- Add styles to specific elements using the correct selectors.
Basic Syntax
At the most basic level, CSS is made up of various rules. These rules are made up of a selector (more on this in a bit) and a semicolon-separated list of declarations, with each of those declarations being made up of a propertyâvalue pair.
A <div>
is one of the basic HTML elements. It is an empty container. In general, it is best to use other tags such as <h1>
or <p>
for content in your projects, but as we learn more about CSS youâll find that there are many cases where the thing you need is just a container for other elements. Many of our exercises use plain<div>
s for simplicity. Later lessons will go into much more depth about when it is appropriate to use the various HTML elements.
Selectors
Selectors refer to the HTML elements to which CSS rules apply; theyâre what is actually being âselectedâ for each rule. The following subsections donât cover every selector available, but theyâre by far the most common and the ones you should get comfortable using first.
Universal selector
The universal selector will select elements of any type, hence the name âuniversalâ, and the syntax for it is a simple asterisk. In the example below, every element would have the color: purple;
style applied to it.
* {
color: purple;
}
Type selectors
A type selector (or element selector) will select all elements of the given element type, and the syntax is just the name of the element:
<!-- index.html -->
<div>Hello, World!</div>
<div>Hello again!</div>
<p>Hi...</p>
<div>Okay, bye.</div>
/* styles.css */
div {
color: white;
}
Here, all three <div>
elements would be selected, while the <p>
element wouldnât be.
Class selectors
Class selectors will select all elements with the given class, which is just an attribute you place on an HTML element. Hereâs how you add a class to an HTML tag and select it in CSS:
<!-- index.html -->
<div class="alert-text">Please agree to our terms of service.</div>
/* styles.css */
.alert-text {
color: red;
}
Note the syntax for class selectors: a period immediately followed by the case-sensitive value of the class attribute. Classes arenât required to be specific to a particular element, so you can use the same class on as many elements as you want.
Another thing you can do with the class attribute is to add multiple classes to a single element as a space-separated list, such as class="alert-text severe-alert"
. Since whitespace is used to separate class names like this, you should never use spaces for multi-worded names and should use a hyphen instead.
ID selectors
ID selectors are similar to class selectors. They select an element with the given ID, which is another attribute you place on an HTML element. The major difference between classes and IDs is that an element can only have one ID. It cannot be repeated on a single page and should not contain any whitespace:
<!-- index.html -->
<div id="title">My Awesome 90's Page</div>
/* styles.css */
#title {
background-color: red;
}
For IDs, instead of a period, we use a hashtag immediately followed by the case-sensitive value of the ID attribute. A common pitfall is people overusing the ID attribute when they donât necessarily need to, and when classes will suffice. While there are cases where using an ID makes sense or is needed, such as taking advantage of specificity or having links redirect to a section on the current page, you should use IDs sparingly (if at all).
The grouping selector
What if we have two groups of elements that share some of their style declarations?
.read {
color: white;
background-color: black;
/* several unique declarations */
}
.unread {
color: white;
background-color: black;
/* several unique declarations */
}
Both our .read
and .unread
selectors share the color: white;
and background-color: black;
declarations, but otherwise have several of their own unique declarations. To cut down on the repetition, we can group these two selectors together as a comma-separated list:
.read,
.unread {
color: white;
background-color: black;
}
.read {
/* several unique declarations */
}
.unread {
/* several unique declarations */
}
Both of the examples above (with and without grouping) will have the same result, but the second example reduces the repetition of declarations and makes it easier to edit either the color
or background-color
for both classes at once.
Chaining selectors
Another way to use selectors is to chain them as a list without any separation. Letâs say we had the following HTML:
<div>
<div class="subsection header">Latest Posts</div>
<p class="subsection preview">This is where a preview for a post might go.</p>
</div>
We have two elements with the subsection
class that have some sort of unique styles, but what if we only want to apply a separate rule to the element that also has header
as a second class? Well, we could chain both the class selectors together in our CSS like so:
.subsection.header {
color: red;
}
What .subsection.header
does is it selects any element that has both the subsection
and header
classes. Notice how there isnât any space between the .subsection
and .header
class selectors. This syntax basically works for chaining any combination of selectors, except for chaining more than one type selector.
This can also be used to chain a class and an ID, as shown below:
<div>
<div class="subsection header">Latest Posts</div>
<p class="subsection" id="preview">
This is where a preview for a post might go.
</p>
</div>
You can take the two elements above and combine them with the following:
.subsection.header {
color: red;
}
.subsection#preview {
color: blue;
}
In general, you canât chain more than one type selector since an element canât be two different types at once. For example, chaining two type selectors like
div
andp
would give us the selectordivp
, which wouldnât work since the selector would try to find a literal<divp>
element, which doesnât exist.
Descendant combinator
Combinators allow us to combine multiple selectors differently than either grouping or chaining them, as they show a relationship between the selectors. There are four types of combinators in total, but for right now weâre going to only show you the descendant combinator, which is represented in CSS by a single space between selectors. A descendant combinator will only cause elements that match the last selector to be selected if they also have an ancestor (parent, grandparent, etc.) that matches the previous selector.
So something like .ancestor .child
would select an element with the class child
if it has an ancestor with the class ancestor
. Another way to think of it is that child
will only be selected if it is nested inside ancestor
, regardless of how deep that nesting is. Take a quick look at the example below and see if you can tell which elements would be selected based on the CSS rule provided:
<!-- index.html -->
<div class="ancestor">
<!-- A -->
<div class="contents">
<!-- B -->
<div class="contents"><!-- C --></div>
</div>
</div>
<div class="contents"><!-- D --></div>
/* styles.css */
.ancestor .contents {
/* some declarations */
}
In the above example, the first two elements with the contents
class (B and C) would be selected, but that last element (D) wouldnât be. Was your guess correct?
Thereâs really no limit to how many combinators you can add to a rule, so .one .two .three .four
would be totally valid. This would just select an element that has a class of four
if it has an ancestor with a class of three
, and if that ancestor has its own ancestor with a class of two
, and so on. You generally want to avoid trying to select elements that need this level of nesting, though, as it can get pretty confusing and long, and it can cause issues when it comes to specificity.
Properties to get started with
There are some CSS properties that youâre going to be using all the time, or at the very least more often than not. Weâre going to introduce you to several of these properties, though this is by no means a complete list. Learning the following properties will be enough to help get you started.
Color and background-color
The color
property sets an elementâs text color, while background-color
sets, well, the background color of an element. I guess weâre done here?
Almost. Both of these properties can accept one of several kinds of values. A common one is a keyword, such as an actual color name like red
or the transparent
keyword. They also accept HEX, RGB, and HSL values, which you may be familiar with if youâve ever used a photoshop program or a site where you could customize your profile colors.
p {
/* hex example: */
color: #1100ff;
}
p {
/* rgb example: */
color: rgb(100, 0, 127);
}
p {
/* hsl example: */
color: hsl(15, 82%, 56%);
}
Take a quick look at CSS Legal Color Values to see how you can adjust the opacity of these colors by adding an alpha value.
Typography basics and text-align
font-family
can be a single value or a comma-separated list of values that determine what font an element uses. Each font will fall into one of two categories, either a âfont family nameâ like "Times New Roman"
(we use quotes due to the whitespace between words) or a âgeneric family nameâ like serif
(generic family names never use quotes).
If a browser cannot find or does not support the first font in a list, it will use the next one, then the next one and so on until it finds a supported and valid font. This is why itâs best practice to include a list of values for this property, starting with the font you want to be used most and ending with a generic font family as a fallback, e.g. font-family: "Times New Roman", serif;
font-size
will, as the property name suggests, set the size of the font. When giving a value to this property, the value should not contain any whitespace, e.g. font-size: 22px
has no space between â22â and âpxâ.
font-weight
affects the boldness of text, assuming the font supports the specified weight. This value can be a keyword, e.g. font-weight: bold
, or a number between 1 and 1000, e.g. font-weight: 700
(the equivalent of bold
). Usually, the numeric values will be in increments of 100 up to 900, though this will depend on the font.
text-align
will align text horizontally within an element, and you can use the common keywords you may have come across in word processors as the value for this property, e.g. text-align: center
.
Image height and width
Images arenât the only elements that we can adjust the height and width on, but we want to focus on them specifically in this case.
By default, an <img>
elementâs height
and width
values will be the same as the actual image fileâs height and width. If you wanted to adjust the size of the image without causing it to lose its proportions, you would use a value of âautoâ for the height
property and adjust the width
value:
img {
height: auto;
width: 500px;
}
For example, if an imageâs original size was 500px height and 1000px width, using the above CSS would result in a height of 250px.
These properties work in conjunction with the height and width attributes in the HTML. Itâs best to include both of these properties and the HTML attributes for image elements, even if you donât plan on adjusting the values from the image fileâs original ones. When these values arenât included, if an image takes longer to load than the rest of the page contents, it wonât take up any space on the page at first but will suddenly cause a drastic shift of the other page contents once it does load in. Explicitly stating a height
and width
prevents this from happening, as space will be âreservedâ on the page and appear blank until the image loads.
Adding CSS to HTML
Now that weâve learned some basic syntax, you might be wondering how to add all this CSS to our HTML. There are three methods to do so.
External CSS
External CSS is the most common method you will come across, and it involves creating a separate file for the CSS and linking it inside of an HTMLâs opening and closing <head>
tags with a void <link>
element:
<!-- index.html -->
<head>
<link rel="stylesheet" href="styles.css">
</head>
/* styles.css */
div {
color: white;
background-color: black;
}
p {
color: red;
}
First, we add a void <link>
element inside of the opening and closing <head>
tags of the HTML file. The href
attribute is the location of the CSS file, either an absolute URL or, what youâll be utilizing, a URL relative to the location of the HTML file. In our example above, we are assuming both files are located in the same directory. The rel
attribute is required, and it specifies the relationship between the HTML file and the linked file.
Then inside of the newly created styles.css
file, we have the selector (the div
and p
), followed by a pair of opening and closing curly braces, which create a âdeclaration blockâ. Finally, we place any declarations inside of the declaration block. color: white;
is one declaration, with color
being the property and white
being the value, and background-color: black;
is another declaration.
A note on file names: styles.css
is just what we went with as the file name here. You can name the file whatever you want as long as the file type is .css
, though âstyleâ or âstylesâ is most commonly used.
A couple of the pros to this method are:
- It keeps our HTML and CSS separated, which results in the HTML file being smaller and making things look cleaner.
- We only need to edit the CSS in one place, which is especially handy for websites with many pages that all share similar styles.
Internal CSS
Internal CSS (or embedded CSS) involves adding the CSS within the HTML file itself instead of creating a completely separate file. With the internal method, you place all the rules inside of a pair of opening and closing <style>
tags, which are then placed inside of the opening and closing <head>
tags of your HTML file. Since the styles are being placed directly inside of the <head>
tags, we no longer need a <link>
element that the external method requires.
Besides these differences, the syntax is exactly the same as the external method (selector, curly braces, declarations):
<head>
<style>
div {
color: white;
background-color: black;
}
p {
color: red;
}
</style>
</head>
<body>
...
</body>
This method can be useful for adding unique styles to a single page of a website, but it doesnât keep things separate like the external method, and depending on how many rules and declarations there are it can cause the HTML file to get pretty big.
Inline CSS
Inline CSS makes it possible to add styles directly to HTML elements, though this method isnât as recommended:
<body>
<div style="color: white; background-color: black;">...</div>
</body>
The first thing to note is that we donât actually use any selectors here, since the styles are being added directly to the opening <div>
tag itself. Next, we have the style=
attribute, with its value within the pair of quotation marks being the declarations.
If you need to add a unique style for a single element, this method can work just fine. Generally, though, this isnât exactly a recommended way for adding CSS to HTML for a few reasons:
- It can quickly become pretty messy once you start adding a lot of declarations to a single element, causing your HTML file to become unnecessarily bloated.
- If you want many elements to have the same style, you would have to copy and paste the same style to each individual element, causing lots of unnecessary repetition and more bloat.
- Any inline CSS will override the other two methods, which can cause unexpected results. (While we wonât dive into it here, this can actually be taken advantage of.)
- Play the CSS Diner game to practice selectors.
Additional Resources
- Mozilla CSS values and units can be used to learn the various types of values possible in absolute or relative terms.
The Cascade
In the previous lesson, we covered basic CSS syntax and selectors. Now, itâs time to combine our knowledge of selectors with the C of CSS â the cascade.
The cascade of CSS
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 our 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 our 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.
Specificity
A CSS declaration that is more specific will take precedence over less specific ones. Inline styles, which we went over in the 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 weâre focusing only on the ones weâve gone over so far:
- ID selectors (most specific selector)
- Class selectors
- 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 less specific selectors. When there is no declaration with a selector of higher specificity, a rule with a greater number of selectors of the same type will take precedence over another rule with fewer selectors of the same type.
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">Red text</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, so the color: red
declaration would take precedence.
Now, letâs change things a little bit:
<!-- index.html -->
<div class="main">
<div class="list" id="subsection">Blue text</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. In this case, the color: blue
declaration would take precedence.
And a bit more complex:
<!-- index.html -->
<div class="main">
<div class="list" id="subsection">Red text on yellow background</div>
</div>
/* rule 1 */
#subsection {
background-color: yellow;
color: blue;
}
/* rule 2 */
.main #subsection {
color: red;
}
In this final example, the first rule uses an ID selector, while the second rule combines an ID selector with a class selector. Therefore, neither rule is using a more specific selector than the other. The cascade then checks the number of each selector type. Both rules have only one ID selector, but rule 2 has a class selector in addition to the ID selector, 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.
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.
/* 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.
/* rule 1 */
* {
color: black;
}
/* rule 2 */
h1 {
color: orange;
}
In this example, rule 2 would have higher specificity and the orange
value would take precedence for this element. Rule 2 uses a type selector, which has the lowest specificity value. But rule 1 uses the universal selector (*
) which has no specificity value.
Inheritance
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.
Rule order
The final factor, the end of the line, the tie-breaker of the tie-breakers. 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?
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.
Remember the Recipe page you created as practice from the HTML Foundations section? Well, itâs rather plain looking, isnât it? Letâs fix that by adding some CSS to it!
- How you actually style it is completely open, but you should use the external CSS method (for this practice and moving forward). You should also try to use several of the properties mentioned in the previous lesson (color, background color, typography properties, etc). Take some time to play around with the various properties to get a feel for what they do. For now, donât worry at all about making it look good. This is just to practice and get used to writing CSS, not to make something to show off on your resume.
- We havenât covered how to use a custom font for the
font-family
property yet, so for now take a look at CSS Fonts for a list of generic font families to use, and CSS Web Safe Fonts for a list of fonts that are web safe. Web safe means that these are fonts that are installed on basically every computer or device (but be sure to still include a generic font family as a fallback).
Additional resources
- The CSS Cascade is a great, interactive read that goes a little more in detail about other factors that affect what CSS rules actually end up being applied.
- CSS Specificity Explained from Kevin Powell goes through various specificity examples and gives some advice on avoiding wrestling with specificity.
- CSS Specificity Calculator allows you to fill in your own selectors and have their specificity calculated and visualized.
- Mozilla CSS Properties Reference can be used to learn if a particular CSS property is inherited or not; look for the Inherited field inside the Formal Definition section. Hereâs an example for the CSS
color
property.
Inspecting HTML & CSS
Being able to inspect and debug your HTML and CSS is critical for 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.
The inspector
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 panels.
Inspecting elements
In the Elements panel, you can see the entire HTML structure of your page. You can click on any of the elements in this panel 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.
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 TOP homepage, on the right-hand side youâll see all the styles that are currently affecting the element, as seen below:
Testing styles in the inspector
The Styles panel also allows you to edit styles directly in the browser. You can click inside of any individual selector to add a new rule or click on an existing attribute or value to alter it. When doing so, the webpage responds with the changes in real-time. This wonât affect the source code in your text editor, but it is extremely useful for quickly testing out various attributes and values without needing to reload the page over and over again.
Go through the following sections of the official Chrome DevTools docs:
- Devtools overview: donât navigate to any other pages linked here; just get familiar with what tools are available in the DevTools, rather than how to use all of them right now.
- Open Chrome DevTools: similar to what we went over above, but with some nice extras.
- Get Started With Viewing And Changing The DOM: skip through any part that uses the JavaScript console.
- View and change CSS: be sure to follow along with any interactive instructions!
Additional resources
- This article about how we can utilize CSS overview in the developer tools to check the colors, font styles, media-queries, etc. used on a particular webpage.
The Box Model
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 and 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.
- Youâll learn all about the box model.
- Youâll learn how to make sure elements are just the right size with
margin
,padding
, andborders
.
The box model
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 would 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 applying an outline to every element on the page like this:
* {
outline: 2px solid red;
}
You can use the browserâs inspector to add the CSS above to this web page if you want, by clicking the +
button in the top right of the âStylesâ panel within the âElementsâ tab. Boxes in boxes!
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
, border
, and margin
. The assigned articles go into more depth on this concept, but to sum it up briefly:
padding
increases the space between the border of a box and the content of the box.border
adds space (even if itâs only a pixel or two) between the margin and the padding.margin
increases the space between the borders of a box and the borders of adjacent boxes.
Be sure to study the diagrams carefully.
- Learn CSS Box Model In 8 Minutes is a straightforward overview of the box model, padding and margin. Go ahead and watch this now; it informs everything else.
- box-sizing: border-box (EASY!) is an add-on to the above resource with a better explanation of âbox-sizingâ.
- Because the box model concept is so incredibly fundamental, letâs dig a bit deeper with MDNâs lesson on the box model. It covers the same material as the video(s) above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
- The CSS Tricks page on margins has some further information about the
margin
property that youâll find useful. Specifically, the sections aboutauto
and margin collapsing contain things youâll want to know.
Knowledge check
The following questions are an opportunity to reflect on key topics in this lesson. If you canât answer a question, click on it to review the material, but keep in mind you are not expected to memorize or master this knowledge.
- From inside to outside, what is the order of box-model properties?
- What does the
box-sizing
CSS property do? - What is the difference between the standard and alternative box model?
- Would you use
margin
orpadding
to create more space between 2 elements? - Would you use
margin
orpadding
to create more space between the contents of an element and its border? - Would you use
margin
orpadding
if you wanted two elements to overlap each other? - How do you set the alternative box model for all of your elements?
- How do you center an element horizontally?
Block and Inline
In the previous lesson, we discovered that different display types have unique box models, and we can modify the box calculation by changing the display
property. CSS has two box types: block
and inline
boxes, which determine element behavior and interaction. The display
property controls how HTML elements appear on the webpage. We will explore its various options further in this lesson.
- Youâll learn about âNormal flowâ.
- Youâll learn the difference between
block
andinline
elements. - Youâll learn which elements default to
block
and which elements default toinline
. - Youâll learn what divs and spans are.
Block vs inline
Most of the elements that you have learned about so far are block elements. In other words, their default style is display: block
. By default, block elements will appear on the page stacked atop each other, each new element starting on a new line.
Inline elements, however, do not start on a new line. They appear in line with whatever elements they are placed beside. A clear example of an inline element is a link, or <a>
tag. If you stick one of these in the middle of a paragraph of text, the link will behave like a part of the paragraph. Additionally, padding and margin behave differently on inline elements. In general, you do not want to try to put extra padding or margin on inline elements.
The middle ground inline-block
Inline-block elements behave like inline elements, but with block-style padding and margin. display: inline-block
is a useful tool to know about, but in practice, youâll probably end up reaching for flexbox more often if youâre trying to line up a bunch of boxes. Flexbox will be covered in-depth in the next lesson.
Div and Span Elements
We canât talk about block and inline elements without discussing divs and spans. All the other HTML elements we have encountered so far give meaning to their content. For example, paragraph elements tell the browser to display the text it contains as a paragraph. Strong elements tell the browser which texts within are important and so on. Yet, divs and spans give no particular meaning to their content. They are just generic boxes that can contain anything.
Having elements like this available to us is a lot more useful than it may first appear. We will often need elements that serve no other purpose than to be âhookâ elements. We can give an id or class to target them for styling with CSS. Another use case we will face regularly is grouping related elements under one parent element to correctly position them on the page. Divs and spans provide us with the ability to do this.
div
is a block-level element by default. It is commonly used as a container element to group other elements. Divs allow us to divide the page into different blocks and apply styling to those blocks.
See the Pen block-inline-lesson-div-example by TheOdinProject (@TheOdinProjectExamples) on CodePen.
span
is an inline-level element by default. It can be used to group text content and inline HTML elements for styling and should only be used when no other semantic HTML element is appropriate.
See the Pen Untitled by TheOdinProject (@TheOdinProjectExamples) on CodePen.
- The concept of âNormal flowâ is implied in the box-model resources, but isnât laid out very specifically. Read âNormal Flowâ from MDN to make sure you understand how elements lay themselves out by default.
- W3 schoolsâ âHTML Block and Inline Elementsâ has a description and a list of all the default block and inline elements.
- The Digital Ocean tutorial âInline vs Inline-block Display in CSSâ has a couple of great examples that clarify the difference between
inline
andinline-block
. - Apply what you learned about the box model to improve the look of your Recipe pageâs
index.html
homepage. Currently, itâs just a plain list, so get creative with layouts, colors, and styles to make your page uniquely captivating.
Knowledge check
The following questions are an opportunity to reflect on key topics in this lesson. If you canât answer a question, click on it to review the material, but keep in mind you are not expected to memorize or master this knowledge.
- What is the difference between a block element and an inline element?
- What is the difference between an inline element and an inline-block element?
- Is an
h1
block or inline? - Is
button
block or inline? - Is
div
block or inline? - Is
span
block or inline?
Acknowledgement
Content on this page is adapted from The Odin Project and most images are from Interneting is Hard.