Premium Only Content

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!
-
LIVE
SynthTrax & DJ Cheezus Livestreams
1 day agoFriday Night Synthwave 80s 90s Electronica and more DJ MIX Livestream Trip-Hop SPECIAL EDITION
628 watching -
4:03:27
FusedAegisTV
8 hours agoRumble Smackdown! #001 Street Fighter 6 $500 Online Tournament
38.6K5 -
55:58
BonginoReport
5 hours agoCan Trump Make TikTok Great Again? (Ep. 20) - Nightly Scroll with Hayley Caronia - 04/04/25
118K71 -
LIVE
Jorba4
1 hour ago🔴Live-Jorba4- COD WARZONE- VERDANSK FRIDAY. Hot drops W/ XxXAztecWarrior and Lumpy Potato X2
145 watching -
4:33:11
Nerdrotic
7 hours ago $27.13 earnedPost-Apocalyptic Woke Hollywood, MineCRAP, CinemaCONNED - Friday Night Tights 348, Chris Gore & Rags
106K14 -
1:00:43
Sarah Westall
4 hours agoThe Greatest Financial Crime in History: How Globalist Central Bankers Did It w/ James Patrick
48.6K2 -
LIVE
IamTyrantt
4 hours ago $0.78 earnedTGIF! HIGH ENERGY VIBES!
72 watching -
13:19
China Uncensored
5 hours agoHow Trump's New Tariffs Are CRUSHING China's Economy
26.6K16 -
1:23:47
Kim Iversen
7 hours agoAre Patriots Are Being Deceived? Why Trump and Elon Might Be the Globalists' Greatest Weapons
114K161 -
1:57:34
vivafrei
9 hours agoCanada: Fentanyl Capital of the World w/ Sam Cooper! Pierre Poilievre Listening to Viva w/ Pleb!
118K77