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:
I am purple.
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.
Learn More CSS
CSS is a very powerful language these days, but we’ve only just scratched the surface. If you want to dig deeper into CSS, you should check out the wide world of HTML and CSS training.
There are some great providers of online CSS training and tutorials, like Treehouse and Codecademy. There are also plenty of great books on CSS, from CSS3 Foundations to CSS for Babies.
See all HTML and CSS training recommendations…
Meanwhile in the next two tutorials, you’ll find out how to further enhance HTML and CSS by adding JavaScript and PHP.
Disclosure of Material Connection: Some of the links in the post above are “affiliate links.” This means if you click on the link and purchase the item, I will receive an affiliate commission. Regardless, I only recommend products or services I use personally and believe will add value to my readers.
