CSS allows for the styling and layout of web pages, enabling control over aspects such as text color and size, font styles, spacing between elements, positioning, and layout. It also facilitates the use of background images or colors, and enables tailored displays for various devices and screen sizes, among other features.
| Tip: The term “cascading” indicates that a style assigned to a parent element will also be inherited by all child elements within it. Therefore, if you designate the color of the body text as “blue,” all headings, paragraphs, and other text elements within the body will similarly adopt that color (unless otherwise specified)! |
There are three methods to incorporate CSS into HTML documents:
While the most common practice is to maintain styles in separate, external CSS files, this tutorial will focus on inline and internal styles for simplicity and to facilitate hands-on learning.
Inline CSS is employed to assign a specific style to an individual HTML element.
This approach utilizes the style attribute within an HTML tag.
In the example below, the color of the text within the <h1> tag is changed to blue, while the text within the <p> tag is altered to red:
|
<h1 style=”color:blue;”>A Blue Heading</h1> <p style=”color:red;”>A red paragraph.</p> |
Internal CSS is utilized to establish styling rules for a specific HTML document.
Such CSS rules are placed within a style element located in the <head> section of the HTML document.
In the provided example, the styling directives set the text color of every <h1> element on the page to blue and every <p> element to red. Moreover, the background color of the entire page is set to “powderblue”.
|
<!DOCTYPE html> |
An external stylesheet is employed to apply consistent styling across multiple HTML documents.
To integrate an external stylesheet, a link to it is inserted within the <head> section of each HTML document.
| <!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> |
You can create an external stylesheet using any text editor. Ensure the file is purely composed of CSS code, without any HTML elements, and is saved with the “.css” file extension
Below is an example of what the content in a “styles.css” file might resemble:
body {
|
| Tip: Using an external style sheet allows you to alter the appearance of an entire website by modifying just one file! |
In this section, we’ll introduce a few widely utilized CSS properties, which we’ll explore in greater detail later on.
The color property in CSS specifies the color of the text.
The font-family‘ property in CSS determines the font style to be applied.
The font-size property in CSS sets the size of the text.
| <!DOCTYPE html> <html> <head> <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> |
The ‘border‘ property in CSS is used to create a border surrounding an HTML element.
Note: Almost every HTML element can have a border defined for it.
| p { border: 2px solid powderblue; } |
The padding property in CSS is utilized to create space between the text and its surrounding border.
Utilizing CSS border and padding properties:
| p { border: 2px solid powderblue; padding: 30px; } |
The margin property in CSS specifies the space outside an element’s border.
Utilizing CSS border and margin properties:
| p { border: 2px solid powderblue; margin: 50px; } |
External stylesheets can be linked using either a complete URL or a path that is relative to the current webpage.
Using CSS border and margin properties:
| <link rel=”stylesheet” href=”https://www.w3schools.com/html/styles.css”> |
| <link rel=”stylesheet” href=”/html/styles.css”> |
| <link rel=”stylesheet” href=”styles.css”> |
The <style> tag is used to specify styling details for an HTML document, while the <link> tag is used to establish a connection between the document and an external resource.
