iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

HTML Styles

By · Reviewed & last updated · Part of HTML Tutorial

The style attribute lets you apply CSS directly to a single element. It's the quickest way to change how something looks without a separate stylesheet.

Where styles can live

Inline style="…" Highest priority One element only Internal <style> in <head> Per-page styles Good for prototypes External <link rel="stylesheet"> Shared across pages Best for production
Fig 1. Three ways to attach CSS to a page.

Common style properties

PropertyExampleEffect
colorcolor:#04AA6DText color
background-colorbackground-color:#f1f1f1Element background
font-familyfont-family:Verdana,sans-serifTypeface
font-sizefont-size:18pxText size
text-aligntext-align:centerHorizontal alignment
borderborder:1px solid #dddBorder around an element
Tip: Inline styles are fine for one-off tweaks, but reach for an external stylesheet (or a CSS framework) as soon as you need consistency across pages.

Example

Example
<!DOCTYPE html>
<html>
<body>

<h1 style="color:#04AA6D;">Hello, world!</h1>
<p style="font-family:Verdana;font-size:18px;">Styled with the HTML style attribute.</p>

</body>
</html>
Try it Yourself »

Exercise

Make the heading text green using an inline style.

<h1 style="color: ;">Hello</h1>

Test yourself

Q1. Which attribute applies CSS inline to one element?
Q2. Where do external stylesheets get linked?
Q3. Which style approach is best for production sites?

Discussion

Loading…