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!
-
SynthTrax & DJ Cheezus Livestreams
15 hours agoFriday Night Synthwave 80s 90s Electronica and more DJ MIX Livestream THE GREAT EDO WARS OF 2067 Edition
45.5K2 -
4:45:15
RalliedLIVE
5 hours ago $1.12 earnedWarzone Domination w/ Ral
33.8K -
1:10:17
Sarah Westall
7 hours agoWorld Leaders Increasingly Display Panic Behavior as Economic Change Accelerates w/ Andy Schectman
56.2K12 -
59:54
Motherland Casino
4 hours ago $0.77 earnedScar x Ayanna
17.2K5 -
41:57
BonginoReport
9 hours agoProtecting Kids From WOKE Ideology in School (Ep. 35) - Nightly Scroll with Hayley Caronia -04/25/25
108K41 -
LIVE
SpartakusLIVE
7 hours agoFriday Night HYPE w/ #1 All-American Solo NUKE Hero
127 watching -
1:24:15
crystalkittn
3 hours agohappy friday lets get littt✨ !motherland
7.32K3 -
1:15:07
Kim Iversen
1 day agoThe Left Is Dead — What And Who Will Rise From the Ashes?
99.7K79 -
2:06:17
Joker Effect
4 hours agoYOU DON'T UNDERSTAND FREEDOM OF SPEECH IF THIS MAKES YOU MAD!
12.6K -
1:45:26
vivafrei
11 hours agoSantos Sentenced to 87 MONTHS! Corrupt Judges ARRESTED! Some Canada Stuff & MORE!
142K92