Introducing CSS - Inline/External Styles (Cascading Style Sheets) - HTML Tutorial Series

Welcome back to our HTML Tutorial Series! Today, we’re going to enhance the styling of our HTML content by exploring inline styles and external stylesheets. But first, let’s tidy up our HTML structure. We’ll start by separating some of our content into individual paragraphs. Let’s dive in!

In our current HTML file we have a heading, a paragraph with some text, an image, and a link. To improve the structure, we’ll move the image into its own paragraph and separate the text into a new paragraph.

We’ve now separated the descriptive text and the image into their own paragraphs. This makes our HTML more organized and easier to manage.

Now that we’ve updated the structure, let’s add some inline styles. We’ll start by setting the image height to a maximum of 100 pixels and allowing its width to adjust automatically. We’ll also set the background color of the body and the text color.

Here, we’ve added inline styles directly to the body and img elements. The body background color is set to dark gray (#333), and the text color is set to white (#fff). The image’s maximum height is 100 pixels with its width set to auto.

Next, let’s move these inline styles into an external stylesheet. This approach is more scalable and makes it easier to manage styles across multiple pages.

We’ll create a new CSS file named styles.css in a public_html/css/ directory. In this file, we’ll define the same styles we applied inline.

This CSS file sets the body background color and text color, and applies styles to img elements.

Now, let’s link this stylesheet to our HTML file. We’ll remove the inline styles and include a link to our styles.css file in the head section.

We’ve added a "link" tag in the head section to include our external CSS file and removed the inline styles.

Let’s take a look at the result in the browser. As you can see, the styles are applied through the external stylesheet, keeping our HTML clean and organized.

That wraps up today’s tutorial! We’ve covered how to separate HTML content into distinct paragraphs and move styles from inline to an external stylesheet. Don’t forget to like, subscribe, and hit the notification bell for more web development tips. Thanks for watching!