HTML CSS
HTML CSS
CSS stands for Cascading Style Sheets.
CSS saves a lot of work because it can control the layout of multiple web pages all at once.
CSS is used to define styles such as colors, fonts, sizes, spacing, and layout.
What is CSS?
Cascading Style Sheets (CSS) is used to format the layout of a web page.
With CSS, you can control the color, font, text size, spacing between elements, positioning, layout, background images, and background colors. CSS also allows different designs for different devices and screen sizes.
Tip: The word cascading means that styles applied to a parent element will also apply to its child elements, unless overridden.
Using CSS
CSS can be added to HTML documents in three ways.
- Inline – by using the
styleattribute inside HTML elements - Internal – by using a
<style>element in the<head>section - External – by using a
<link>element to link to an external CSS file
The most common way to add CSS is to use external style sheets, but inline and internal styles are easier to demonstrate.
Inline CSS
Inline CSS is used to apply a unique style to a single HTML element.
An inline style uses the style attribute of an HTML element.
<h1 style="color: blue;">A Blue Heading</h1> <p style="color: red;">A red paragraph.</p>
Internal CSS
Internal CSS is used to define styles for a single HTML page.
It is defined inside a <style> element in the <head> section.
<!DOCTYPE html> <html> <head> <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 is used to define styles for multiple HTML pages.
To use an external style sheet, link it in the <head> section of each page.
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
The external CSS file must be saved with a .css extension and must not contain HTML code.
body { background-color: powderblue; } h1 { color: blue; } p { color: red; } Tip: With an external style sheet, you can change the look of an entire website by editing one file.
CSS Colors, Fonts, and Sizes
Some commonly used CSS properties control text appearance.
<style> h1 { color: blue; font-family: Verdana; font-size: 300%; } p { color: red; font-family: Courier; font-size: 160%; } </style> CSS Border
The border property defines a border around an HTML element.
p { border: 2px solid powderblue; } CSS Padding
The padding property defines space between the content and the border.
p { border: 2px solid powderblue; padding: 30px; } CSS Margin
The margin property defines space outside the border.
p { border: 2px solid powderblue; margin: 50px; } Link to External CSS
External style sheets can be linked using absolute or relative paths.
<link rel="stylesheet" href="https://www.example.com/styles.css"> <link rel="stylesheet" href="/html/styles.css"> <link rel="stylesheet" href="styles.css">
Chapter Summary
- Use the
styleattribute for inline styling - Use the
<style>element for internal CSS - Use the
<link>element for external CSS - Use CSS properties for colors, fonts, sizes, spacing, and layout
Exercise
What is the correct syntax for linking to an external stylesheet?
<style rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css"> <a rel="stylesheet" href="styles.css">
HTML Style Tags
| Tag | Description |
|---|---|
<style> | Defines style information for an HTML document |
<link> | Defines a link between a document and an external resource |
Inline CSS Style