CSS
2 minute read
(C)ascading (S)tyle (S) heets
CSS is language that adds style to web pages. It can dictate basic things like text color all the way up to web page page and background images. This is not programming. it is not markup. It is style sheet language.
CSS language data is held in a file that is seperate from the HTML file. You reference the CSS file from the HTML file. So using the standard file and folder structure of a website, as below, the CSS languagea data is written to a file named style.css in the folder named `styles´.
root
| index.html
|
|___|images
| | image1.png
| | image2.png
|
|___|styles
| | style.css
|
|___|scripts
| | script.js
To reference the style.css from the web code you link it in the <head>tag.
<html>
<head>
<link rel="stylesheet" href"style.css">
<\head>
Basic CSS file
This example CSS style will set the font color to red for all paragraph elements.
p {
color: red;
}
Reference a CSS file from HTML
To reference a CSS file from HTML you insert a <link ref> to the style.css file into the <HEAD> section of the HTML file.
<link href="styles/style.css" rel="stylesheet" />
Breakdown of a CSS element
This is called a ruleset.
Selector
_|_
p {
color: red;
|_______||_____|
Property Value
|______________|
Declaration
}
selector is the HTML element that is to be styled. In the example above, the HTML element in target it the <p></p>
property/value is the way in which you style the element. In the example above, the <p></p> HTML element can be styled with a color property of red
Styling multiple properties
You can style multiple elements in one ruleset at the same time. You seperate each style value with a new line ending with a semi colon.
p {
color: red;
width: 500px;
border: 1px solid black;
}
Styling multiple elements
You can style multiple elements using the same ruleset. You seperate each element with a new line ending with a comma.
p,
li,
h1 {
color: red;
}