HTML Styles - CSS
On this page, you can learn about adding CSS to HTML elements in 3 ways, learn to style them using different CSS properties and see different examples.
CSS is used to style HTML. It determines how the HTML elements appear on the screen, paper, or in other media.
CSS saves a lot of work. It can control the layout of several pages all at once.
You can add CSS to HTML elements in 3 ways:
- Inline — the
styleattribute is added directly to an HTML element. - Internal — a
<style>element is placed in the<head>section of the page. - External — a separate
.cssfile is linked to the page.
Why three methods? Each one trades convenience for scope. Inline styles are quick but apply to a single element only. Internal styles cover one page. External style sheets are the recommended approach for real projects, because one file can style an entire website and is cached by the browser.
Cascade priority
When more than one rule targets the same element, CSS resolves the conflict by specificity and source order. As a rule of thumb, the closer a style is declared to the element, the higher its priority:
inline style > internal <style> > external style sheet
So if an external sheet says a paragraph is blue and an inline style says it is red, the paragraph is red. (The !important flag can override this order, but use it sparingly.) Learn more in the CSS introduction.
Let’s look through each way.
Inline CSS
An inline CSS applies a particular style to a single HTML element. Here the style attribute of an HTML element is used.
In the example below the text color of the <p> element is red:
Example of the inline CSS:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Usage of the inline CSS</h1>
<p style="color:red;">The paragraph is red.</p>
</body>
</html>Internal CSS
An internal CSS specifies a style for a single HTML page. It is defined in the <head> element of an HTML page, inside of a <style> tag:
Example of the internal CSS:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: yellow;
}
h1 {
font-size: 30px;
}
p {
font-size: 18px;
}
</style>
</head>
<body>
<h1>Lorem Ipsum</h1>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>External CSS
An external style sheet specifies the style for multiple HTML pages. It can change the look of the whole website by changing just one file.
To use an external style sheet, add a <link> to it inside the <head> element of the HTML page. The href attribute points to the path of the .css file:
Example of the external CSS sheet:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Lorem Ipsum</h1>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>The linked styles.css file holds the rules. It can’t contain any HTML code and must be saved with a .css extension. For the page above, styles.css could look like this:
body {
background-color: yellow;
}
h1 {
font-size: 30px;
}
p {
font-size: 18px;
}CSS Fonts and Colors
The CSS font-family property defines the typeface of the text content.
The CSS font-size property defines the text size.
The CSS color property sets the color of the text itself. (Note that color is not a font property — it controls the foreground text color.)
The CSS background-color property sets the color behind the element.
Example of CSS fonts and colors:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
color: #008000;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 200%;
}
p {
color: #666666;
font-family: 'New Roman', serif;
font-size: 150%;
}
</style>
</head>
<body>
<h1>Lorem Ipsum</h1>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>CSS Border
The CSS border property sets values to all four sides of an element.
Example of the CSS border property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 2px dotted red;
}
</style>
</head>
<body>
<h1>Heading</h1>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>CSS Padding
The CSS padding property specifies padding (space) between the text and the border.
Example of the CSS padding property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 2px dashed #008022;
padding: 50px;
}
</style>
</head>
<body>
<h1>Heading</h1>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>CSS Margin
The CSS margin property creates space around the element.
Example of the CSS margin property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 2px dashed #090fce;
margin: 50px;
}
</style>
</head>
<body>
<h1>Heading</h1>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>The id Attribute
The id attribute targets a single, unique element. An id value must be unique within the page — no two elements may share the same id. In CSS you select it with a hash, for example #large-text.
Example of the id attribute:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#large-text {
border: 8px groove powderblue;
font-size: 24px;
padding: 20px;
}
</style>
</head>
<body>
<h1>Heading</h1>
<p id="large-text">
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>The Class Attribute
The class attribute is reusable: the same class can be applied to any number of elements, and a single element can carry several classes. This makes classes the right tool for styling a group of elements the same way. In CSS you select a class with a dot, for example .text.
Example of the class attribute:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.text {
border: 8px inset powderblue;
font-size: 20px;
padding: 10px;
}
</style>
</head>
<body>
<h1>Heading</h1>
<p class="text">
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<p class="text">
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>