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
LFA TV
18 hours agoLFA TV ALL DAY STREAM - FRIDAY 7/11/25
1,899 watching -
1:17:36
vivafrei
2 hours agoThe Epstein Fallout CONTINUES! Gavin NewScum Supports Child Trafficking? AND MORE!
96.3K30 -
1:39:06
The White House
3 hours agoPresident Trump Participates in a Roundtable with First Responders and Local Officials
15.1K9 -
The Nunn Report - w/ Dan Nunn
2 hours ago[Ep 706] LIVE From TPUSA - SAS Tamp, FL | Bongino vs Bondi | Gen-Z is Awake!
3.61K1 -
LIVE
StoneMountain64
4 hours agoRematch BEST Tricks to RANK UP
199 watching -
50:04
Watchmen Action: Ezekiel 33:6 - Equip The Church To Engage The Culture
1 hour ago $0.63 earnedThe Watchmen Brief LIVE From Turning Point SAS Conference!
10.7K2 -
LIVE
RalliedLIVE
3 hours ago $0.78 earnedSHOTTY BOYS VS THE WORLD - TRIPLE THREAT CHALLENGE
79 watching -
3:54:01
Donut Operator
5 hours agoHIPPO CRIME/ MP7/ FLOODS: communityfoundation . net
49.5K3 -
1:19:06
Jeff Ahern
2 hours ago $0.69 earnedFriday Freak Out with Jeff Ahern
9.56K5 -
1:03:53
Crypto Power Hour
2 hours ago $0.43 earnedHigh Returns From Staking Cryptocurrency
7.3K4