What is CSS?
CSS (Cascading Style Sheets) is a style sheet language that is used to style and layout web pages, such as changing the font, colour, size, and spacing of your content, splitting it into numerous columns, and adding animations and other decorative elements.
A cascading style sheet is made up of rules. A CSS rule is made up of one or more selectors and a semicolon-separated list of declarations inside brackets.
Example:
p {color: teal;}
p is called the selector
The information between the curly brackets { } is called the declaration
color is the property
teal is the value
Using CSS
CSS allows you to customise the look and feel of one or more web pages. You can target one, several, or all of the given items on a single page, or even all of the site's pages, swiftly and efficiently.
CSS can be added to HTML documents in 3 ways:
Inline - by using the style attribute inside HTML elements
Internal - by using a element in the <head> section
External - by using a element to link to an external CSS file
Inline CSS
The first is to use an inline style, where we apply directly to individual elements with the style attribute.
The text colour of the <h1> element is blue, and the text colour of the <p> element is red in the following example:
<h1 style=“color:blue;”>A Blue Heading</h1>
<p style=“color:red;”>A red paragraph.</p>
Internal CSS
Internal CSS is defined within a element in the <head> section of an HTML page.
The example below changes the text colour of ALL <h1> elements on that page to blue
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
External CSS
Many HTML pages rely on an external style sheet to establish their look.
Add a link to an external style sheet in the section of each HTML page to use it:
<!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>
Any text editor can be used to create the external style sheet. The file must be saved with a.css extension and must not contain any HTML code.
This is how the "styles.css" file appears:
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
External style sheets are the most efficient way to use CSS on a website (it's easier to maintain track of and implement a site's style from a dedicated CSS file), whereas internal style sheets and inline style can be utilised on a case-by-case basis when individual style modifications are needed.
Top comments (0)