Styling HTML with CSS
- CSS stands for Cascading Style Sheets.
- CSS is used to describe how HTML elements are displayed on screen, paper, or in other media.
- CSS can control the layout of multiple web pages all at once. It saves a lot of work.
CSS can be added to HTML elements in 3 ways:
- Inline - by using the style attribute in HTML elements.
- Internal - by using a <style> element in the <head> section.
- External - by using an external CSS file.
The most common way to add CSS, is to keep the styles in separate CSS files.
Inline CSS
- An inline CSS is used to apply a unique style to a single HTML element.
- An inline CSS uses the style attribute of an HTML element.
- This example sets the text color of the <h1> element to red.
Example
<html>
<body>
<h1 style="color:red;">This is a Red Heading</h1>
</body>
</html>
Try it »
Internal CSS
- An internal CSS is used to define a style for a single HTML page.
- An internal CSS is defined in the <head> section of an HTML page, within a <style> element.
Example
<html>
<head>
<style>
</style>
</head>
<body>
<h1>This is a Red Heading</h1>
</body>
</html>
Try it »
External CSS
- An external style sheet is used to define the style for many HTML pages.
- With an external style sheet, you can change the look of an entire web site, by changing one file!
- To use an external style sheet, add a link to it in the <head> section of the HTML page:
Example
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a Red Heading</h1>
</body>
</html>
Try it »
An external style sheet is written in any text editor. The file must not contain any HTML code, and must be saved with a .css extension.
Below is the structure of styles.css-
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
CSS Fonts
- The CSS color property defines the text color to be used.
- The CSS font-family property defines the font to be used.
- The CSS font-size property defines the text size to be used.
Example
<html>
<body>
<h1>This is a Red Heading</h1>
</body>
</html>
Try it »
CSS Border
The CSS border property defines a border around an HTML element.
Example
<html>
<body>
<h1>This is a Heading</h1>
</body>
</html>
Try it »
CSS Padding
The CSS padding property defines a padding (space) between the text and the border.
Example
<html>
<body>
<h1>This is a Heading</h1>
</body>
</html>
Try it »
CSS Margin
The CSS margin property defines a margin (space) outside the border.
Example
<html>
<body>
<h1>This is a Heading</h1>
</body>
</html>
Try it »
The id Attribute
To define a specific style for one special element, add an id attribute to the element.
Example
<html>
<body>
<p>This is a paragraph</p>
</body>
</html>
Note: - The id of an element should be unique within a page, so the id selector is used to select one unique element!
The class Attribute
To define a style for special types of elements, add a class attribute to the element.
Syntax: <p class="error">I am different</p>
Example
<html>
<body>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</body>
</html>