"Python Basics (2015)" was retired on June 22, 2018. You are now viewing the recommended replacement.

Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Introduction to HTML and CSS

Well done!

You have completed Introduction to HTML and CSS!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

CSS and HTML

4:37 with Laura Coronel

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.

[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