CSS stands for Cascading Style Sheets, and is a code that describes how to display HTML.
In the previous HTML tutorial, we told you that the HTML <strong> tag makes text bold, and the <em> tag makes text italic. Well, not really. HTML doesn’t actually make text bold or italic – it only suggests that text should be bold or italic. It’s actually CSS that delivers the instruction.
CSS can deliver many different instructions for how to display HTML. Telling the browser to find all the <strong> elements and make them bold, or to find all the <em> elements and make them italic are just two examples.
Here’s what CSS code looks like.
strong {
font-weight: bold;
}
em {
font-style: italic;
}
h1 {
font-size: 32px;
}CSS Rules
Looking at the above example, you can see that a CSS rule is made up of three parts: a selector, a property and a value.
The text outside of the curly brackets is called the selector. It’s simply the name of the HTML tag, without the < and >. The selector indicates which HTML element the below styles are to be applied to.
The text on the left side of the colon is called the property. This the type of style being applied; for example, font weight, font style or font size.
The text on the right side of the colon is called the value, and is the style that’s being applied. Some values use certain units – for example, font sizes are written in terms of pixels (px).
Inline CSS
Web browsers have default CSS styles for displaying HTML – for example, instructing text inside <strong> tags to display as bold, or text inside <h1> tags to be 32 pixel font.
However, each website adds its own custom CSS as well. One way websites do this is by embedding their CSS style right inside its corresponding HTML tag, using an HTML attribute. For example, to display a <strong> element in purple, here is the code that would be used:
<strong style="color: purple;">I am purple.</strong>The result is:
Notice that there’s the word style (the attribute), followed by an equals sign, followed by a set of quotation marks that contain the CSS code. Also notice that there is no selector, because it’s already clear which element is being targeted.
Internal CSS
Inline CSS is uncommon, because it slows down page loading time. A more common method is to gather all the CSS styles together and place them within <style> HTML tags. This is called an internal style sheet.
<style>
h1 {
color: red;
}
h2 {
color: black;
}
</style>The <style> element belongs in the <head> of a web page, along with the title, description and other informational elements. An internal style sheet can contain as many CSS rules as the page needs, for as many different HTML elements as the page has.
External CSS
There is a third way websites add CSS, and that is writing it in a separate file. The benefit of this is that they can link the same CSS file to multiple pages on their site. This is the method that the majority of websites use.
When CSS is written in an external file, it needs to be linked up with the main HTML. To do this, websites use the following HTML tag:
<link rel="stylesheet" href="style.css">The rel="stylesheet" attribute indicates that it’s a style sheet that’s being linked to. The href attribute specifies the file name of the style sheet – in this case style.css. Notice that there is no closing tag.
