CSS NOTES RESUME

Revisiting the div Element

In the video, you may have noticed that Kelly used the div element
to create the boxes. We looked briefly at the div element earlier, but
it has been a while—so, let's review the key ideas.

 It's used to divide up the page. The name div is short

for division, because that's what this element is for—you can
use it to divide up the page into different sections.

 It has an "invisible box" around it. Like the

paragraph p element, the division div element has an invisible
box around it—and just like p, it can have a border, a margin, a
width, a height, and so on.

 It is a generic container. A p element is specifically meant to

contain text. In contrast, the div element is a generic
container, meaning you can put whatever other elements you
want inside. You can use the div element to organize the
content and divide the page into sections.

The basic syntax is super simple:

<div>
</div>
And, we can texts inside the div, like this:

<div>
Example
</div>
And if we want to apply a style to a div, we can add a class attribute:

<div class="fancybox">
Example
</div>
And then, in our CSS, we can use a class selector with the same
name .fancybox to add whatever styling we want. Here's the example
shown in the video:
.fancybox{
border: 5px solid green;
margin: 1em;
padding: 0.5em;
width: 100px;
height: 50px;
float: right;
}
The div element is used all the time in HTML to structure web pages,
so you'll be seeing a lot more of it as you continue. On this page,
we'll just be using the div element to play around with boxes and
adjust the margin, padding, border, etc.

Note: If you're curious what this weird text is all about, it's
something called lorem ipsum. Essentially, it's nonsensical placeholder text
that designers commonly use when they're laying out a document. You can
read more about it (and generate your own lorem ipsum) here(opens in a
new tab).

Practice: Boxes Inside Boxes

Let’s play with the boxes a little more.

If you recall, elements can have contents. Currently, only one of our div
elements has contents—the blue box contains the text Hooray, a box!
But instead of using text for the contents, we could use the other box. To do
this, we simply have to nest the div for the red box inside the div for the blue
box (replacing the current contents Hooray, a box!).

Like this:

<div class=”blue_box”>

<div class=”red_box”>

</div>

</div>

Notice how we’ve lined up the indentation to help make the nesting easier to
see.

Give it a try in the workspace

It should look like this, with the red box inside and to the right:

A screenshot showing the red box nested inside and up against the right side
of the blue.

The float: right; property causes the red box to be placed toward the right
side of whatever container it’s inside. Since it is now inside the other div, it
gets floated to the right side of that div.
Practice: Boxes Inside Boxes
LessonDownloads
Let's play with the boxes a little more.

If you recall, elements can have contents. Currently, only one of

our div elements has contents—the blue box contains the text Hooray,
a box!

But instead of using text for the contents, we could use the other
box. To do this, we simply have to nest the div for the red box inside
the div for the blue box (replacing the current contents Hooray, a box!).

Like this:

<div class="blue_box">
<div class="red_box">
</div>
</div>
Notice how we've lined up the indentation to help make the nesting
easier to see.

Give it a try in the workspace!

Quiz Question
Once you've nested the div elements, where does the red box get
displayed?
It's centered inside the blue box.
It moves as far to the right side of the workspace as possible, so
that it partly overlaps with the blue box.
It moves to the right, but stays inside of the blue box. –
Answer.

In case you're not seeing the results described here and need to
troubleshoot, here is the complete code:
<style>
.blue_box {
border: 10px solid blue;
padding: 0.5em;
margin: 0.5em;
width: 150px;
height: 100px;
float: right;
}
.red_box {
border: 10px solid red;
padding: 0.5em;
margin: 0.5em;
width: 20px;
height: 20px;
float: right;
}
</style>

<div class="blue_box">
<div class="red_box">
</div>
</div>

Percentages
Here's an image to refer to when answering the next question:
Question 1 of 2

Suppose we use the width property on an element, as in:

width: 50%;
What part of the element's box model is affected?

Answer

The width property only changes the width of the contents. The padding,
border, and margin are not included in the width (so they add extra width
around the sides of the box!).
Interpreting percentages
Here is a piece of HTML with CSS. Use it to answer the question below!

<style>
.outer {
width: 300px;
border: 5px dotted orange;
}

.inner {
border: 5px solid blue;
width: 50%;
}
</style>
<div class="outer">
<p> This box has a box inside!
<div class="inner">
<p> How wide is the inner box,
<em>including</em> its border?
</div>
</div>
Question 2 of 2
Use the HTML and CSS above to answer this question.

How wide will the inner box be, including its border?

Answer

The answer is 160px ,That’s right, The inner box's content will be 50% the
width of the outer box's width, which would be 150px. But the border adds
10px of width — 5px to the left, and 5px to the right.

Learn more about. CSS

You can find the MDN CSS reference here:

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
Quiz Question
On the web and in print, headlines often use the Small Caps style, where lowercase letters are
replaced with small capital letters.

Use the MDN documentation or your favorite search engine to look up how to do Small Caps in
CSS.

in addition to font-variant: small-caps(opens in a new tab) , you can

also use font-variant-caps: small-caps(opens in a new tab) . That works
too!

Separating Style

Stylesheet or style element — not both!

Note that you can put your CSS code inside of a <style></style> element,
like this …

<style>

P{color:blue;}

</style>

… or inside of a linked stylesheet, like we just talked about.

But you would not want to do both at the same time! In other words, when
you place your CSS in a stylesheet, you don’t need to use a style element—
you can just put the CSS directly into the stylesheet with nothing around it:

P{color:blue;}

This is what you should do for the exercise below—simply put the CSS
directly into your style.css file (and don’t use the style element).
Linking stylesheets

To link to a stylesheet in your HTML file, add a link element to the head of the
HTML file. The syntax for the link element is just like this:

<link rel=”stylesheet” href=”style.css”>

If you are linking to a stylesheet located on another web server, you will use
a full URL in the href attribute. If you’re linking to one that’s in the same
directory as your HTML file, you can just use the filename as a relative URL.

Creating a CSS file

You might think that creating a CSS file requires something special, but all
you have to do is make a new text file (just plain old text!) and rename it
with the extension .css. This is similar to how we create our HTML files—they
are simply text files that have a .html file extension in the name.

Styles.css and apply those styles to the elements in this file.

Stylesheet or style element — not both!

Note that you can put your CSS code inside of a <style></style> element,
like this …

<style>

P{color:blue;}

</style>

… or inside of a linked stylesheet, like we just talked about.

But you would not want to do both at the same time! In other words, when
you place your CSS in a stylesheet, you don’t need to use a style element—
you can just put the CSS directly into the stylesheet with nothing around it:

P{color:blue;}

This is what you should do for the exercise below—simply put the CSS
directly into your style.css file (and don’t use the style element).

Linking stylesheets

To link to a stylesheet in your HTML file, add a link element to the head of the
HTML file. The syntax for the link element is just like this:

<link rel=”stylesheet” href=”style.css”>

If you are linking to a stylesheet located on another web server, you will use
a full URL in the href attribute. If you’re linking to one that’s in the same
directory as your HTML file, you can just use the filename as a relative URL.

Creating a CSS file

You might think that creating a CSS file requires something special, but all
you have to do is make a new text file (just plain old text!) and rename it
with the extension .css. This is similar to how we create our HTML files—they
are simply text files that have a .html file extension in the name.

For example, in the workspace below, you can hover over the plus button
and select New File—and then simply name the file styles.css.

Troubleshooting

When you first start using a separate CSS stylesheet, it is very common to
have trouble getting things to work.
If you have made both your .html file and your .css file and the styles just
don’t seem to be showing up, you can try copying and pasting our code
below into your files.

If our version works, you may have had a typo in yours.

The HTML file

Here’s what the code in your HTML file might look like:

<head>

<link rel=”stylesheet” href=”style.css”>

</head>

<p>

Here is an html file that you can use to experiment with your styles.

</p>

The CSS file

And here is what your CSS file might look like:

P {color:purple; font-size:24;}

(Yes, your styles.css file can really contain just that one line and nothing
else!)

Linking Trouble

If you still don’t see the styles changing, it’s probably not linked correctly.
There are two common mistakes that can happen with the link element.

Mismatched Names
The name of the file in the link element must match the way you named your
CSS file exactly. For instance, if you name your file style.css, but then link to
styles.css (with an s at the end of styles), it will not look in the right location
to get the style info. The names must match exactly for the link to work.

In the gif below, we can see the names don’t match and the styles are not
showing up. Once the name is fixed, it works perfectly.

Stylesheet or style element — not both!

Note that you can put your CSS code inside of a <style></style> element,
like this …

<style>

P{color:blue;}

</style>

… or inside of a linked stylesheet, like we just talked about.

But you would not want to do both at the same time! In other words, when
you place your CSS in a stylesheet, you don’t need to use a style element—
you can just put the CSS directly into the stylesheet with nothing around it:

P{color:blue;}

This is what you should do for the exercise below—simply put the CSS
directly into your style.css file (and don’t use the style element).
Linking stylesheets

To link to a stylesheet in your HTML file, add a link element to the head of the
HTML file. The syntax for the link element is just like this:

<link rel=”stylesheet” href=”style.css”>

If you are linking to a stylesheet located on another web server, you will use
a full URL in the href attribute. If you’re linking to one that’s in the same
directory as your HTML file, you can just use the filename as a relative URL.

Creating a CSS file

You might think that creating a CSS file requires something special, but all
you have to do is make a new text file (just plain old text!) and rename it
with the extension .css. This is similar to how we create our HTML files—they
are simply text files that have a .html file extension in the name.

For example, in the workspace below, you can hover over the plus button
and select New File—and then simply name the file styles.css.

An animated gif showing a new CSS file being created in the workspace.

In the workspace below, you’ll find an HTML file that has some text, but no
style.

Try adding a separate CSS file and linking the two:

Troubleshooting
When you first start using a separate CSS stylesheet, it is very common to
have trouble getting things to work.

If you have made both your .html file and your .css file and the styles just
don’t seem to be showing up, you can try copying and pasting our code
below into your files.

If our version works, you may have had a typo in yours.

The HTML file

Here’s what the code in your HTML file might look like:

<head>

<link rel=”stylesheet” href=”style.css”>

</head>

<p>

Here is an html file that you can use to experiment with your styles.

</p>

The CSS file

And here is what your CSS file might look like:

P {color:purple; font-size:24;}

(Yes, your styles.css file can really contain just that one line and nothing
else!)

Linking Trouble
If you still don’t see the styles changing, it’s probably not linked correctly.
There are two common mistakes that can happen with the link element.

Mismatched Names

The name of the file in the link element must match the way you named your
CSS file exactly. For instance, if you name your file style.css, but then link to
styles.css (with an s at the end of styles), it will not look in the right location
to get the style info. The names must match exactly for the link to work.

In the gif below, we can see the names don’t match and the styles are not
showing up. Once the name is fixed, it works perfectly.

An animated gif showing a link element and CSS file where the name does
not match between the two (one is called style.css and the other styles.css).

Note that we don’t have to call the file style.css specifically—we could call it
hippopotamus.css if we wanted to. It doesn’t matter what we call the file, as
long as the names match. (But please only call it hippopotamus.css if you
have a good reason… 🦛)

Wrong Filepath

If the name is correct and it is still not working, check to make sure the HTML
file and the CSS file are in the same folder. In the gif below, style.css was
created in a separate folder, called My Folder so the styles are not showing
up on the page. To fix this, we can either move the file out of that folder or
we can edit the path in the link element to include the folder name, as in My
Folder/style.css.

Question 1 : First approach

the style attribute, like this:

<p style="color:blue;">Hello!</p>
Answer

This approach is called an inline style because the CSS style is

added directly into a line of HTML (by using the style attribute).

The disadvantage to this approach is that we would have to apply

the inline style over and over again—every time we want a
paragraph of text colored in blue, we would have to add this
attribute to the p element. What if we had 1,000 p elements that
should all be blue? It would get annoying really fast.

Question 2 : Second approach:

Use the style element, like this:

<style>

P{color:blue;}

</style>

Answer

This approach allows us to partially separate our styling

information. With this approach, we would not have to add an inline
style to every single p element—instead, we can write a single line
of code that applies the style to all p elements.

It's not fully separated though. With this approach, the CSS is still in
the same file as the HTML.

Question 3

Third approach:
Add a link element in our HTML file that points to a separate CSS file (also
called a stylesheet):

<link rel=”stylesheet” href=”style.css”>

And then place this code in the CSS file:

P{color:blue;}

Answer

Yup, this one works too!

This approach fully separates the CSS from the HTML. We can
even link multiple HTML files to the same CSS file if we want to!

IN SUMMARY

•Make the paragraph of text centered using the style attribute to apply an
inline style.

•Make the text blue using the style element with a type selector.

•Make the text big using a linked CSS file (stylesheet). Note that the
stylesheet has already been created for you, but you’ll need to add the style
to it, and add the correct link element to your HTML.

Solution
The code in the HTML file should look like this:

<link rel="stylesheet" href="style.css">

<style>
 p {color: blue;}
</style>

<p style="text-align: center;">Style me 3 ways!</p>

And the stylesheet ( style.css) should look like this:

p{
font-size: 24pt;
}