Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Introduction to HTML and CSS!
You have completed Introduction to HTML and CSS!
Preview
Uncover the role of CSS in web development, learn the art of separating content and presentation, and master CSS inclusion methods. Create CSS files and link them to HTML with hands-on practice.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
Now that you've got a good
understanding of HTML,
0:04
it's time to dive into the next stage
of your web development journey.
0:07
In this stage, we'll dive into
the fascinating world of CSS,
0:12
Cascading Style Sheets, and explore
its essential role in web development.
0:16
So what exactly is CSS, and why is it so
important in web development?
0:22
CSS, short for Cascading Style Sheets,
is a language used for
0:28
describing the presentation of web pages.
0:32
In simpler terms,
it's the creative side of web development.
0:35
CSS allows us to control the layout,
colors, font, and
0:39
other visual aspects of a web page, making
it visually appealing and user friendly.
0:44
If we have a look at our mockup again,
0:50
we can see that all the content is in
place, but we have a lot of styling to do.
0:53
There are three common ways
to add CSS to our HTML.
0:58
Inline CSS, this involves using
the style attribute within HTML tags.
1:03
It's useful for making quick, specific
style changes to individual elements.
1:09
Internal CSS, this method utilizes a style
1:15
element within the HTML
document head tags.
1:19
It's suitable for
styling a single page and is great for
1:23
maintaining a clean structure.
1:27
External CSS, this is the most common and
flexible approach.
1:29
It involves linking an external
CSS file to your HTML
1:34
document using the link element.
1:39
The syntax looks like this.
1:42
Link is the tag name.
1:44
The link tag defines the relationship
between the current document and
1:46
an external resource.
1:51
Rel ="stylesheet", determines what
relationship we're about to define.
1:52
In this case,
we're defining an external stylesheet.
1:58
Href should feel quite familiar.
2:02
Href specifies the location
of the linked document.
2:05
This is where we'll specify
the location of a CSS file.
2:08
Finally, the link tag is self-closing, so
2:13
we'll simply use the /syntax
here to close the tag.
2:16
This method allows you to apply
the same styles across multiple pages,
2:21
ensuring consistency.
2:26
One of the fundamental principles of web
development is a separation of content and
2:28
presentation.
2:34
HTML, which you've learned about earlier
in this course, is responsible for
2:35
structuring the content of a webpage
like text, images, and links.
2:40
On the other hand, CSS takes care of how
that content looks and is presented.
2:45
This separation not only enhances
the efficiency of web development, but
2:51
also makes our code more maintainable and
adaptable.
2:56
The best way to keep this separation
is to use the external CSS method.
3:00
Here's how we do it.
3:06
First, let's create our CSS file.
3:07
Navigate to File, New File,
and we'll call it styles.css,
3:10
since it stores multiple styles and
we want a CSS file.
3:16
Then back in our index.html file,
we'll use the link element we
3:21
learned about earlier, and
nest it inside the head element like so.
3:26
Link rel = stylesheet,
3:32
href = styles.css.
3:36
We've effectively linked our new
styles.css file to index.html.
3:40
As we learn and write CSS in our new file,
3:46
the styling will apply
to our index.html file.
3:50
Now it's your turn.
3:54
We have a second HTML file,
carbonara.html,
3:55
that also needs to be
linked to our CSS file.
4:00
Pause this video and
try to link our newly created CSS file,
4:04
styles.css, to this file as well.
4:08
All right, this is what I did.
4:14
I created a new link tag.
4:16
I added the attribute rel and
set it equal to stylesheet,
4:19
since we're linking to a CSS stylesheet.
4:23
Then I told it the location of
the stylesheet with the href attribute.
4:26
Now that carbonara,html is linked up,
we can start to style this page.
4:31
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up