- [Chris] Hi, this is Chris Converse,
and in this episode, we'll explore some CSS techniques
for styling text and links in a footer
for multiple screen sizes
without the need for a lot of extra HTML on our webpage.
Our footer content is divided into two div elements,
and we'll use these two divs
to style all of the footer content.
So if you'd like to follow along with me,
download the exercise files,
and let's begin by opening index.html in a text editor.
And once you have the HTML file open,
up in the head area, you'll see we have a link
to style.css, which we'll be opening in a few minutes.
If I scroll down inside of the body area, we have a header,
an article element, and a footer element.
Inside the footer, we have two divs.
There's the first div here, which contains
the copyright information.
There's also a link around the company name
and two additional links and a break tag.
And in the second div we just simply have four anchor links.
So I wanna call attention to the fact
that we do have a break tag here,
which we're going to be turning off for larger screens,
and it's these two div elements we're going to be targeting
in our CSS in order to style multiple layouts of the footer.
Now if you'd like to see the layout we're going to
be starting with, you can open index.html in a browser.
Inside of our browser, we can see the footer
showing up down here at the bottom.
Now there's no formatting in place,
so we don't have any spaces between our links,
and we can see the break tag pushing the privacy policy
and legal statement on the next line.
And so to begin styling our content,
let's go back to the exercise files,
and let's open style.css in our text editor.
And now inside of our CSS file, let's scroll down,
and let's find the rule that targets
all the anchor tags inside of the footer.
After text decoration none,
let's come in here and add a property.
Let's set a margin of zero pixels on the top,
then a space, 16 pixels on the right,
then a space, zero on the bottom, and zero on the left.
Add our semicolon.
I'll save my file, reload in the browser.
We'll now see that all of the anchor links
have a 16 pixel margin on the right.
However, the link for the company
has a 16 pixel margin on the right,
and we have a period here.
So we're gonna fix that in a moment.
Back in our CSS after the a, colon, hover,
let's hit a few returns, and let's set the break tag
so that it does not display, so that privacy policy
and legal statement will be on the same line
as the copyright.
So I'll type footer, space, br for the break tag,
put in our brackets,
let's come in here and set display to none.
Save our work, go back to the browser.
We can see that these two links
are now showing up on the first line.
Let's go back to our CSS, and now let's target
the anchor links in the first div element.
We wanna add some margin properties
to the left-hand side of the anchor links.
So I'll start with footer, then a space.
Then we'll use a greater than sign,
then type in div.
We wanna target the divs that are immediately
inside the footer element.
Then we're gonna use the nth child selector.
So I'll type a colon, nth dash child,
put in our parentheses, and then inside of the parentheses,
we'll put a number one to target the first div element
that's immediately inside of the footer.
Then outside of the parentheses,
let's hit a space, type the letter A,
so we're targeting all of the anchor links
in the first div element, put in our brackets,
let's split this open, and let's add a property of margin,
and we'll set the values to zero on the top,
space, zero on the right, space, zero on the bottom,
and 12 pixels on the left.
With that in place, we'll hit save,
and now back in the browser, all of the links
in the first div have a margin left property of 12 pixels,
and now we'll go back to our CSS file,
and we'll override the very first anchor link
so that the company name doesn't have a margin left,
but that privacy policy and legal statement
will still have the margin settings.
So back in our CSS, let's create a new rule.
Target footer,
greater than,
div, colon,
nth child,
put in our parentheses,
put a number one inside,
then a space,
then we'll type a colon nth child.
Put in our parentheses.
We'll put a number one inside of here as well.
So we're targeting the first anchor link in the first div.
Then a space, put in our brackets.
I'll split these open,
and the first property's gonna be margin.
We're gonna set this to zero on all four sides,
and then on the next line, let's come in here
and set a float property to none.
Now we're not using floats at the moment,
but when we get to smaller screens,
we are going to invoke a float property,
and we wanna make sure the company name
doesn't pick up that property as well.
So now with that in place, let's save our work.
Let's go back to the browser and hit reload,
and we'll now see that the anchor link
around the company name has no extra margin
on the right or left, but privacy policy and legal statement
have a margin on the left,
which is a little different from the links in the second div
which have the margin on the right hand side.
And now the last property I wanna set for the larger screens
is to make the second div spaced out
a little further from the first div.
So back to our CSS,
we'll type footer,
greater than,
div, colon, nth child.
Put in our parentheses.
Inside of the parentheses, we'll put a number two.
We're gonna target the second div element,
which holds the links for about us,
products, services, and contact us.
Put in our brackets, we'll split this open,
and we'll come in here inside of margin property.
We're gonna set 14 pixels on the top, zero on the right,
zero on the bottom, and zero on the left.
Save our work, and we'll now see that these four links
are now spacing 14 additional pixels
away from the first div.
So now with these in place, let's scroll down
and let's make some changes for when our browser
is under 700 pixels.
So the first thing I'll do is come in here
and change the width of my browser
so that we are under 700 pixels.
So here, we're at about 650.
If you scroll down in the CSS,
I've already put a media query in here
with a max width of 700.
Now the first thing I'm going to do in this media query
is turn the break tag back on just in case
the legal statement or privacy policy
begin to wrap for the smaller screen.
So inside the media query, we're gonna type footer, space,
br,
put in our brackets.
We're gonna set a display type of inline.
With that in place, we'll hit save.
We'll now see that privacy policy and legal statement
now wrap to the next line.
Now we'll need to get rid of that extra margin
on the left hand side.
So again still inside of the media query
for a max width of 700,
let's now target the anchor tags inside of the first div.
So footer, space, greater than,
div, colon, nth child.
Put in our parentheses, put in number one,
then a space, then an A, targeting the anchor tag.
Put in our brackets.
Inside here, the first property we're gonna set's
gonna be the display type.
We're gonna set the display to inline block.
This way, we can assign margin properties
to the top and bottom.
Otherwise an anchor tag, which has a display type of inline,
will not allow us to assign margins to the top and bottom.
So after display, let's hit a return.
We'll type margin, we're gonna put 16 pixels on the top.
Space, 12 pixels on the right,
zero on the bottom, and zero on the left.
Save our work, go back to the browser.
Now we can see privacy policy and legal statement
are spaced a little further away from the first line
of the copyright, and the margin left property's
been removed as well.
So at this point, let's make some more adjustments
for when the browser is less than 500 pixels wide.
So the first thing I'll do is adjust my preview here
so that we're at about 470.
Let's come over to the CSS, scroll down here a little bit.
I have a media query in here with a maximum width of 500,
and inside of here, let's start by targeting
all of the anchor tags in the footer.
So footer, greater than, div, space, A.
Put in our brackets.
Inside of here, let's set a float property.
Let's set the value to left,
and then to make sure each item shows up on its own line,
let's set a clear property of left as well.
And then next, let's set a margin property.
Let's set that to 16 pixels on the top,
zero on the right, zero on the bottom, and zero on the left.
Now since all of our anchor links now have float properties,
we're gonna need to clear the floats
on the main div elements.
So for the next rule, we're gonna type footer,
greater than, div,
two colons.
Let's put in a pseudo-element of after,
then a space.
Put in our brackets.
Let's hit a few returns.
Let's put in content.
Next, two single tick marks and a semicolon.
So we're setting the content to nothing.
Let's set a display type of block,
and lastly, let's set a clear property of both.
And then finally, let's add one more rule
to target the second div element.
So I'll type footer, greater than,
div,
colon, nth child.
Put in our parentheses.
Number two.
Space, let's put in our brackets.
Let me scroll up here a little bit.
Now what we wanna do for the second div
is add a rule across the top
and then space this out a little bit further.
So first, let's start with the spacing.
So we'll do that by adding a margin property.
We'll add 24 pixels to the top,
zero on the right, zero on the bottom, and zero on the left.
Next property's padding.
We're gonna set 10 pixels on the top,
zero on the right, zero on the bottom, and zero on the left.
And then finally, we'll add a border to the top.
So border dash top,
colon, space,
one pixel for the size,
solid for the style,
then a space,
and then for the color, we'll use the RGBA color space.
So RGBA, parentheses, semicolon.
Inside of the parentheses,
for red, we're gonna set 95, comma,
87 for green, comma, 75 for blue,
then a comma, and then we'll set .3 for the alpha setting.
So now with these in place, save your work,
go back to the browser, hit reload,
and now when the browser's width is under 500 pixels,
we'll see all of the links will stack up vertically.
We'll see the rule being applied to the second div
in the footer element, and then if we come back
and increase the width of the browser,
we can see the different footer layouts
that we've created with our CSS.
So with minimal structure in our HTML file,
we were able to modify our footer layout
for multiple screen sizes using only CSS.
Now if you'd like to learn to build a full webpage
using HTML and CSS that's responsive across screen sizes
as well as to printed page,
check out Creating a Responsive Web Design,
which is also available here in the library.
And with that, I'll conclude this episode,
and as always, thanks for watching.