CSS

Cascading Style Sheets

(Important homework at the bottom of this page)

CSS stands for Cascading Style Sheets, and is a code that describes how to display HTML.

As we already know, 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.



appl

This CSS homework is 25% of your final OCP-B score.

On your desktop, create a folder named MyWebSite to save the files that you are going to be developing during this homework. Click on the image below, download the ZIP file and follow the tutorial.

Notify your instructor to review your finished website, compress your final “MyWebSite” folder, rename the ZIP file with Your Name/MyWebSite and send it to your instructor via mail to be graded.

ebook-logo  CSS – e-book Instructions

shipping_boxes
CSS – Files to download

 


General Learning Sources:
Mastering CSS:
References/Docs:
Glossary:
Standards/Specifications:
Architecting CSS:
Authoring/Architecting Conventions:
HTML/CSS Newsletters:

next lesson