CSS stands for Cascading Style Sheets.
HTML elements are styled with CSS, by setting background, font-size, animations, and more.
In some cases CSS provides a powerful alternative to various HTML attributes.
For details on CSS, see our CSS Tutorial and CSS Reference.
With inline CSS a single HTML element is given a unique style.
To style an HTML element, add a style attribute.
Two <div> elements, each styled with their own style attribute.
<div style="background-color:aliceblue;color:steelblue;padding:10px;">
This div has an aliceblue background and a steelblue color
</div>
<br />
<div style="background-color:papayawhip;color:indianred;padding:10px;">
This div has a papayawhip background and an indianred color
</div>
With internal CSS a style is applied to a single HTML page.
Styles for that page are defined by a <style> element on that same page.
Two <div> elements styled with internal CSS.
<style>
.aliceblue { background-color:aliceblue;color:steelblue;padding:10px; }
.papaya { background-color:papayawhip;color:indianred;padding:10px; }
</style>
<div class="aliceblue">
This div has an aliceblue background and a steelblue color
</div>
<br />
<div class="papaya">
This div has a papayawhip background and an indianred color
</div>
With external CSS styles are defined for many HTML pages.
Styles are defined in a separate CSS file which is then included in a page using a <link> tag.
Two <div> elements styled with external CSS.
<link rel="stylesheet" type="text/css" href="/tutorial/style.css">
<div class="aliceblue">
This div has an aliceblue background and a steelblue color
</div>
<br />
<div class="papaya">
This div has a papayawhip background and an indianred color
</div>
The external CSS file:
.aliceblue { background-color: aliceblue; color: steelblue; padding: 10px; }
.papaya { background-color: papayawhip; color: indianred; padding: 10px; }
In summary: The 3 ways to add CSS are quite different, but the end-results are exactly the same.
In real-world sites, external CSS is the more commonly used approach.
Text can be styled with these CSS properties:
color property sets the text color.font-size property sets the size of text.font-family property sets the font.font-weight property sets the font weight.background-color property sets the background color.Two <div> elements with different text styles.
<style>
.modern { color: forestgreen; font-size:20px;
font-family:Courier New, Courier, monospace;
background-color:paleturquoise;
}
.classic { color: steelblue; font-size:18px;
font-family:'Times New Roman', Times, serif;
}
</style>
<div class="modern">Text with a large fixed-width font.</div>
<br />
<div class="classic">Text with a classic font.</div>
For details on font, see our CSS font property reference.
The CSS border property defines the border of an HTML element.
A paragraph with a CSS border.
A paragraph with a dashed border.
<p style="border:3px dashed orangered;padding:15px;">
A paragraph with a dashed border.
</p>
For details on border, see our CSS border property reference.
Did you know that you can use an image as a border?
The border-image property creates border images on an HTML elements.
An image border placed on a <div> element.
<style>
.bordered {
border: 45px solid transparent;
border-image: url(/img/html/border.png) 45 round;
height: 200px; width: 300px;
}
</style>
<div class="bordered">This box uses an image as its border.</div>
For details on border-image, see our CSS border-image property reference.
CSS padding defines the spacing between the text and the border of the HTML element.
A paragraph with padding on all sides (inside the border).
A paragraph with padding (inside the border).
<p style="padding: 25px; border: 2px dashed orangered; ">
A paragraph with padding (inside the border).
</p>
For details on padding, see our CSS padding property reference.
CSS margin defines the spacing outside the border of the HTML element.
A paragraph with margin on all sides (outside the border).
A paragraph with margin (outside the border).
<p style="margin: 25px; border: 2px dashed orangered;">
A paragraph with margin (outside the border).
</p>
For details on margin, see our CSS padding margin reference.
Here you can see the difference.
<div style="background:lightblue;padding:10px;">
<div style="background:aliceblue;padding:25px;">
A div with 25px padding.
</div>
<br />
<div style="background:aliceblue;margin:25px;">
A div with 25px margin.
</div>
</div>
An id attribute adds a unique identifier to an HTML element.
It allows CSS and JavaScript to locate and reference that particular element.
A styled paragraph with an id attribute.
A paragraph styled with CSS.
<style>
#myid { background:aliceblue; border:1px solid steelblue; padding:15px; }
</style>
<p id="myid">
A paragraph styled with CSS.
</p>
Note: In CSS the id is prefixed with a '#' (pound sign).
For details on id, see our HTML id attribute reference.
A class attribute adds one or more CSS classnames to an HTML element.
A class allows CSS to style multiple elements with a given classname.
A styled paragraph with a class attribute.
A paragraph styled with CSS.
<style>
.myclassname {border:1px solid darkblue;background:azure;padding:20px;}
</style>
<p class="myclassname">A paragraph styled with CSS.</p>
Note: In CSS the classname is prefixed with a '.' (period).
For details on class, see our HTML class attribute reference.
The id references a single element, whereas class can address multiple elements.
Therefore, id can be used to style one element and class can style multiple elements.
Developers prefer CSS classes over ids, because classes are re-usable.
It's easy to identify id selectors versus class selectors in CSS.
id selectors are prefixed with a # (hash) whereas class
selectors are prefixed with a . (dot).
This example has one id selector and two class selectors.
#first-name { font-weight: bold; }
.label-text { color:red; }
.field-text { font-weight: normal; }
