CSS stands for cascading style sheets. These are used to style a webpage, as they define how HTML elements are displayed.
The styling of a document can be placed:
- as an internal stylesheet (in the
<head>tags) - as an external stylesheet
- inline – or inside an HTML element (like
<font size="1">)
However, inline styling is not recommended. Most of the codes used are deprecated (meaning they are outdated and considered ‘incorrect’ coding). Also, it is much easier to use CSS.
CSS Syntax
CSS syntax consists of three parts:
- selector
- property
- value
The three parts are expressed in such a manner:
selector {
property: value
}
This is the neater way to set things out and makes things a lot easier to read. However some people choose not to move to the next line, but rather to just leave a space.
The selector is the HTML element you wish to define. The property is the attribute you wish to change. Here is an example:
p {
color: #000000
}
The CSS above would mean that any text you <p>put in a paragraph</p> would be black.
If you want to define more properties, you must separate them with a semicolon like so:
p {
color: #000000;
font-family: arial;
}
If a value has multiple words, you must quote it:
p {
color: #000000;
font-family: "times new roman";
}
Grouping
Grouping can be used. If you want to make paragraph text and header 1 text black and in the font Times New Roman, you would separate the selectors with commas like so:
p, h1 {
color: #000000;
font-family: "times new roman";
}
That is just some of the basics of understanding CSS. Move along to learn about classes and ids. Though this isn’t required to be able to use CSS, it’s something that will help you style a lot easier.
Subscribe to Heartdrops