BRIAN YU: Using HTML,
we now have the ability
to build web pages with a number of
different components and nested tags
within each other to describe the
structure of any web page we want.
Of course, our web pages
right now look pretty simple.
They all have a white background.
Everything's from the same font.
Everything is aligned on the
left-hand side of the screen.
And what we might like to do is
add some styling to our web page,
make it look a little more
aesthetically pleasing,
make our web pages look a
little bit more personal.
And that's what CSS is
going to allow us to do.
CSS, which stands for a
Cascading Style Sheets,
is a language that's going to
let us add style to our web pages
by adding some additional
attributes to our HTML elements.
Let's take a look at how
that's going to work.
Here we have a very simple
HTML page written in index.html
that just says we have an HTML
page, whose title is hello.
And inside the body of the
web page, we have in H1
tag that says we have a big heading
at the top, that says hello world.
If we take a look at what
this page actually looks like,
as by running HTTP server,
and then loading index.html,
you'll see that in big black
letters we have hello world.
How might we want to
change the style of this?
Well, one thing we might want to
do is change the color of the text.
We might want hello world to be in
blue instead of black, for example.
How would we do that?
Well, it turns out we can add
an attribute to this H1 tag.
Recall that we've used attributes before
to add additional information to tags
that we've used.
We added in an HREF
attribute to our anchor tags
to specify what URL we want
users to be taken to when
they click on a particular link.
We added a source
attribute to our image tag
to specify what image we actually
want to display in the web page
at that particular position in the page.
And likewise, we can
add another attribute
to our H1 tag called
style, which is going
to let us add CSS, some
Cascading Style Sheets code that
is going to let us choose how we would
like to style this particular HTML
element.
So I'll set the style equal to
some string in quotation marks.
And here's where I actually
begin to write some CSS code.
And what I'm going to write is
color:blue, followed by a semicolon.
And even if you've
never seen CSS before,
what you might guess
this is going to do is
take this H1 element, this heading
that appears in my web page,
and change its color to blue.
Let's take a look.
If I go back to my web
browser and refresh the page,
indeed now hello world,
instead of being in black,
has now changed to be in blue instead.
So let's now dissect this and
understand what exactly is happening
when I'm specifying this color.
Here, we added a style attribute to H1.
And then in quotation marks
we're including the CSS code.
Color here is one of many
different CSS properties,
style attributes of elements
that we have the ability
to change if we would like to.
The colon says, what comes next
is the value for the CSS property
that should be there.
And here we're specifying blue to
mean the color of this H1 element
should be blue.
And the semicolon comes at the
end just to finish the thought.
The color of this H1
element is going to be blue.
And we can apply this style, not just
to H1s, but to other HTML elements
as well.
I could beneath it add a paragraph
that says, this is my web page.
And by default, it's going to be black.
If I refresh the page, only hello
world is in blue because I only added
the style color:blue attribute to
the H1 tag and not to the paragraph.
Of course, if I wanted the
paragraph to also be blue,
I could say the paragraph
style is color:colon.
And that, when I reload the page, is
also going to display both hello world
and this is my web page both using blue.
Of course now at this point,
this should strike you
as potentially suboptimal design.
Here I've repeated the same code,
saying the H1 has a color of blue,
the paragraph has a color of blue.
Maybe I just wanted the
whole web page to be blue.
But rather than adding color:colon
blue to every single HTML element,
we can do better than that.
So instead, I'll remove the
style attribute from the H1
and from the paragraph and
instead add it to the body.
I'll say for the body,
let's give this body
a color of blue, which means for all
of the elements contained within it,
both the heading that says hello
world, and the paragraph that
says this is my web page, I
would like for all of that
to show up with a color of blue.
Now if I refresh the page,
it looks exactly the same.
Hello world is still blue, the
paragraph that says this is my web page
is still blue.
But now, rather than including
that CSS property twice,
I've only included it once.
And the children element,
so to speak, the things
that are nested within
body element, are all
going to inherit the CSS properties
from the parent element, so to speak.
So H1 and the paragraph are
getting the color information
from the body tag, where we
specify that for the body
the style should have a color of blue.
Now if I were to change that to
color:colon red instead, for example,
and then reloaded the
page, now both elements,
the heading and the paragraph, will both
change their style to be red instead
of blue.
So now we've seen the ability to
change the color of an HTML element
as by adding a style
attribute to that HTML tag,
and then specifying
the color CSS property,
followed by whatever color we want
to make that particular HTML element.
But there are other
properties we can add as well.
One thing you might want
to change, for example,
is the alignment of a
particular HTML element.
By default, everything
in HTML is left-aligned.
The heading is along the left,
the paragraphs are left-aligned,
the images are left-aligned.
We might often want
something to be right-aligned
or in the center, for example.
So to do that, we could take,
for example, for this H1 tag,
let's add a style attribute back
to it and say, text-align:center.
Text-align here is the
name of the CSS property
that determines how things should
be aligned for this particular HTML
element.
And center is one of the
possible values it could take on.
It could be left or center or right.
And here I'd like to say for
this H1 tag, let's go ahead
and take the element and center it.
Such that now if I go back to
index.html and I refresh the page,
we now see that hello
world has been centered.
And we could do the same thing.
I could have instead put the style
on the paragraph instead of the H1.
And if I do that, well, then instead
of the heading being centered,
then the paragraph is
going to be centered.
Hello world is left-aligned.
This is my web page is centered.
And if I think this is my web page
right now looks a little bit small,
I can change the font size of a
particular element using CSS as well.
Here, what I'd like to do is specify
that the text alignment is centered.
But I would also like to specify
that the font size, font-size, is
going to be large, for example.
I could be very precise
and specify something
like I want it to be a
24-point font, for example.
But here I'm just saying that I
want the font size to be large.
And now I can go back, refresh the page.
And now you'll notice,
this is my web page
got a little bit bigger
because I specified that I
wanted the font size to be large.
And here you'll notice
that for the first time
we're applying multiple CSS
properties to the same HTML element.
On this paragraph, I've said that I
want the text alignment to be centered
and I want the font size to be large.
And you can do that.
Every CSS property followed by value
just has a semicolon at the end of it.
And so that semicolon separates
multiple possible CSS properties
that you could add to an HTML element.
I could say the text element
is going to be centered
and the font size is going to be
large as two distinct thoughts that
are separated by that semicolon.
So now we have the text is red.
We have this paragraph that is centered.
We have a font size that is large.
And there are many,
many other properties
that we could add to this page as well.
For example, if I wanted the background
color of my entire page to be blue,
for instance, I could up in the body
say that for the whole body of the page
the color is red, meaning
text that shows up
on the page, that should be red.
But maybe I want the background color
using the background-color property
to be blue, for example.
Now, if I go back to this
web page and refresh it,
I now see that the background
of this page is blue.
I have a heading in red, a
centered paragraph that's large,
and then a background that's all blue.
And so you can add more and
more of these CSS properties
to your HTML elements
to get them to look
how you want them to look, changing
their color, changing their size,
changing their alignment, and so forth.
So let's now take a look at
a more sophisticated web page
that we might want to
add some CSS styling to.
So here, I'll go ahead and remove the
styling that's already on this page.
And in this case I'll add some H2s.
Recall that H2s, like H1s, are headings.
They're just a little bit
smaller, generally used
for subsections of a
web page, for example.
And so here is maybe a
subsection 1 of the web page.
And beneath that, I have a second
subsection of the web page.
And maybe there's some
paragraphs of text.
This is some text.
And then beneath 2,
this is some more text.
And here for instance,
imagine that I wanted
to take both of these subsections,
subsection 1 and subsection 2, and give
them the same style.
I would like for both of the subsection
headings to be centered, for example.
And I'd like for both of them to be
blue instead of black by default.
Because right now if I
were to load this page,
you'll see that I have subsection
1, subsection 2, followed by this
is some text.
And the web page is very simple.
So how might I do that?
Well, on this H2 element, I might
say, let's add some style information.
This time I want the text
alignment to be centered.
And I would like for
the color to be blue.
So again, some CSS code
that lets me specify
how I would like for this
CSS element to be aligned
and what color I would like it to have.
And I can do the same thing
for the other subsection
if I would like for it to
be styled the same way.
I could say, style equals
text-align:center; color is blue.
And so now by doing that, if I go
back to the HTML page and refresh it,
you'll notice the result is exactly
as I intended it for it to be.
Each of the subsections is now centered.
And instead of being
black, they're blue.
S been able to add my custom
styling to this HTML page.
Of course, this again should strike
you as potentially suboptimal design.
Here, I've repeated almost the exact
same code in two different places.
I've specified that the style for this
H2 is text-align:center, color is blue.
And I've done the same thing
for the subsection beneath it.
Of course, before when everything I
wanted to just have the same color,
I could factor things out into
the parent element and say,
I want the body to have a
color of blue, for example.
But in this case, we
can't quite do that,
because I don't want all of the
text of the page to be blue.
I only want these H2 elements
to have a color of blue.
So how do I solve this problem?
Well, it turns out there
are multiple places where
you can add style information
that the web browser is
able to read and understand as CSS.
One is what we've done so far, which
is called inline styling where I've
literally added to an HTML element
that I want to add style to,
a style attribute inside of which
are the CSS properties that I
would like to add to that element.
In this case, aligning
the text to be centered
and changing the color to be blue.
But you could also include
style information up
in the head section of the
web page by adding a style tag
inside of which is going to be
all of the style information
for this particular website.
We might consider this to be
factoring out the style information
from the actual body of the page
where we had this inline styling
to instead put the styling information
at the top of the page where
the same style information might be
shared by multiple HTML elements.
So here what I would
like to do is specify
that for H2s, for any H2 that
shows up in the body of the page,
I would like to style it
in this particular way,
giving it a text alignment to
being centered, and giving it
a color of blue.
How do I do that?
Well, up here in the style section
of the head of my web page,
I'll go ahead and type
H2 to mean I would
like to style all of the H2 elements.
And then I'll add a pair
of curly braces to mean
here's how I would like to style
anything that is an H2 element.
I'll type text-align:center,
followed by a semicolon.
And then I'll say color:colon blue.
And that's all I need.
Here, between lines 9
and 13 of index.html,
I've added some CSS code that
says for every H2 element that
shows up inside of this page, go
ahead and center it, and go ahead
and color it blue.
So now I don't even need these style
attributes on these H2 elements
anymore.
I can delete them.
And this will arguably clean up
your code a little bit more too.
So that inside the
body of your HTML page,
you can really focus on the
structure of the web page
and leave the style for the style
section of the web page instead.
So here we specified that
H2s should be centered
and should have a color of blue.
And now if I refresh the page,
it looks exactly the same.
The subsections, which are my
H2 elements, are colored blue.
And they're centered.
But now I factored it out.
So it only shows up in one place at
the beginning of my HTML file, which
means that if I ever
want to change something,
if I ever want to align
these on the right-hand side,
for example, instead of in the center,
or I want to change the color to red
instead of blue, I can change
it in one place, refresh,
and then you'll see the change resulted
on the web page that shows up when
the user reloads the page, for example.
And so this I would argue
is a bit better design.
I've been able to say
that for every H2 element
I would like to style
it in a particular way.
In this case, setting the
text alignment to something,
setting the color to something as well.
What might happen, though, if I wanted
to style all of the titles, not just
the subsections, but also my big
section heading at the top that
says hello world, for example?
How might I go about doing that?
Well, let's say I want my H2s to be
centered and I want them to be blue.
But I also want hello world to
be centered and blue as well.
Well, you might imagine that
one thing I definitely could do
is go up into the style
section of my web page
and say that for every
H1 element I'll go ahead
and say that every H1 should be
text aligned, to be centered,
and every H1 should also
have a color of blue.
Where now if I go back and
refresh the page, well,
now my big H1 at the top of the page,
in addition to my two H2 elements
that are representing the
subsections within this section,
are all centered and blue as well.
But here, again, we've
fallen into the same trap.
And if we look at the
HTML file, we can see it.
We've repeated the same styling
code for both H1 and H2.
For both of them, I've
specified that we would
like the text alignment to be centered.
And for both of them,
we want a color of blue.
So how do we solve this problem?
Well, CSS lets us solve this problem
by giving HTML elements something
called a class.
And a class just describes
a category of HTML elements
that all should be styled a similar way.
They don't all need to be H1s,
they don't all need to be H2s.
It could be any elements.
But it's a way of giving a
name to a particular category
or class of elements
such that they can be
styled according to particular rules.
Let's try this now.
Here is the body of my web page where
I have an H1 tag that says hello world.
Two subsections that are H2s,
underneath which are two paragraphs.
I'm going to add to H1 a class that I'll
set equal to any name that I'd like,
some name that's going to
describe the category of things
that I would like to style.
And I'll go ahead and call this title.
But again, you could call
it anything you'd like,
some description that is going to
describe what you want to style.
And in addition to this H1
element having a class of title,
I'd also like to give both of
my H2s a class of title as well.
So why have I done this?
What can I do now?
Well, now if I scroll back up to
the style section of my web page,
instead of repeating
the same code twice,
I can instead say that I
don't just want to style H2s
to have a centered text
alignment and a color of blue,
but I want anything
with a class of title
to be styled in this particular way.
And in CSS, the syntax for that, is to
use the notation, dot, and then title.
The dot signifies that the
name of a class is coming next.
And then title is the name of
the class that I want to style.
So what does this all mean?
I've given three HTML elements a
class name of title, the H1, and then
both of the H2s.
And then in the style
section of my web page,
I've specified that for
any element that shows up
in this web page that has a class
of title, I want to go ahead
and center it, and to
also make its color blue.
So if I go back here now
and refresh the page,
I see that the page looks exactly the
same, but I haven't repeated myself.
Now the big title at the top, as well as
the titles for each of the subsections,
show up centered and blue.
And now of course the
reason this is useful
is not only because I'm just
avoiding needing to copy/paste,
but also it makes it easier to
change the page if I ever want
to change the styling in the future.
If I ever wanted to change the color
from blue to green, for example,
I do that in one place.
And I go back and refresh the
page, and all of those titles
have changed, the H1s and the H2s.
If I decide I want to change
the font, for example,
which you can do by using something
called the Font Family CSS property.
And let me make this a Sans Serif
font instead of a Serif font
that have the little glyphs
at the end of all the letters.
I'll go back and refresh.
And I've now been able to
change the font of the headings
as well, both the H1s and the H2s,
all by saying that all of these titles
are going to have a class name of title.
And then specifying exactly
how I want to style anything
that has that particular class name.
And it turns out that an HTML page
doesn't need to have just one class.
We can have many classes that
describe categories of HTML elements
that we would like to
style in particular ways.
Say, for example, that it's not the
titles that we want to make green,
but it's all of the text
underneath the subsection headings
that we would like to
make green instead.
I'll go back to index.html.
And here I'll say that the only thing
that I want to style titles as is I
would like for the
titles to be centered.
And I'll create another class
that will apply to the paragraphs.
I'll give this paragraph
a class name of--
I'll just call it green because it's
a text that I want to color green,
for example.
And I'll give this paragraph
a class of green as well.
And now I'll specify that anything
that has a class name of green I
would like for the color to be green.
Such that now if I go
back and refresh the page,
I see that the headings, the H1s
and the H2s, are all centered.
And the text is now green.
And it turns out that HTML elements
can have multiple classes as well.
If I would like for my big title at the
top, for instance, to be both centered
and to have a color of green, I
can give it multiple class names.
I can say for this H1, I want to
give it a class name of title.
But I also wanted to
have a class of green.
So I space separate the
two names of the classes--
title, space, green.
And of course I'm using these names, but
they could be called anything, again.
And I'm just here specifying
that for this particular HTML
element, this H1 element, it should
have two classes, a class of title
and a class of green.
The former meaning that it's going to
be styled to be text aligned centered.
And the latter meaning that we're
going to color it green according
to the rules that are defined here
in the style section of my index.html
file.
If I go back to the page
now and refresh the page,
we now see that my title, the big H1
at the top, is now not only centered,
because it has a class
system of title, rather.
But it's also green because it
has a class name of green as well.
So you can apply multiple of these
CSS properties or class names
to any particular HTML element.
Of course, now our HTML file is
starting to get a little bit long.
We have a whole bunch
of style information
here between lines 8 and
lines 18 of my HTML file.
And then I have the body of the
page that appears beneath that.
So we might want to try and factor
things out into separate files.
And so this is yet another way that you
can include CSS inside of an HTML page.
You could use inline styling,
which we saw at the very beginning
where we added to an
HTML element a style
attribute that was equal to some
sequence of CSS properties and values.
We could also add a style
section to the header of the page
where we specified
some style information.
But we could also separate things
into a different file altogether.
I'll create a new file that
I'm going to call style.css.
And I'm going to take all
of the style information
that was originally in the
style section of my HTML page,
and I'm going to move
it into styles.css.
So now inside of
styles.css, I've specified
that anything that has a class
name of title you should center.
And anything that has a
class name of green you
should just color green, for example.
So go back to index.html here.
And I'll remove this
styling code from the page.
And instead, I'm going to add a section
to the header information of my web
page, recalling again that
the header is just where I'm
storing other data about the
page that my browser will
need to know in order to render it.
And I'll add a tag called a link
tag, which will let me link this HTML
file to another file, for example.
The relationship it's
going to have is it's
going to have a
relationship of style sheet,
meaning that the file I'm
about to link is going
to be a style sheet for this page.
And then I'll specify
HREF equals styles.css,
meaning I would like to
link the styles.css file.
And that should be the style
sheet for this file, index.html.
So now if I go to this
page, reload the page,
I see that again everything
looks exactly the same.
But I've simplified my
HTML page a little bit.
There is no longer any actual
CSS code inside of index.html.
I've just specified
up here on line 8 that
to get the style
information for this page,
you should look in a
file called styles.css.
Why is this advantageous?
Well, for one, you might imagine that
oftentimes if you're running a website,
you might have multiple
different pages on that website
that all need to be
styled in similar ways.
Maybe the banner along the top
is going to be the same color.
Maybe you want to use consistent
fonts throughout all your web pages.
And so in that case, it would be
pretty tedious and repetitive to have
to repeat the exact same CSS code
across all of your different HTML pages.
By factoring things out into a .css
file, we could just add this one line,
this linking of styles.css into this
HTML page into all of the HTML pages
that we're later going to use, which
will have the effect of making sure
that we can write CSS once and have
it used in a whole bunch of other HTML
files.
And conversely, right
now, inside of index.html,
we're including a single
CSS file, styles.css.
But you could easily imagine that if we
had multiple different CSS files that
were describing styles for different
parts of a much larger web page,
we could include as by
linking multiple different CSS
files here inside of the
same HTML page to apply
a whole variety of different styles
to all of the elements that show up
in this web page.
Let's take a look at some
examples of other CSS properties
that we might want to apply.
Recall back when we
were talking about HTML,
we saw that we could use
HTML in order to create
tables of data, rows and columns.
But those tables look pretty simplistic.
Let's try and recreate one of them now.
I'll go ahead and remove
styles.css from index.html.
And inside the body, I'll have a table.
Recall that inside of a table, I can
use the TR element to create rows.
And let me create for myself a couple of
cells using TD elements for table data.
I'll create cell 1, cell 2, and cell 3.
And I'll go ahead and
repeat this row a couple
of times to give myself maybe
three rows worth of data.
I'll change the number in cell 4, cell
4, cell 6, cell 7, cell 8, and cell 9.
So what I have here is a table
inside of which are three rows.
And every row has within
it three cells where
I might be storing some table data.
I'll go back here and refresh the page.
And we'll see that we now have a table.
Insofar as it is three rows,
each row containing three cells,
but it's not particularly well-styled.
So how might we like
to style this web page
to make it look a little
more aesthetically pleasing?
Well, for one, you might imagine
that this whole table should probably
have a border around it.
So how do we do that?
Well, it turns out that we can go up
to the header section of the page.
We'll go ahead and add a style
section back to this HTML page.
And I'll say, for all of the table
elements that show up on this page,
let me give it a particular border.
And in this case, I'll
specify I want the border
to be a one-pixel solid black border.
I could have specified something else,
like a five-pixel dotted blue border.
But one-pixel solid black border
is the border I'd like for now.
I'll go back here, refresh the page.
And I have a one-pixel
solid black border
that surrounds this entire table.
What else might I like to add to this?
Well, maybe I don't just want a
border to be around the whole table,
but I'd like for every individual cell
to have a border around it as well.
So how might I go about doing that?
We'll go ahead, and instead
of styling the table,
I want to style the
individual table data cells
that show up inside of that table.
And recall that the tag for
that is TD, TD for table data.
And here I'd like to specify
that for the table data,
I'd also like to give it a
border of one-pixel solid black.
I'll go back to the page and refresh it.
And now I have one big border
around the entire table.
And now around each of the
cells, I have a smaller border
that goes around that individual cell.
Now it might be slightly
annoying that right now when
two cells are next to each
other they each have borders.
So effectively I have a double border
between many of these cells right now.
I could collapse those borders.
And you'd only know how
to do this by looking up
online as to what the documentation
is for how to collapse borders.
But it turns out that tables have
an additional CSS property that you
can add to them called border collapse.
And if I say border
collapse is collapse, then
the result of that is going
to be that rather than have
these doubled-up borders that
show up inside of my table,
when I refresh the page,
all the borders collapse.
So I just have a single
one-pixel solid black border
that surrounds all of the
cells and surrounds the table.
So this just goes to show there
are many, many CSS properties
that you could apply.
And we've only looked at a small number
of them over the course of today.
But you're definitely welcome to
take a look at other CSS properties
that exist to look at
how else you might be
able to style your HTML
elements to get them
to look the way you want them to look.
In this case, what else might we
want to do to this particular table?
Well, right now everything does seem to
be a little bit jammed packed together.
There isn't a whole lot of space that
shows up between these table cells,
for example.
So I might like to say, for each of
these individual table data cells,
I'd like to give them a
little bit of padding,
a little bit of space, that separates
that cell from other cell information,
for example.
And so to do that, it turns out there
is a CSS property called padding.
And for every table data
cell, I'll add some styling.
I'll say, I'd like for
there to be padding--
let's say five pixels' worth of
padding around table data cells.
So I'll do that.
Refresh the page.
And now the cells are a little
more spaced apart from each other.
Looks a little bit better.
What else might I want to do?
Well, maybe these top three cells at the
very top, the cell 1, cell 2, cell 3,
maybe I'd like for that row to have
a slightly different background
color because maybe these are going
to be the header cells of a table,
for example.
So I'd like for their background
color to be blue, for example.
How might I go about doing that?
Well, I could try to add--
for these table data cells, I'd
like for it to have a background
color of blue, for instance.
And then refresh the page.
But that didn't quite work.
Rather than just changing the
styling of the top three cells,
I've changed the styling of
all nine of the cells that
show up here because I've
specified for every table data cell
go ahead and give it a
background color of blue.
How can I solve this problem?
Well, we can solve this problem by
taking advantage of CSS classes again.
Maybe for this particular table row,
I'll give it a class called header.
And then I'll say that for anything
that has a class of header,
again, using the dot notation to mean
I'm introducing a CSS class here,
I would like to give all of those
things a background color of blue.
So I've applied the header
class to just the first row
of the table, the row that has
cell 1, then cell 2, then cell 3.
And then on lines 21 through
24 here, I specify that just
for the things that
have a class of header,
go ahead and give those a
background color of blue.
I'll go back here, refresh the page.
And now only cell 1, cell
2, and cell 3, those all
have a background color of blue instead.
Now it turns out that CSS
actually has some additional ways
that you can do this idea.
In HTML, if you have a road that
is going to be a header row,
oftentimes instead of calling
them TD for table data,
there's another HTML element you can
use instead called TH for table header,
for example.
So if I replace all
of these TDs with THs,
and then I can specify that for
all of the table header cells,
I would like to give those
a background color of blue.
Now if I go back to the
page and refresh it,
you'll see that I have cell 1, cell
2, and cell 3 as table header cells
that all have a background
color of blue as well.
So you can mix and match,
adding new HTML elements.
And then using CSS to
determine how it is you
would like to style those
elements in particular ways.
And you can keep playing around
with this, adding more style,
changing the spacing,
changing the border,
changing the font, to try
and get things to look
a little bit more professional, a little
more Web 2.0, as you might call it.
But it turns out that we
might do this so often
and spend so much time trying to
just get the styles to look right,
that many people have already written
what you might call CSS libraries,
collections of CSS
properties and values that
just make it easy to style a website
very quickly and make it look good.
And one of the most popular
of these CSS libraries
is a library called Bootstrap.
Bootstrap is a CSS library that just
includes a whole bunch of CSS code
that you can apply to your HTML pages
to make them look a little bit better,
just to begin with.
How do you use it?
Well, if we go to getbootstrap.com,
and I'll go to Documentation,
and scroll down a little bit,
under the Quick Start section,
you'll notice that here
it's just a line of code
that you can copy/paste
into your own HTML file
to add Bootstrap to that
particular HTML page.
It looks very similar to
what we've seen before.
It's a link tag, rel
equals style sheet, meaning
we're going to link a CSS
style sheet into our HTML page.
But instead of the hyperlink
reference, the HREF
being the name of styles.css
or some other local CSS
file that we've stored
inside of CS50 IDE,
instead it's going to be a URL
to Bootstrap's own CSS files.
So I'll go ahead and
take the slide, copy it.
And then in my CS50 IDE, I'll get rid
of the style section of my web page.
And I'll just go ahead
and add Bootstrap's CSS
by copying in that line of code into
the header section of my web page.
And now, inside of body, I'll just
create a H1 that says, hello world.
A simple page that we've
already seen before,
but now with the difference that over
here on line 8 I've added in Bootstrap
CSS into this web page.
What is it going to look like
now if I load the web page
and take a look at it?
Let's see.
I'll go back, I'll refresh the page.
And you'll notice that Bootstrap
has chosen slightly different fonts,
it's chosen slightly different sizes.
Already things look a
little bit different.
So how can I continue to take
advantage of the features
that Bootstrap has to offer?
Well, let's go back
to get bootstrap.com.
And we'll go to the Documentation
section of the page.
And then along the
left-hand menu bar, you'll
notice a button that says Components.
When you click on
Components, you'll be taken
to all of these different
components or parts of an HTML page
that you can add that
Bootstrap has already styled
for us using Bootstrap's own CSS code.
And the first one
alphabetically is alerts.
So you might imagine that you want your
web page to display some sort of alert
to the user who is on it.
And let's scroll down and see
what these alerts look like.
Here's a simple-- what they're
calling a primary alert, which
has a background of blue.
There's a danger alert,
which has a background
of red, which might be quite common.
A warning alert that has
the background of yellow.
So how do I actually
take one of these alerts
and actually put it into my page?
Well, let's scroll down.
And here's some sample code.
Here is a div element.
And a div HTML element
is just an HTML element
that's going to describe some
vertical section of your code.
You can think of a div as just
a section of your web page.
And we're giving it some classes.
We're giving it a class of alert
and a class of alert-primary.
And what that's going
to do is it's giving it
two classes that Bootstrap knows about.
And Bootstrap's own CSS
presumably says that anything
that has a class of alert and anything
that has a class of alert-primary
should be styled in
these particular ways.
So let me just copy this code
and paste it into my HTML page.
I'll go ahead and add some tabs.
That will just make things
look a little bit cleaner.
HTML doesn't technically care
whether you indent everything.
But because HTML is so
hierarchical, it can often
be good design and good style just to
look at everything nested and indented
properly so that you can get a visual
sense for what elements are nested
within other elements, for example.
And so here, I've added a div that has
a class of alert and alert-primary.
And role equals alert
just tells the browser
that this div is going to be an alert.
And then here is the content
of that actual alert.
So I might replace it by saying,
this is my alert, for example.
And now if I go back to index.html
and refresh the web page,
I see not just this big
H1 at the top, but also
this is my alert that appears with
a blue background styled already
with a particular font chosen by
Bootstrap immediately beneath that.
And so you can look at
Bootstrap's components
that it offers on its website to
look at a whole bunch of CSS elements
that you can add to your web page
without needing to worry about making
sure the colors are exactly
right and making sure
the fonts are exactly right,
because someone else has already
done the work of figuring out what
combinations of colors and CSS
properties look good.
And they have just given it to
us in the form of a CSS library
that we can take advantage of just
by adding some classes to our HTML
elements in order to create
a better styled web page.
So we've now seen a
variety of different ways
that we can add styling to our web page.
We can use inline styling
by adding a style attribute
to any of our HTML elements to specify
how we would like to style that page.
We can put a style section into the
header part of our index.html page,
or any other HTML page
to specify how we would
like to style particular HTML elements
or particular classes of HTML elements.
And we also saw how you can actually
create a .css file to link in a style
sheet that either you have created
or that, in the case of Bootstrap,
for example, someone else has created.
But all of this is using
CSS, Cascading Style Sheets,
this language of specifying properties
of CSS, things like text alignment
and color and font families
and borders, as well as
values that should
correspond to them, in order
to determine how a particular
HTML element should work.
And using CSS in combination
with HTML, you now
should have the ability to take a
page and style it however you like.
