HTML Styles - CSS
CSS stands for Cascading Style Sheets. It saves a lot of work because it can control the layout of many web pages at once. CSS handles styles and colors, lets you manipulate text, and style boxes and more.
What is CSS?
CSS is used to format the layout of a web page. With it you can control color, font, text size, the spacing between elements, how elements are positioned, background images and colors, different layouts for different screen sizes, and much more.
Tip: "Cascading" means a style set on a parent element also applies to its children. So if you set the body text color to blue, headings and paragraphs inside the body become blue too, unless you say otherwise.
Using CSS
CSS can be added to HTML in three ways: inline, using the style attribute on an element; internal, using a <style> element in the <head>; and external, using a <link> element to point to a separate CSS file.
The most common way is an external file, but this tutorial uses inline and internal styles because they are easier to demonstrate and try out.
Inline CSS
Inline CSS applies a unique style to a single element using that element's style attribute.
Example
A blue heading and a red paragraph styled inline.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline Css</title>
</head>
<body>
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
</body>
</html>
Internal CSS
Internal CSS defines the style for one whole page. It goes in the <head> inside a <style> element, and applies to every matching element on that page.
Example
A page styled with an internal <style> block.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
External CSS
An external style sheet defines the style for many pages. You link to it from the <head> of each page with a <link> element. The file holds only CSS (no HTML) and is saved with a .css extension.
Tip: With an external style sheet, you can change the look of a whole website by editing one file.
Example
A page that links to an external styles.css file.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
styles.css
What the external styles.css file looks like.
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
CSS Colors, Fonts and Sizes
Some common CSS properties: color sets the text color, font-family sets the font, and font-size sets the text size.
Example
A page using color, font-family, and font-size.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS Border
The CSS border property draws a border around an element. You can put a border on nearly any element.
Example
A paragraph with a border.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
p {
border: 2px solid powderblue;
}
</style>
</head>
<body>
<p>This is a paragraph with a border.</p>
</body>
</html>
CSS Padding
The CSS padding property adds space between the text and the border.
Example
A paragraph with a border and padding.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
p {
border: 2px solid powderblue;
padding: 30px;
}
</style>
</head>
<body>
<p>This is a paragraph with border and padding.</p>
</body>
</html>
CSS Margin
The CSS margin property adds space outside the border.
Example
A paragraph with a border and margin.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
p {
border: 2px solid powderblue;
margin: 50px;
}
</style>
</head>
<body>
<p>This is a paragraph with border and margin.</p>
</body>
</html>
Link to External CSS
You can link to an external style sheet with a full URL, or with a path relative to the current page or domain.
Full URL
Linking with a full web address.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://prompt-cookbook.com">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Relative to domain
Linking to a file in the html folder of the current site.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/html/styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Same folder
Linking to a file in the same folder as the page.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Chapter Summary
To recap: use the style attribute for inline styling, the <style> element for internal CSS, and the <link> element for external CSS, both placed in the <head>. Common CSS properties include color for text color, font-family for fonts, font-size for text size, border for borders, padding for space inside the border, and margin for space outside it.
HTML Style Tags
The two related tags are <style>, which defines style information for a document, and <link>, which defines a link between a document and an external resource.