Hey, what's going on guys?
Welcome to my CSS crash course for absolute beginners.
This is a continuation of my HTML crash course.
In this video I'm going to try and cram as much information about CSS that I can
starting from scratch.
And you don't need to have any experience at all whatsoever with CSS to follow
along.
Alright, so a few things before we get started.
I want to stress that this guide is for beginners and people that don't really
know anything about CSS.
It's a continuation of my HTML crash course on YouTube, so unless you know HTML
pretty well, I would suggest going back and watching that video first.
And the link is in the description.
Alright, now it's important to know that when it comes to CSS, it's much more free
than HTML, meaning that there's many ways to do the same thing.
In HTML you have specific tags that you use to create a document, while CSS is
used for design and layout, so it's much more artistic.
Many advanced web developers still struggle with CSS because it's much more
right brain.
However, when you're following along with this guide, you'll notice that we're just
we're going to be looking at the CSS syntax, not so much creative and artistic
abilities or styling trends and stuff like that.
Alright, so hopefully that makes sense.
Also, we're not going to be covering more advanced topics like flex box and
animation.
Flex box is a CSS 3 layout mode and it does things like align elements very
easily, but I think it's too advanced for this video.
Plus, I do have a video called Flex Box in 20 Minutes that teaches you all about it,
so if you want to learn more about flex, I'd suggest watching that after this.
Alright, and I will be doing an advanced CSS 3 video very soon, and that'll include
things like animations and transitions, you know, all the pseudo elements,
things like that.
Alright, so we can't cover everything in this guide.
This is a crash course, but I will be covering the most essential and useful
parts of CSS.
Alright, so let's talk a little bit about what CSS actually is.
It stands for Cascading Style Sheets, and like HTML, it's not a programming
language.
It's actually a style sheet or a styling language.
It's used for website layout and design, and it's used alongside of HTML.
Now, it can also be used with other mock-ups like XHTML, XML, SVG,
but it's most commonly used with HTML.
Now, by default, CSS doesn't have any logic like a programming language does.
It's strictly presentational.
However, there are technologies such as Sass and Less that do allow you to extend
the functionality of CSS and allows you to use things like variables and
conditionals, but that's way beyond this course.
I just did want to let you know that that that is an actual thing.
Alright, and I do have videos on Sass and Less on my channel if you're interested.
So, all you need to get started, just like when in the HTML crash course,
we just need a text editor and a browser.
We'll be using Google Chrome as our browser and Sublime Text as the editor.
I went through the installation of Sublime Text back in the HTML crash course,
so I'm not going to do that again.
You can use Sublime or you can use something else.
Atom and Visual Studio Code are fantastic editors, but I do think they're overkill
for this particular video.
Alright, Notepad++ and TextMate are also some very simple and very light solutions.
Alright guys, so we're going to go ahead and get started.
Let's create a new folder.
I'm going to put it on my desktop and I'm just going to call this CSS Crash Course.
Alright, now there's going to be two things that we're going to do.
First, we're going to build like a cheat sheet, like we did with the HTML crash
course, where it's not really a put-together site or anything like that.
It's just a way for us to learn.
It's a way for us to add classes and IDs and then go through all the specific
styling rules and stuff of CSS.
And then after that, we're going to actually lay out an actual... I wouldn't
really call it a website, but I guess a website homepage where we use HTML5
semantic tags and I show you how to float things and just create a basic,
basic web page.
Alright, so let's go ahead and create a new folder in here and I'm going to call
this CSS Cheat Sheet.
Alright, and that's what we're going to be working with first.
But then I'm also going to create a folder called My Website and that's what we'll be
working with after.
So for now we're going to work in the cheat sheet.
So let's go in there, let's create our index.html file.
Alright, and then what I'm going to do is I'm going to open this up in Sublime Text.
I'm actually going to open up Sublime and then I'm going to go to File, Open Folder,
and we're going to go to... where is it... the Desktop... CSS Crash Course.
And I'm going to open that up and then you can see I have both folders over here.
Okay, so we're kind of treating these both as different projects.
So we're starting in the CSS Cheat Sheet.
So let's open up the index.html and with Sublime we can say HTML Tab and that's
going to give us a basic structure.
And I went over all of this in the HTML Crash Course, so if you don't understand
what this is, please go back and watch that video.
So for the title let's just say CSS Cheat Sheet.
Alright, and before we write anything I just want to go over the different types
or the different methods of using CSS.
So there's three main ways of adding CSS to an HTML file.
There's inline, internal, and external.
I'm going to show you an example of all three, but let's talk about the difference
first.
So inline CSS means that you're adding a style attribute to the actual HTML tag,
just like you would any other attribute like title or href.
This is not what you want to do.
It's horrible practice and you'll never see a professional web developer do this.
One of the key rules to follow as a developer or programmer with any language
is to keep the presentation, the functionality, and the styling completely
separate, or as much as possible.
Using inline CSS is mixing that presentation with styling, and it's not
efficient, it's not scalable, and it's just not practical.
Inline CSS refers to using style tags within the head of your HTML page.
We did do a little bit of this in the HTML Crash Course at the end, and this is a
hell of a lot better than using inline CSS because it does separate the style from
presentation, but it's still not the suggested method.
This makes it so that the CSS that you're writing can only be used in that
particular HTML file.
It also fattens up the HTML file and you want to keep it as slim as possible with
just HTML.
The third option is the best and the most used, and that's to use an external CSS
style sheet.
You can create a separate file with a .css extension, and then you can simply link
that file to whatever HTML file you want, whatever you want to use that CSS with.
Alright, so we're going to be using the external method, and that is for the most
part suggested all the time.
Alright guys, so let's go ahead and open up our index file in our browser.
Alright, so we have our CSS cheat sheet.
I'm just going to open index.html, which is going to be completely blank.
Actually, the title... did I not save this?
No, I didn't save that.
So if I reload, now you see you have CSS cheat sheet and the title.
If I do a ctrl-U, you'll see the source code, which just matches what we have over
here.
Alright, so let's go ahead and look at the different ways to implement CSS.
So I'm going to put an h1 in here, and I'm just going to say, hello world.
Alright, so we have a simple h1.
If I save it and reload, it's going to show up on the screen.
Now let's say I want to just change the color of this.
Okay, now the first way that I'm going to demonstrate is inline CSS.
So that is by using a style attribute, and then doing the actual CSS,
which will say color red, and save.
Okay, now that does work, but this is a horrible, horrible way of implementing
this.
Okay, because we're mixing the presentation, which is just the h1 and the
text, with the styling, or with the CSS, which is this color red, and we don't want
that.
We want to keep these separate.
Alright, so that's the first way, and we don't want to use that way.
Now to not use inline styling, we need a way to grab onto this,
and we can actually use the element itself.
A lot of times we'll be using IDs and classes to grab onto an element,
but you can just use the actual HTML tag.
So let's take a look at the second way, which is internal.
So for that, we would put style tags up in the head area.
Okay, you want to put these in the head, and then inside there we can put our CSS.
So for instance, if we want to grab the h1, we can use that as the selector,
and then some curly braces, and then we can say color red.
Okay, if I say... actually let's make it blue, just so you can see that it
definitely is coming from here.
So if I reload, now we get blue.
Alright, and like I said, this does separate presentation from style,
but you can only use these styles within this file.
Okay, you may want to use these in other HTML files as well.
So that brings us to the third method, which is external.
So what I'm going to do is go into our CSS cheat sheet folder, and create a new
folder called CSS, and then this is where we would put our style sheets.
Okay, so let's create a new file, and we'll call this style.css.
I'm going to save it, ctrl-s, style.css.
Okay, now you don't have to call it style, you can call it whatever you want,
just make sure it has a .css extension.
Alright, and then what we'll do is we'll say h1, just like we did in the style tags
in the HTML, and we'll say color green.
Alright, and then we'll save that.
Now obviously that's not going to work right now, because it doesn't know to even
look at this style sheet.
So what we're going to do is get rid of the style tags here, and we're going to
use an HTML tag called link.
Okay, so we're going to say link.
In sublime text, we can just type the word link and hit tab, and that's going to give
us the tag along with some attributes.
So it has this rel attribute, which is telling it that this is a style sheet.
We also have a type, which is saying that this is going to be CSS.
And then the href is going to link to the CSS file.
So in here we want to say CSS slash style dot CSS.
And the reason I put this CSS slash is because it's located in the CSS folder
right here, so you have to specify the entire location.
Alright, so let's save that and reload, and now you'll see that it's green.
It's actually looking at this style dot CSS file.
Alright, so that's the recommended way to do it.
And if we wanted to use these styles in another HTML file, all we have to do is
put this in there.
So let's look at a quick diagram of a CSS selector and a declaration.
So this is the basic format.
So we have the selector here.
In this case, we're saying A.
So an A tag is a link.
Okay, we learned that in the HTML crash course.
Now you can use the actual element like this, but what this is going to do is it's
going to apply this style to all links everywhere.
If you wanted to target a certain link, you could use a class or an ID.
Okay, and we'll get into that in a little bit.
And then to start the declaration, we have an opening curly brace.
To end it, we have a closing curly brace.
And then inside there, we have a property and a value.
Okay, so like a key value pair.
The property is going to be, in this case, background color.
And we're going to go over a ton of different properties that are available in
CSS.
Now to separate these, we have our colon here, and then we have the value.
In this case, we're saying the background color should be yellow.
And then you always want to end these with a semicolon.
Alright, so we're going to jump in and start to create some styles here.
Now I'm going to go to the CSS file and get rid of the h1 styling here.
Okay, and then I'm just going to say body and then open up some curly braces.
Alright, so we have our selected here, which is body.
This is going to pertain to the body tag and everything in it.
Okay, well I shouldn't say everything in it.
It's not going to actually change like the background color of every element,
but the body itself, which wraps around everything.
So let's add a background color.
And I'm going to change this to a value, which is going to be a hexadecimal color.
And I'm going to go over this in a second.
But it's going to be number sign F4 three times.
So if we save this and we reload, notice that the background, first of all
the green text went away because we got rid of that style, but the background of
the body is now light gray.
Okay, this is a hexadecimal value for light gray.
Now if we want to change the color of the text, we can use the color.
Okay, so let's say we want color to be the hexadecimal value of six fives,
and that's going to be a dark gray.
Now if I reload, notice that the h1 actually changed to a lighter gray.
So any text we put in by default is now going to be this color.
So just a little bit about colors in CSS.
Now we can use different values here.
So we can use color names, we can use HTML5 color names, hexadecimal values,
and RGB, or red green blue values.
So with this example here, we're using color names.
So color red, we can use blue, yellow, very, you know, common colors.
And then HTML5 added some extra colors here.
Okay, so for instance, coral, which is like a light orange, and there's a lot of
them.
There's misty rose, there's all types of weird colors that you can look up.
All right, now hexadecimal values look like this.
We have the number sign, and then you have a code which pertains to that specific
color.
Okay, six zeros is going to be black, and six F's is going to be white.
You can also use shortcuts and use three characters as well for some of these,
and I'll show you that in a little bit.
And then we can also use RGB values.
So we use RGB, and then some parentheses, and then the value of red, green,
and blue.
Okay, so here we have blue at 255, which is going to make this color a
certain shade of blue.
All right, so back to our HTML and CSS.
Now what I'm going to do is, under the H1, I just want to put in a paragraph.
And in Sublime, we can type in the word lorem and tab, and it'll give us a bunch
of sample text.
All right, we'll reload that, just so we have something else to look at.
So for the body, I'm also going to add... I'm going to change the font.
So let's say font family, and I'm going to say Arial.
And then if for some reason Arial can't load, it's going to load what we put here.
Let's say Helvetica.
And then we're going to do Sans Serif.
All right, so let's save that and reload.
And notice that the font has now changed.
Now in CSS, you have WebSafe fonts, and then you have other fonts,
which you can use.
Now WebSafe fonts means that you don't need to import any kind of special font.
You can just use it, just like we did here.
All right, if you want to use some kind of specialty font from, let's say,
Google Fonts, you'd have to bring that in like you would a style sheet and then
apply it.
All right, so let's take a look at some of the WebSafe fonts.
So here's an example of the different font families that we can use, and we don't
have to import any kind of special font files or anything.
So this is what we use, the Arial Helvetica Sans Serif.
We also have Arial Black, Bookman Old Style, Comic Sans, Courier, which is kind
of like a Microsoft Word type font.
Let's see what else... Georgia, Verdana is pretty nice.
I like Verdana.
I like Tahoma, Times New Roman, which is the default.
If you don't apply a font, that's what the default will be in most browsers.
And that's pretty much it.
So these are the WebSafe fonts.
And when we talk about Serif fonts, you can see that the Serif fonts have the
little hooks on the end here of the letters, and then Sans Serif is kind of a
flat look.
All right, so that's the basic difference between those.
I'm not an expert on fonts or anything like that, but I just wanted to give you
guys an idea of what's considered a WebSafe font.
All right, so let's get back to our CSS.
I'm just gonna make this wrap, so that you guys can see everything.
I'll just do Word Wrap.
And let's go ahead and add... let's change the size of the font.
So for that, we can simply just say font size, and we'll set that to 16 pixels.
And if we save and reload, it's gonna look the same, because that was actually the
default.
But if I wanted to change this to, let's say, 12 pixels, reload, you'll see
it gets much smaller.
All right, now we can also change the font weight from here.
So if we say font weight, we can set that to bold, and reload, and it'll make
everything bold.
You can also use numbers, like 400.
You can change the the boldness with the number as well.
But we're gonna keep this at normal, okay, by default.
Now there's actually a shorter way to do this when you're dealing with these font
dash styles here.
We can actually just use font, and then we could say normal for the font
weight, and then we could do the font family, which would be Arial, Helvetica,
Sans Serif, and then we can just put the the font.
Actually, let's put the size here, so 16 pixels.
All right, and then if I get rid of these three, and reload, we get the same thing.
Okay, so it's just a shorter way of doing it.
And let me just put a little comment here, and I'm just gonna say, same as above.
All right, and you know, I'm leaving all this stuff here so you guys have this as a
reference.
Normally you wouldn't have both of these, but I want you guys to have this if you
need it later on.
Okay, another common style you'll see within the body is the line height.
Okay, now notice that these, to me, these lines look pretty close together,
so I'd want to kind of separate them just a little bit.
So what I'm gonna do here is say 1.6 M, or EM, and let's save that and reload.
And now notice that there's there's more space in between the lines.
All right, that's what line height does.
Now EM, or M, is is just a unit to use in in CSS.
It's usually used for more responsive type websites.
You could just make this pixels as well, so if we wanted to say three pixels for
the line height, you'll see that there's only three pixels in between, which makes
it unreadable.
But you can do that, but we're gonna stick to EM.
Usually you'll see M for line heights.
All right, so what I'm going to do now is is just add a little bit of HTML over
here, some more HTML.
So let's go... actually, you know what we'll do is we'll wrap the H1 and the
paragraph in a div, and let's give that a class.
We'll give that a class of, let's say, box-1.
Okay, so wrap the paragraph and the heading.
Okay, we'll push that over a little bit.
I don't like how... yeah, I'm just gonna make this a little bigger.
So let's talk a little bit about the difference between class and ID.
Now as far as the browser goes and enforcing rules, ID and class,
really there's no difference when it comes to HTML and CSS.
But what you want to do is you want to think of IDs as elements that are IDs that
aren't going to be put anywhere else.
They're going to be unique.
So for instance, if you have a main navbar, you might give that an ID of main
navbar because you're not going to be using that main navbar ID on any other
element.
But if you're using something like, let's say, class box-1 where you we're
going to give this a background color and a border and stuff, you may use this box-1
somewhere else because you may want to apply that style.
So it's not unique.
So you would use a class.
If you had a class that made text red or something like that, you would want to use
a class because you may use that somewhere else.
So just remember that IDs should always be unique.
Classes, you can reuse classes.
Alright, and if you don't want to follow that standard, I would suggest just always
using classes.
You'll notice that with frameworks like Bootstrap, they don't use IDs for
anything.
It's all classes.
You just don't want to repeat IDs.
That's the bottom line.
Alright, so we have this div with the class of box-1.
So let's go ahead and save this.
And then we'll go into our styling.
And let's see, I'll just make this smaller.
So to target a class, we use a dot.
So remember we called it box-1.
So we're going to say dot box-1.
Alright, now what I'm going to do here is I'm going to add a background color first
of all.
So let's say background-color.
And let's set it to like almost black, a dark gray, which is going to be 3,
6 times.
Now this is one of those colors where we can use a shortcut.
Okay, we can actually use just three threes and it'll give us the same color.
Alright, so let's save that and reload.
And notice that the background is now a dark gray.
Oh, one thing I also wanted to do was on the body, I want to zero out the margin.
And I'm going to go over margin later on, so don't worry about that.
But I'm just going to set margin to zero.
And that'll get rid of these spaces around it.
Okay, except for the top because headings actually have margin by default.
Alright, so we have this box-1 with a background color of dark gray,
almost black.
So we want to change the text color because it's almost unreadable.
So we're going to say color and let's set that to white.
Now we could do the text white, but I prefer to use hexadecimal.
So I'm going to say number sign and then three F's.
Okay, or six F's, whatever you want.
Reload and now the text is white.
Now I would like to push everything in from the edges.
And you'll see this a lot usually with websites, the content will be pushed in.
It's not going to go all the way up to the edge.
So what we can do is create a class.
I'm just going to put it right here and let's call it container.
If you've ever used Bootstrap or other frameworks, you've probably seen this
quite a bit.
And we can set this to a width.
Okay, so for right now I'm just going to say 500 pixels.
Alright, and then let's go ahead and save that and then let's apply that container.
So let's wrap it around the box.
Actually I'm going to have this wrapped around everything.
Okay, so we'll go down here and put the ending div tag.
Let's tab it over.
Alright, so if we save that and reload, you'll see that it's now 500 pixels wide.
Now with containers, like I said, you want to usually want to push it to the
middle.
So to do that we're going to just say margin and we're going to set it to auto.
And what this does is it sets margin.
It sets an auto margin on all sides.
Okay, it's going to set it to the same on all sides.
So let's save that and reload and it gets pushed over.
It puts an even amount of margin on this side and this side.
And margin is basically spacing around an element.
Now setting it to 500 pixels, actually you probably wouldn't see 500.
You might see like 960 as a popular width for a website.
Okay, something like that.
But this makes it so it's not responsive.
If I make it smaller, you can see that it's not responsive.
It's not adapting correctly.
So what we would do is set it to a percentage instead of pixels.
So I'm going to set it to 80%.
Okay, and then reload.
And then as I make it smaller, you'll see that it actually responds
correctly to the size.
So for the most part, you want to use percents when you're dealing with
containers or something like that.
Alright, so now let's talk about margin and padding.
So a lot of people get confused at first with margin and padding because both of
them pertain to space around an element.
So I'm going to try to explain that the best I can.
So there's something called the box model in CSS.
And think of this content block as whatever your element is, whether it's a
div, or an a tag link, or a paragraph, a heading, anything at all.
And padding is going to be the space in between that element and its border.
Okay, its edge.
So that padding, you can set the top, the right, the bottom, or the left padding
to whatever you want.
Okay, and it'll add that space.
Now the border has to do with the border property, and you're not always going to
be using this, but you can set the border width, you can set that to the width,
and you can do top right, bottom left.
And then margin is going to be the spacing outside of that border.
Okay, so just remember padding is the space inside, margin is the space outside.
Now when we're applying styles to, or when we're applying padding and margin,
there's different ways to do it.
Okay, there's the long way, and there's the short way.
Now in this example, we're using margin for this paragraph.
So we're saying we want the margin top to be 5 pixels, the margin bottom 5,
the margin right to be 10, and the margin left to be 10.
So if we look at our box model here, it is the top and bottom margin that we
want to be 5.
So it would be this and this, and then the left and right would be 10.
Okay, now over here we have this same thing in a shorter syntax.
So instead of doing margin top, margin bottom, and so on, we can just say
margin, and then we can do top, top right, bottom left.
Okay, that's that's what you need to remember.
Top right, bottom left.
And you'll see top 5, whoops, top 5, right 10, bottom 5, left 10.
Alright, now to take it a step even, you know, to make it even shorter,
if the top and bottom are the same, and the right and left are the same,
okay, such as in this case, top and bottom are 5, left and right are 10, we can do
this.
And we can say 5 for the top and bottom, 10 for the left and right.
Okay, so that's a shorter syntax.
And then of course, if they're all equal, you can just do margin 5 pixels,
and that'll add 5 pixels around the entire thing.
And you can use this same format with padding.
You can do padding top, padding bottom, and then same thing over here,
you can just use padding.
Alright, so what I'm going to do now is I'm going to add a border to this,
just so we can see the difference between padding and margin more clearly.
So for a box 1 here, let's go ahead and let's say border right, okay, and we're
going to set that to 5 pixels, red, okay, so it's size, color,
and then type or style, which I'll say solid.
So let's go ahead and save that and reload, and you'll see that on the right
we have a 5 pixel red solid border.
Alright, now if we wanted to add borders on other sides, let's say we wanted to do
left, okay, so if I save that, it's going to add it on the right and
left, and of course we could do top and bottom.
Alright, and that's just going to give it a 5 pixel border around the whole entire
thing.
Now, just like with margin and padding, there's there's shorthands.
You don't have to do all of this if you want them all to be the same, okay.
So what we could do is we could just say border, and then we could say 5 pixels,
red, solid.
Okay, and then if we got rid of all of this and saved it, reload, we get the same
thing.
So this is what you would want to do instead of this, but I'm going to keep it
there again just so you guys have it.
Let's say same as above.
Alright, now you can also target specific border properties like the size,
the color, and the style.
So let's say, for instance, we wanted to change the width.
We could say border-width and set it to 3 pixels.
And if we reload, that's going to set all sides to 3 pixels.
If we wanted to, let's say, just target the width of the border bottom,
we could say border-bottom-width, and let's just set that to 10 pixels.
Okay, so we can target it like that.
We can also do styles.
So if we wanted to say like border, let's do border-top-style, and we'll set
that to dotted.
So if I reload, now you see the top border is dotted.
And I believe there's solid, dotted, dashed, double... I think there may be a
couple others, so if you want to look that up, you can.
But for the most part, at least for me, I usually use solid.
Alright, now I want to keep this very simple, and I just want to have this.
So I'm going to put that right there, and that should overwrite everything.
Okay, but again, I am going to leave all this just so you guys have it.
So now let's look at padding.
Okay, so in here, let's say padding, we'll say padding-top, and we'll set that
to 20 pixels.
Reload, and you'll see that it adds it to the top.
Now, there was initially some padding here, because an H1 by default has
padding.
Now, if you wanted to, you could zero out the margin and padding for everything on
the page, and let me show you how to do that.
So if we go up to the very top here, and we put an asterisk, this is basically
saying everything.
So every element, every style, and we'll set this to margin-zero,
padding-zero, and that'll zero everything out.
That's called a reset.
Okay, so if we reload now, the H1 and the paragraph, you'll see they don't have any
margin or padding by default.
So you may want to add a reset if you want to just zero everything out and go from
there without any confusion of having, you know, initial padding and margin on
certain elements.
So it's completely up to you if you want to do that, but I'm actually just going to
comment this out so it doesn't take effect.
Alright, so we have some padding on the top, but what I want to do is add padding
all around.
So what I could do is we could do it the long way.
So we could say bottom-right-left.
Okay, we could do that, but you don't want to do that.
Especially if it's going to be 20 pixels or no matter what size on any side,
you just want to use padding.
Okay, so we'll say padding 20 pixels.
And let me just put a comment here, and I'm just going to say same as above.
Alright, now margin on the other hand is going to be the space outside of the
border.
Alright, so let's say we want to add margin top and we'll say 20 pixels.
What that should do is move the entire thing down because it's going to add space
above it.
Okay, and again we can do this with margin or we could just say margin 20 pixels and
that's going to put it all the way around.
Okay, you'll see that it actually got skinnier because it added 20 pixels here.
But let's say we just wanted the margin on the top and bottom.
We could do 20 pixels and then 0 for the right and left.
Alright, reload, and there we go.
Alright, so now I want to move on to some text formatting styles.
So what I'm going to do is I'm going to target the box1 h1.
Okay, so this is saying that I want to style any h1 that is within this class.
Okay, it's not going to style any h1 that's not in this class.
So let's start with... let's just change the font family.
Okay, so we don't have to have one font family for the whole site.
Let's say we want to use Tahoma.
Reload, and I see that this is now a Tahoma font.
Let's say we want to change the font weight to 800.
And let's say we want it to be italic.
We could say font style, set that to italic.
And if we reload, there we go.
So we have font weight, font style, we have text decoration, which we could do
a underline if we wanted to.
Okay, that gives it an underline.
If we wanted to change it to all uppercase, we could use the text transform
and say uppercase.
Okay, reload.
Now it's all uppercase.
Let's see what else... letter spacing.
So if we want to put space between the letter, this would usually be with the M
unit.
So let's say 0.2 M.
And now reload, and now you see there's space between each letter.
And then we also have word spacing.
Say word spacing, and we'll say 1 M.
Reload, and you'll see that now there's more space between each word.
So these are just some text formatting styles.
Alright, let's go ahead and put another box on the page just to add some more
HTML.
So I'm going to copy box 1,
and we'll change this to box 2.
And that's fine.
We'll leave the same text, I guess.
Reload.
Actually, we'll change the heading.
We'll say goodbye world.
Alright, now notice that we don't have any styling because we're now using a box 2
class, not box 1.
If we change this to box 1, of course it's going to apply those styles.
But let's change it to box 2.
And then in the CSS, we'll just say box 2.
And let's see, I don't want to add a bunch of crazy styles.
Let's just give it a border.
And let's say we want it to be 3 pixels.
And we'll do dotted.
And let's do like a light gray.
Reload.
Okay, so now we have a border.
Let's add padding, 20 pixels.
And let's say margin, let's do 20 pixels top and bottom, 0 left and right.
Okay, so it adds some padding and also added margin on the top and bottom.
So next thing I'm going to do is let's add some unordered list.
Alright, so let's go back to our HTML.
We'll go under box 2.
And let's put a div.
We'll give it a class of, let's say, categories.
And let's put an h2.
We'll say categories.
And let's put a ul with some li's.
Okay, each li will have an a tag, which will just go nowhere.
We'll say category 1.
I'm just gonna go like that.
We'll say category 1, 2, 3, and 4.
Alright, so now we have a simple list.
This is what it will look like by default with no CSS.
So now let's go over to our style.css file.
And let's apply some styles to categories.
Remember, categories is actually the div that surrounds this.
It's not the actual list itself.
Okay, and that's what I mean.
With CSS, you can do the same thing a million different ways.
We could have put the class on the actual ul.
But you know, you'll find your way of doing things.
So let's just give it a border of 1 pixel, 1 pixel, light gray, solid.
And then we'll just give it a padding of 10 pixels all the way around.
Okay, and it's gonna just go around the whole thing.
There's also a border radius property that we could use.
And that can give it rounded corners.
So let's say 15 pixels and reload.
And now notice that this box has curved edges.
All right, let's see what else.
Text align.
So that's something you might use a lot.
So let's say categories, categories, and I think it was was it an h1 we gave
it?
An h2.
So let's say we want the h2 to be aligned to the center.
So we'll say text align center.
Reload and now you'll see it's in the middle.
All right, let's apply some styles to the ul and the li tags.
So we'll say categories ul.
Now uls by default have some padding.
You'll see that pushed over, I think it's like 40 pixels.
So let's actually zero that out by saying padding zero.
Okay, if we reload and you'll see that it gets rid of that.
You can also change the bullet points if you want by using list style.
So if we say list style square and reload, now there's still squares.
You can also completely get rid of them by saying list style none.
Okay, reload and now it doesn't have any.
All right, now before we get to the styling the li tags, let's talk a little
bit about links because links actually have different states.
Now I could say categories a to just just target the links in the in the categories,
but I'm actually going to go up top here and apply global styles to the links.
So just a.
So this will apply to any link on the page.
So let's start by getting rid of the underline.
So we'll say text decoration none.
Okay, that's going to get rid of that annoying underline.
And you probably want to change the color because the default blue is really ugly.
So let's change it to black.
Okay, so now you can see the links are black.
Now as I said, they have different states.
So they have a hover state.
So we can say a colon hover.
And let's say we want to change the color to red when they're hovered.
So reload.
Now when I hover over each link, it turns red.
There's also an active state.
Oops.
And active, let's make it green.
Active is just when you click on it, it just flashes real quick.
You see how it turns green for a second when I click on it?
That that's meaning it's active.
All right, we also have a visited state.
So if we say visited, and let's say color yellow.
Okay, now if I reload, they're all going to turn yellow because we did visit all of
these.
But if we were to add another one, let's say category five and save,
reload.
Well, I guess that's... oh, you know what?
Let's let's make it go somewhere else.
We'll say test.html.
Okay, so now it's black because it goes by the actual location.
But if I click on that, obviously that goes nowhere because it's a blank page.
But if we go back and reload, well, I guess it doesn't work because it's not
an actual page.
Hmm.
So I guess, I mean, if we created a test .html, that that should turn yellow.
I honestly haven't... I can't remember the last time I used visited, but just so you
guys know, you can do that.
All right, so let's go back down to our categories, and let's get rid of that
style, actually.
I don't want the visited to be yellow.
Let's make it black.
All right, so now let's say categories .lis.
And for the li, let's add a little bit of padding to the bottom.
So we'll say 8 pixels.
And let's actually add a border to the bottom.
We'll say dotted 1 pixel, and let's say 333 for the color.
We'll reload, and now it looks something like that.
All right, let's actually do not 8 pixels.
We'll do 6.
All right, now for the bullet points, you can do this list style.
You can do it on either the ul or the li.
And then we also have this list style image.
Okay, and you can actually set this to an image like you would set a background
image, which I'll get into later.
So let's say URL, and we'll say images check.png.
All right, and what I'm going to do is grab an image.
Let's say checkmark images, and let's grab this checkmark right here.
And I'm just going to save it as check .png, and we're going to save it in our
desktop.
CSS crash course, CSS cheat sheet, and I'm going to create a folder called
images.
Okay, and then in there we'll save it, and then let's go to our site and reload.
And notice that it uses the actual size of the image, so I'm going to make that
smaller.
Okay, and you can do that however you want.
I'm just going to open it with Photoshop.
Let's see, is this the right folder?
Desktop.
All right, so I'm just going to open this real quick, and like I said, you can
resize it however you want.
I'm just giving you an example of what I do to resize images.
So I'm just going to go to, let's see, image size, change it to 10 pixels,
and then I'm just going to re-save it as a PNG file.
Save.
So now it should be 10 pixels.
So let's reload, and now you can see we have little checks next to our categories.
All right, and you may want to push this over a little bit if you're going to use
bullet points, because we set the padding to zero.
But let's say we just want to say padding left 20 pixels, and that'll push it over.
All right guys, so we're starting to run out of time.
I still want to get to the layout page, so this may be a little longer than an
hour.
But let's move on to forms, okay, because forms are very ugly by default.
And we want to stay within the container, which ends right here.
I'm actually going to put a comment here, oops, just letting us know that this is
where the container ends, because we want to stay within it.
All right, so let's go ahead and put in a form, and I'm actually going to just paste
all the fields in.
Let me just make this bigger.
So basically what I did, just tab this back, basically what I did is I created a
couple fields and I wrapped them in a div with the class of form group.
Okay, if you've used bootstrap before, this is actually the class they use.
And then we have the label, and we have the input.
So we have a name, email, and then a text area, which is a message, and then a
simple submit button.
All right, so let's save that, see what it looks like by default.
Okay, so it looks pretty damn ugly.
Now, you know, I don't want you guys to have to look at the very bottom of the
screen, so let me just really quickly, I'm going to put a div in here and just
give it an inline style of margin top 500 pixels, just to push everything down,
or push everything up.
All right, so let's go ahead and start to make this form look a little better.
So we're going to go to our style CSS.
Actually, let's give the form a class.
So we'll say class my form.
All right, and then in here, we're going to target my form.
And first of all, I'm just going to add some padding, we'll say 20 pixels,
that'll be around the entire form.
Okay, and then let's let's separate the the form group a little bit each field.
So remember, we gave it a class of form group.
So we're just going to add some padding bottom of 15 pixels.
Okay, that'll separate it a little bit.
Now for the label, labels are inline, that's why they're on the same level,
same level as the input.
Okay, inputs and labels are inline.
I want this to be on a separate line without having to put an actual line break
in.
So what I'm going to do is I'm going to set the label.
Actually, no, we should be putting my form before all of these like that.
All right, we'll say my form label.
And then I'm going to display that even though it's inline, we can set it to be a
block.
Okay, and remember block level elements, they'll, they'll put it on a new line,
and they go across entire line.
So if we save, now you'll see that labels are on their own line.
Now let's make these text inputs look a little better.
So we'll say my form input.
And let's add some padding to make them look a little thicker.
So we'll say eight pixels.
And then let's also set the width to be 100% of its container.
So reload.
Now, a couple things here, notice that since we said just input, that's going to
pertain to any input, even the button, which is also an input.
If we had, let's say a radio button, it would pertain to that as well.
And it didn't target this because this is actually a text area, it's not an input
tag.
Now what we could do is we can target certain types of inputs.
So these are both text, right?
So what we can do is put a set of brackets here and we can say type equals text.
And then what that's going to do, when I reload, it should disregard the
button because that's not the type of text.
Okay, see what I'm saying?
And then the text area, we also want to add those styles too.
So I'm just going to put a comma here.
And we're just going to say dot my form text area.
Reload and then it applies it to that as well.
Now let's add a little bit of styling to the button here.
So what I could do is I could say my form input and then we could say, whoops,
we could say type equals submit.
Okay, we could do that.
And let's give it a background color of dark gray.
We'll make the color white.
Let's say padding on the top and bottom we'll do 15.
Now we'll do 10 pixels and left and right 15.
And then let's say border none.
Okay, let's reload.
And now we get this button.
Now this is fine, but what I what I want to do is I want to have a class called
button that we can apply to any button and get this style.
So instead of doing this right here, what I'm going to do is just change this
to dot button.
And since this is just global, not part of just the form, I'm going to
just put it up here instead.
So let's go like under the container.
And then what I would do is apply that class to this input.
Okay, we actually already did.
I already did do it.
So that should still work.
All right.
Now if I wanted to put a button somewhere else, like let's say in box two,
or not even just a button, it could be a link.
So we'll just put a link.
We'll say read more.
If we just leave it like that, of course, it's going to just look like
that.
But if we put class button, now we get that.
Okay.
And actually, since it's a link, we want the color to be white.
So let's go back to button.
Let's see color.
You know what it's getting?
This is mixing it up, the visited color.
So let's just, let's actually get rid of that right there.
There we go.
All right, cool.
So we can apply that class anywhere.
And if we wanted to put a hover state for the button, we could do that as well.
So if we say button hover, and let's say background red, color white.
And now we have that hover effect.
All right.
Hopefully that isn't too confusing.
So that's our form.
Very simple.
Now what I want to do is talk about alignment and floating.
Okay.
So let's go back to our HTML.
We'll go under the form.
And what I'm going to do here is I'm going to put in three blocks.
Okay.
So let's say div.
And let's give this a class of block.
And inside these blocks, we'll have an h3.
We'll just say heading.
And then we'll have a paragraph with dummy text.
I'm just going to make it a little shorter.
Let's go like right there.
And we're going to have three of these.
So let's copy this whole div with the class of block, paste it in two more
times, and reload.
So normal flow, we're just going to have them on top of each other.
But let's say we wanted to float them to go to the side.
All right.
We want them to go horizontally.
So let's go to our CSS.
Remember, they all have a class of block.
So we're going to say we want these to float to the right.
Actually, let's say float left.
And we're going to set a width.
Now, since there's three of them, I'm going to set the width to 33.3%.
All right.
And then let's just add like...
let's just do that for now.
Let's see what that does.
All right.
So reload.
And now we have our three blocks.
Now, if I wanted to, let's say, put a border.
We'll say one pixel solid C.
And let's put in padding 10 pixels.
And let's reload.
Now, that's going to mess everything up.
Because what it's doing is it's taking this width, which just barely fits
everything in, and then it's adding 10 pixels padding.
It's adding a pixel of border, which makes it too big to put all on the
same line.
So the easy fix for this is to add a property called box sizing.
Oops, not box shadow.
Box sizing.
And we set this to the value of border box.
So if we save that and reload, now notice they're all back on the same
line.
Because what this does is it makes it so that it takes in padding and border and it
takes this stuff in and applies it into the width itself so that it's not adding
it to it, making it too big or too wide.
All right.
So just to let you know.
Now, when you get into Flexbox, Flexbox takes care of this stuff really
nicely and you can do a lot more.
But like I said, that's too advanced for this video, for this tutorial.
You might want to check out the Flexbox in 20 minutes video that I did.
All right.
So what about floating elements that aren't all the same width like this?
Let's go ahead and do like a main area and a sidebar.
So we'll go below those three blocks.
Now, when you float stuff, you're going to want to clear it because your next markup
is going to be all messed up.
It's going to be like up here.
So what we do is we create a div.
Let's give it a class of CLR.
You might also see ClearFix sometimes.
I like to use CLR.
And then I'm going to put this at the top because this is kind of a global class.
So we'll go like right here and say .CLR.
And we just want to add clear both.
And that's going to clear any floats above it.
Okay.
And then what we'll do is create a div.
This time I'm going to give it an ID.
So I'll give it an ID of main block.
Alright.
And then let's also do a div with an ID of sidebar.
Okay.
So in the main block, let's just grab this H3 and this paragraph.
And then sidebar.
We'll just have the paragraph.
So by default, obviously these are going to be on top of each other.
But let's say we want the heading to be kind of the main area and take up like
this much space.
And then the sidebar over here.
So what we would do is go to our CSS.
And remember their ID.
So we want to use a number sign.
And let's say main block.
Okay.
Main block.
And we're going to float that to the left.
And then I'm going to set a width of 70%.
Okay.
Because I want this to be responsive.
Alright.
And then let's copy that.
And then for this we'll say sidebar.
That's what I called it.
Right?
Sidebar.
And we want that to float to the right.
And we want that to be 30%.
Alright.
So let's go ahead and save that and reload.
And there we go.
Now for the sidebar, I'm also going to add... actually let's add a background
color of dark gray.
Color white.
Oops.
Color white.
And let's add padding 15 pixels and save.
Okay.
Now again, it's not...
it's going to go on down here.
It doesn't look right.
So what we need to do is just add in our border.
I'm sorry.
Our box sizing of border box.
Okay.
And we're going to also add some padding in the border box on our main block.
Okay.
So now we'll reload.
And there we go.
So now it's floated correctly.
Alright.
So we are getting there guys.
Now I want to talk a little bit about positioning.
Alright.
So the position property has a few different values.
So static is actually the default.
If we don't assign a position, it's static.
This just renders the elements in order of the document flow.
Relative means that the element is positioned relative to its normal
position.
So it falls naturally, but we can add properties like top, left, right,
bottom, and so on.
And we can push it to where we want.
Now absolute will allow us to target whatever position we want inside of a
relative element.
And I'll show you what I mean in a second.
Fixed is a fixed position to the browser window.
So no matter how much we scroll, where we are on the page, it'll always be
in the same position.
Initial sets the property to its default value.
And then inherit will inherit whatever the property of its parent element.
So let's take a look at some of these in action.
Alright guys.
So back to our HTML.
Remember we did float the main block and sidebar.
So I'm gonna go under those two divs and just clear it out.
So we'll say div and we're gonna give it a class of CLR.
Okay.
And then what I'm gonna do is I'm gonna create a div and let's give this a class
of P-box for positioning box.
Alright.
And then I'm gonna put an h1 in here.
We'll just say hello.
And then let's also put an h2 and we'll say goodbye.
And I'm just using these so I can give you some examples on positioning.
So let's go ahead and save that.
Now if we reload we're just gonna see the two headings.
But we're gonna go to our CSS now.
Just make that a little smaller.
And let's see.
We're going to target the P-box element that we just created.
And I'm gonna set a specific width and height to this.
So let's say 800 pixels for the width.
Height we'll say 500 pixels.
And then let's just add a border around it so we can definitely see it.
So one pixel solid, one pixel solid black.
Alright.
So if we look at that, that's what it's gonna look like.
Now let's add a little margin to the top to push it down a little bit.
Alright.
So this is positioned static by default.
Now I want these to be positioned absolute so I can move them around wherever I want
within its element.
Now to do that, actually let me show you what happens if we don't set it to
relative first.
So if we say dot P-box and let's target the H1.
That should be a dot.
Alright.
And then let's say top and we'll set it to 40 pixels.
So let's see what happens when I reload to this H1.
Nothing.
Let's see.
That's because I didn't set it to absolute.
I want position position absolute.
Alright.
And then reload.
And now it disappears.
Now it doesn't actually disappear.
What happens is if we go up here, here it is.
So what's going on is it's we're saying top 40 pixels.
So it's coming down 40 pixels from the top.
Now since it doesn't have an apparent element that is positioned relative,
it's just going to use the entire HTML document, okay, as its container.
Now we want it to be pushed 40 pixels from the top of this element of P-box.
So in order for that to happen, we need to actually set this to position
relative.
Alright.
So now if we save and reload, now it's pushed 40 pixels from the top.
And just to show you, I'll change it to 100.
Alright.
And then we can basically put this element wherever we want.
If we want it to go, let's say from the left, 200 pixels.
Reload.
And then you can see it's down 100 and to the left, or to the right from the left,
200.
Okay.
Let's say we wanted to move like somewhere down here.
We'll say P-box and we'll target the H2.
Set it to position absolute.
And then let's say we want it from the bottom, 40 pixels.
And then let's say from the right, 100 pixels.
Okay.
Reload.
And there we go.
So you can see we can put this stuff wherever we want.
And this is really helpful when you're building games that have to do with CSS.
Alright.
You can imagine moving like a little image, a little checker or something
around the board.
Alright.
Now let's look at fixed positioning real quick.
So what I'll do is I'm going to actually go outside of the container and I'm going
to create an A tag.
Alright.
Let's actually give it a class of button.
Okay.
Remember we have that button class.
And I'm also going to give it a class of, let's say fix me.
Okay.
So it has two classes now, fix me and button.
Now if I reload, it's going to show down here.
Whoops.
We have no text inside the link.
We'll just say hello.
Alright.
So we have this button.
Hello.
Now if we set it to fixed, what it'll do is it'll be kind of stuck on the page
somewhere and how, wherever we scroll, it'll still stay there.
So let me show you.
If we go down here and we say dot fix me, and then we're going to set position to
fixed and then let's set top to 400 pixels.
Alright.
So now if we save and reload, you'll see that that button is now going to stay
there 400 pixels from the top of the browser.
And it's, it's, it's not going to move.
Okay.
No matter where we are on the web page.
And that's really cool for like, like social media links, things like that,
where you want, you know, you want the user to always see it.
Sometimes you'll even see this with the nav bar.
So when you scroll down the nav bar still shows.
Alright.
So we're past an hour now and we still have to do the layout.
So I apologize that this is taking so long, but I do want to cover everything.
So what I want to do now is show you how to use an image as an element background.
So we're going to use this right here, this P box.
So let's see, I'm just going to grab an image real quick.
Let's say light abstract image.
Actually, it's not what I want.
Let's grab this right here.
Alright.
So I'm going to grab this image and I'm just going to save it as BG image dot
JPEG.
And we'll save it to our cheat sheet images folder.
Alright.
And then let's go back and close those.
Let's go back to our CSS and under P box, let's say background dash image.
And then that's going to, we're going to say URL.
And then in here we need a path to the image.
So it's going to be dot dot slash because right now we're in the CSS folder,
but we want to go outside of it.
So that brings us out.
And then we want to go into the images folder and then we want to call BG image
dot JPEG.
Alright.
So let's save that and reload.
And now you'll see we have the image as the background.
Now there's different background styles we can use.
So for instance, the position.
So let's go down here and say background position, and we're going to set that to,
let's say a hundred pixels, 200 pixels and reload.
What that's going to do is it's going to push it down a hundred pixels and push it
or push it over a hundred pixels and down 200.
Now notice that the, the, it's actually repeating the images, repeating.
Okay.
This is the end.
And then it repeats both ways.
So what we're going to do is set background dash repeat to no repeat.
Alright.
And reload.
And now you'll see that it does not repeat.
Now for a background position,
you can also use, I cannot type position today.
You can also use center.
Let's say center, center and reload.
And that will center it on the, you know, horizontally and vertically.
We could say center top, reload, and that'll center it top.
So you can use pixels or you can use center.
You can also use percentages, I believe.
All right.
But that's what we're, that's all we're going to do with the background images.
All right.
So the last thing I want to do inside the cheat sheet is I want to, uh, I want to
show you a little bit about pseudo classes.
So what I'm going to do is in the container under the P box, let's go ahead
and put in a UL.
We're going to have a bunch of allies.
I'm just going to say list item and we'll copy that.
We're just going to have a bunch of these.
Okay.
So we'll reload.
So we have a bunch of list items and we can use pseudo classes to target certain
things.
So, um, let's say that, well, let's give that a class actually.
So UL class, we'll just call it my list.
All right.
So we'll say dot my list.
And, uh, actually we're going to target an ally and then I'm going to use a pseudo
class by using a colon and we're going to say first dash child.
Okay.
And then we're going to set the background.
We'll say background and we'll set that to red.
Notice that we don't have to use background dash color.
We can use background and then we can use either a color or an image here.
Okay.
And that's going to get the first child.
It's going to get the first ally.
We also have last child.
Okay.
So last child.
And we'll change that to, let's say blue.
I'm not going to go over all of the pseudo elements, but, um, just some of the
important ones.
Now let's say you wanted to target like the fifth one of this.
So what you could do, and this is all CSS three, we could say my list ally,
and then we could use something called nth child.
And then it's, we're going to put in some parentheses here and let's say we want the
fifth.
So we could put five and then we'll say color, or let's say background,
uh, yellow.
All right.
So we'll reload.
And now the fifth one is yellow.
So you can target whatever one you want using these pseudo elements.
Now you can also use, um, even and odd with nth child.
So let's copy that.
And let's say we want all of the even to be gray and reload.
And now all the even list items will have a gray background.
So very, very helpful, especially if this stuff is dynamically generated and you
can't really target a specific list item.
All right guys.
So we've looked at quite a bit, pretty much all of the fundamentals of CSS
as far as the properties and all that.
I mean, there are more, but it's impossible to go over all of them in this
amount of time.
Um, I'm way over what I wanted to do, but I do want to do what I promised and
kind of create a website layout for you guys.
So hopefully this isn't too long.
If you've watched it up to this point, then I'm sure you won't mind watching
another, um, you know, 10, 15 minutes.
So, uh, I'm going to do this kind of quick because we did go over, you know,
most of the stuff that we're going to be doing here.
So in my website, I'm going to create a new file called index.html.
Why do I keep doing that?
I do that because I usually use Atom.
And when you do that, you create a new file.
You can just type the name and save.
You don't have to do control S.
All right.
And then let's create a folder called CSS and we'll create another folder called
images.
All right.
Now in CSS, we'll create a file and let's save it as style.css.
Okay.
We're now in the my website folder.
Cheat sheet is done.
Okay.
So we have these two files.
Let's go ahead and add some basic markup to our website.
I'm just going to say my website.
All right.
And then we want to link the style sheet.
So let's link to CSS slash style.css.
And then we're going to write our markup.
And that's usually what I like to do is do the markup first and then the styling.
So we're going to be using HTML5 semantic elements.
So let's start with a header.
And our header is just going to basically have an h1 and we'll just call it my
website.
That's kind of like our logo.
And I'm going to give this header an id of main header.
All right.
Now we're going to have a container class that's going to push everything to the
middle and so on, but I don't want to wrap it around the whole site because I don't
want everything to be pushed over.
For instance, the header, I want the background color to go across the whole
thing, but I want the content, the actual h1 to be, you know,
to have the container around it.
So we're going to be using the container inside of this and inside a lot of our
elements.
All right.
So there's our header.
Next thing we'll do is the navbar.
And again, we're going to have the container inside of it.
So what I'm going to do is just copy this.
We'll change this to nav.
Change the id to navbar.
Make sure you change that as well.
And then we're going to have our ul.
Let's do our li's.
Okay.
Our a tags, they're not going to actually go anywhere, but this is our fake
navigation.
So we'll say home, about, services and contact.
All right.
And then under that, we're going to have like a showcase area.
So for that, I'm going to use a section tag and I'm going to give this an id of
showcase.
Notice these are things that you use ids for because I'm not going to have another
main navbar or another main header or showcase.
This is all unique stuff.
So I'm giving it an id.
Okay.
So that gives you an example of the difference.
All right.
And then container, however, we're using in all different places.
So that is a class.
Okay.
Let's put an h1 in our showcase.
Just put some dummy text.
I want it really short though.
So I'll just do that.
All right.
So that's our showcase.
Let's tab that over.
And then under the showcase, we're going to have like the main area, which is also
going to be a section.
So let's say section.
Let's see, section id main.
And we'll just put an h1 in here.
We'll say welcome.
And then we'll have a paragraph with some dummy text.
Now the main area will be on the left and then we'll have a sidebar, which is going
to be an aside.
All right.
And the aside, I'm going to give that an id as well of sidebar.
All right.
And then let's see, what do I want to put here?
We'll just put some text.
I'll just copy this.
I'll make it a little shorter though.
All right.
Now the main and the sidebar, I do want both of those pushed to the middle.
So I'm going to wrap a container around both of those.
And once this comes together, you'll see exactly why I'm doing this.
All right.
And then finally, we just want a footer.
So we're going to use an html5 footer tag and let's give that an id of main footer.
Okay.
We'll put a paragraph and let's say copyright ampersand 2017.
My website.
All right.
So that should be all the markups.
So now let's go to our file path here.
It's in crash course slash... actually, we'll just open it from Explorer.
Let's see... my website index html.
So that's what it looks like without CSS.
Why isn't that... oh my god, that should be copy 2017.
All right.
So this is what it looks like without CSS.
Now we're going to start to add our styles.
Again, I'm going to be doing this kind of quick because a lot of this stuff we
already went over.
So let's say body.
Let's say background or background color.
Light gray.
A lot of the styles would be the same as well.
So we'll say color will be five font family.
Font family Arial.
Helvetica Sans Serif.
Okay.
We'll set the font size to 16.
Let's set the line height.
And these are just common settings that I use a lot.
The line height and so on.
And then I'm going to just margin out to zero.
All right.
And then the container.
So container will be 80 percent.
We want the margin auto.
And we're going to set overflow to hidden so that there's no scroll bars even if
something goes outside of its container.
All right.
Now remember we have the header which has an ID of main header.
So for that I'm going to set the background.
Actually let's do background color.
And I'm going to set that to the color coral.
And then set the actual text color to white.
All right.
So let's look at that.
So that's what it looks like.
Now we want to style the nav bar.
And this is actually really easy.
All we need to do is take the padding away from the UL, take the bullet points away.
We need to float the links or not float but display them inline.
Okay.
So that they float across.
Well, I guess we will float them as well.
I'm sorry.
We're not going to make the links inline.
We're going to make the list items inline.
So let's grab the UL.
So we'll say main.
I'm sorry.
Nav bar.
Let's do the nav bar itself first.
Excuse me.
Which is going to have a background color of dark gray.
We'll say color white.
And let's say... actually that's fine.
We'll just leave that.
And then the nav bar UL.
Let's get rid of the padding.
Let's get rid of these bullet points.
So list style none.
All right.
So if we go ahead and we look at it, that's what it'll look like.
Now the LI tags, we want those to be inline instead of block.
So let's say nav bar LI.
And we're going to set display inline.
All right.
Now if we look at that, you'll see now that they go to the side.
And then the last part of the nav bar to style is the links.
So nav bar A.
Let's set the color to white.
Let's set the text decoration to none.
Let's set the color to... oh we already did the color.
Let's set the font size to 18 pixels.
Make them a little bigger.
And then padding right, because we don't want them so close together, to 15 pixels.
Reload and there we go.
There's our nav bar.
So next thing is the showcase.
So showcase... and we're going to set a background image for this.
I'll just type it background image URL.
Okay that's going to be... it's going to go dot dot slash images slash showcase dot
jpeg.
So let's get that image.
That was the light abstract coral.
Where is it?
Let's narrow this down to large.
This... is that it?
I don't think that's it.
Right here.
I'm going to grab this image here.
And you can use whatever image you want, but I'm going to save this.
Make sure it's in the my website images.
And we're going to call this showcase.
All right so if we go back to our site.
Actually we need to add some other stuff here.
So we have the background image.
Let's set the position.
So background position.
I'm going to set that to center right.
And let's set the height.
I'm going to set it just as height for now, but then I'm going to show you
something.
All right and then let's... that's good.
Let's save it.
All right so for... actually let's add a couple other things here.
We'll say margin bottom because we want to push everything down.
Let's say 30 pixels.
Everything under the showcase.
And then let's also text align to the center.
Okay now I want to grab on to the h1 that's in the showcase.
So for the h1 I'm going to change the color to white.
I'm going to change the font size to 50.
I want to make it bigger.
I'm going to change the line height.
I'm going to change that to 1.6 m.
And then just add some padding to the top 30 pixels.
So that'll move the h1 down.
So let's go ahead and reload.
All right now as I go smaller here notice that the text goes outside of the height
here.
So this is a case where you want to use min height.
Okay because you want the height to gradually grow if the text grows.
So in the showcase instead of just height we're going to min dash height.
So if we're at this level there we go 300.
But if we make it smaller you'll see that it'll let the height will grow with the
text which is what we want.
That makes it responsive.
In fact this website will be responsive.
All right so that's the showcase.
Now for the main and the sidebar.
So we have the main part here right and then this is the sidebar.
We want them to float those.
So let's say main float to the left.
Set the width to 70 percent.
Padding set to 0.
30 pixels.
And then let's set the box sizing to border box.
So it includes that padding and stuff.
All right and then for the sidebar it's going to be kind of similar.
So I'm going to just copy that.
I'll say sidebar.
It's going to float to the right.
We're going to give it a width of 30.
Let's give it a background.
Background of dark gray and a color of white.
And that should be good.
Actually let's do padding 10 pixels all the way around.
Reload.
There we go.
And then for the footer, remember it has an id of main footer.
I'm going to set background of dark gray.
Color of white.
Text align to the center.
And what else?
Padding.
Let's do 20 pixels of padding.
And then let's move it down a little.
So margin top.
We'll say 40 pixels.
Save that.
Reload.
And there's our footer.
Now the last step is to make it completely responsive.
Right now if we go down small like this, I don't want these to be floated.
So what we need to do is add a media query.
We can add a media query by saying add media.
And then the condition is if it's a max width of 600 pixels.
So any styles we put in here are only going to be in effect if it's under 600
pixels like this over here.
And what we want to do is we want to remove the floats from the main and the
sidebar.
We also want to change the width to 100 percent for both of those.
So let's say main width 100 percent.
And then we want to say float none.
Okay same thing with the sidebar.
So basically they just go on top of each other.
All right so let's save.
Reload.
And there we go.
So we now have a responsive website using CSS.
All right so that was a long video guys.
Hopefully you learned a lot.
I feel like it was pretty good.
It was conveyed pretty well.
Let me know if you think different or let me know if you liked it.
Please subscribe if you liked it.
And that's it.
Thanks for watching guys.
I do have a Patreon account that's linked in the description if you guys want to
support me even further, even for a dollar per month.
I do have a couple perks and I'm in the process of figuring out some more to give
to my patrons.
So check that out.
It's in the description.
And thanks for watching guys.
See you next time.