Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
CSS handles the presentation layer of a web page, controlling the appearance of our HTML. We use our stylesheets to style the HTML with colors, font sizes, backgrounds, layout, and much more. CSS also allows us to adapt our content to various devices, screen sizes, and resolutions.
Further reading
[MUSIC]
0:00
Hi, my name is Anwar.
0:09
I'm a designer, a developer,
and a teacher at Treehouse.
0:11
My pronouns are he/him.
0:15
In this course, we're going
to learn the basics of CSS,
0:17
one of the core technologies for designing
and building websites and applications.
0:20
No matter what kind of website or
web application you want to build,
0:27
you'll have to use CSS.
0:31
If you haven't written much CSS, or
0:34
even if you've never written
CSS at all, don't worry.
0:36
That's what this course is for.
0:41
We'll start with basic CSS concepts,
0:43
then gradually progress to more
advanced topics and lessons.
0:45
But before diving into CSS, it's
important to have a basic
0:51
understanding of HTML and
the structure of a document.
0:55
If you're not familiar with HTML,
go through our HTML courses first,
0:59
then meet me right back
here in CSS basics.
1:05
So, what exactly is CSS?
1:08
And why is it considered
a core web technology?
1:11
CSS stands for Cascading
Style Sheets, and is a
1:15
stylesheet language used to describe
the presentation of web pages.
1:18
As you might have learned in previous
courses, a web page is made up of three
1:24
different layers that work together
to deliver an experience to the user.
1:29
There's a content layer, a presentation
layer and the behavior layer.
1:34
The content layer is HTML, the structural
foundation or outline of a web page.
1:40
Content like headings,
paragraphs, bulleted lists,
1:46
links, and images are
marked up by our HTML.
1:51
The behavior layer is normally
handled by JavaScript,
1:56
which provides real-time
user interaction.
2:00
And CSS is what handles the
presentation layer of a web page,
2:04
controlling the appearance
of our HTML.
2:09
We use our style sheets to
style the HTML with colors,
2:12
font sizes, backgrounds,
layout, and much more.
2:17
CSS also allows us to adapt our
content to various devices,
2:22
screen sizes, and resolutions.
2:27
As we move forward,
you'll learn strategies for
2:31
keeping these three layers
separate from each other.
2:34
HTML for content, CSS for
style, JavaScript for behavior.
2:37
Back in the days before
CSS was introduced,
2:44
developers would have to embed
presentational tags and attributes
2:46
in the HTML to control the
design of a web page.
2:51
While it's technically still
possible, you'll want to keep
2:56
your structure and
presentation separate.
2:59
There are two important
reasons for this.
3:03
Writing semantic HTML means
choosing the right element
3:08
for the job. When choosing an
HTML element, it's important
3:12
to ask yourself what purpose
does this content have,
3:16
not what should this
content look like.
3:20
Proper semantic HTML will make
your content more meaningful,
3:24
more accessible, and easier
to find using a search engine.
3:28
HTML was never intended to be
a presentational language.
3:34
So defining presentation in
the HTML creates an
3:39
inefficient workflow. Imagine
having to manually edit tens or
3:42
hundreds of HTML files to make
a styling change. CSS makes
3:48
the development and maintenance
of websites more efficient because
3:53
the styles written in a single style
sheet can be shared across
3:58
multiple web pages. A change to
one CSS file, such as adjusting the
4:02
background color, can be reflected
on all pages of your website or app.
4:08
And what's exciting is that
CSS continues to evolve.
4:14
Sophisticated visual effects like
rounded corners, text and box shadows,
4:18
gradients, and even animations have
been built into CSS for some time.
4:24
CSS also includes multi column layouts,
grids and Flexbox designed
4:30
to keep your layouts flexible and legible
across a variety of screens and devices.
4:35
As new technologies arrive,
4:43
CSS will continue to add features to
help you meet the latest challenges.
4:45
It's a great time to be learning CSS.
4:50
You need to sign up for Treehouse in order to download course files.
Sign up