- Here's a hot take for you.
I think having a basic understanding of HTML
and CSS is essential for anyone
who does work on the internet.
I'm a designer,
and while I don't believe that every designer needs
to learn to write code from scratch
to build their own websites,
HTML and CSS are the basic materials
that our designs are built with.
So we should understand how they work together
to form webpages.
In this video, I wanna introduce you to HTML and CSS
to help you get that basic understanding of how they work
and perhaps get you started with,
not exactly writing code yourself,
but at least being able to read it.
So by the end of the video,
you are gonna know exactly what this means.
All right, let's get into it.
(upbeat music)
So on a basic level,
HTML is the code that puts the structure
in place for a website, like the building blocks,
and CSS is the code that tells the browser what
those building blocks should look like.
Here's a look at some HTML.
These things here are called HTML tags,
and usually they will wrap content
with an opening tag and a closing tag.
Some HTML is fairly self-explanatory,
like the footer tag is used for the footer of your website,
but others a little bit less so.
The h1 stands for the top
or like the first level of heading.
Usually, that's the largest
or the most important one on a page.
h2 is the next size down, et cetera.
p stands for paragraph, so like a block of text.
And the div tag here is a very commonly used tag.
It's essentially a container for content.
When a design is built into a functioning website,
we have to think about the underlying structure
to figure out which HTML building blocks we need
to put in place.
This usually means thinking about your designs
as a series of boxes.
Every piece of content in the design will fit
into a box somehow, even if the content is rounded.
And every box is created with a set of HTML tags.
As you can see, often your content ends up being a box
inside a box, inside a box, inside a,
you get what I mean.
And that's why it's important to use both the opening
and the closing tag,
'cause that's what tells the browser
where the box starts and ends.
It can get really complex,
and I know it can be a little bit difficult
to wrap your head around.
You can have a lot of different layers
and things nested within one another.
But once you understand this idea
that the web is built based on boxes inside of boxes,
you'll find it's much easier to like,
read the code to find the element you're looking for
and the piece of code that you wanna change.
Now, by default, HTML stacks vertically
with one thing after another,
and it has some default,
although, let's face it, very ugly styling to it.
And we use CSS to further control the exact positioning
of different elements
and for making them look a whole lot better
than the default styling.
So let's take a look at some CSS.
As you can see,
CSS code looks a little different to HTML,
and you might see it applied in three ways.
The main way that it's usually used is
in a separate style sheet that's linked to from a webpage.
It could also appear within a set of HTML style tags
on the page itself.
Or sometimes you find it written alongside the HTML,
and that's called inline styling.
The great thing about the first two options, though,
and why they're considered more like best practice
is that they're creating reusable classes
that can be used to style multiple elements.
So if we wanted all three of these boxes
to look like this one, for example,
instead of writing out all of the styles needed
to get it to look like this three times
or doing any copy and pasting,
we can attach the styles to a class in the style sheet,
and then just add that class to each box.
And then if we wanna make a change to how the boxes look,
we just have to make that change
in one place in the style sheet to the class,
and it'll automatically update
across all the places that it's used.
You can add more than one CSS class to an element as well.
In fact, you can add as many as you like, really.
And you can even call them whatever you like.
If you use multiple classes, though,
you've just gotta watch out for any clashing styles.
'Cause if you have two classes that are both trying
to tell an element like what font size it should be,
for example, the browser reads the style sheet top
to bottom, and it'll listen to the bottom one.
There's a hack to get around this.
It's something we try to avoid when possible,
but it honestly does come in handy sometimes
when you're customizing code.
And that is you can add an !important next
to the style that you actually want
to ensure the browser listens to.
We can get more specific
with classes as well by nesting them.
For example, if you want these boxes to be white
if they're on a pink background,
but stay gray if they're on a white background,
the CSS could be written like this,
saying that if a box is within something
that is styled with pink background class,
then it should be white.
You can also target HTML tags directly.
You don't have to apply a class to them,
which is really useful.
For example, styling all of your h1s
or all of your paragraphs to look the same.
Speaking of styles,
they are always formatted like this,
with the property first, colon,
then the instructions for how you want to style it.
And if your CSS isn't working, then often it's
because you forgot to put the semicolon in there,
not that I am speaking from experience or anything.
There are so many different CSS properties,
and even the pros don't know them all by heart, honestly.
So don't worry about learning them all.
Many of them are pretty self-explanatory,
but when in doubt, just Google it.
And I'll leave a link in the description as well
to a few different resources you can look at.
Some of the most important like, fundamental CSS
to understand, though, is margin and padding.
So let me explain them quickly.
If we want to, we can manually set the height
and width of a box using CSS.
And remember I'm using the term box here
to just mean a container for the content.
It doesn't have to actually look like a box.
But if no height or width is specifically set,
then the content you put inside a box
is gonna be the thing that defines the size of it.
And because we're working with boxes inside of boxes,
we can also use percentages to define the height or width.
So in this case,
the box is filling 100% of the width
of the container it's inside of.
If you adjust the padding of an element,
you are adding space around the edges inside the box.
And if you adjust the margin,
you're changing the spacing outside of the box.
If you add a border,
it's gonna be a line around the content block itself.
So here we can see the padding on the inside
and the margin on the outside of the border.
This is called the box model,
because like I said earlier,
websites are really just built from a bunch of boxes.
And once you understand that,
you can start to think of your design
as a set of blocks fitting together and inside each other,
and you'll be able to better understand
how your design can be built.
So let's go back now to that piece of code
that I showed you at the beginning.
Hopefully now you can read this
and see that the HTML tags are creating containers
for the content, the boxes,
and that the CSS is styling each HTML tag
to set the way it should look.
So if, for example,
you wanted to add a border to these boxes here,
now you know what code needs to be changed to edit that.
Being able to read HTML
and CSS like this really comes in handy
when you're doing a design review
of a page a developer has built,
when you're checking how well what you see
in the browser matches the layout you designed.
And I've got a video coming soon about
how you can use the inspect element
in a browser to do a design review
and give feedback to a developer.
So make sure that you subscribe to my channel to see that,
as well as other videos to help you along
in your design career.
Thanks for watching and coming along
on this crash course with me.
Hope you enjoyed it, and I'll see you next time.
(upbeat music)