While we use HTML to build the structure of our website, we use CSS to control how the website looks. If building a web page was like building a house, HTML would be the structure and foundation, CSS would be the paint and finishings, and JavaScript would be the appliances.
When the web was first invented, the basic HTML code did everything; there was no CSS, and there was no JavaScript. If you wanted a word to appear blue on the web page, then the color "blue" was hard-coded into the page. For example:
<font color="blue">This is some text!</font>
This worked fine at first, but soon web pages became more complex, and websites had hundreds, maybe even thousands of pages.
Returning to each page to change the particular color of a word became a difficult chore. Not only that, but Including the code that controlled the appearance, or style, of the content on every single page also increased the size of the web page.
With these considerations in mind, CSS was developed. CSS stands for Cascading Style Sheets. CSS was first proposed by Håkon Wium Lie on October 10, 1994.
Rather than including all the rules for the appearance of a web page on the page itself, these new style rules could be written in a separate style sheet. From a coding point of view, this has tremendous advantages: If your web site has a thousand pages, but each page references the same style sheet, the browser only has to load the style sheet once. As a result, web pages could now load faster.
Not only did web pages load faster, but since all the pages in the site reference the same style sheet, the overall appearance of the of the website was much more consistent.
The newly developed Cascading Style Sheets also offered a huge advantage for maintaining, or updating, a website. If a developer decided to change the color of a <h1> heading tag from sky blue, to navy blue, they only had to change the rule in the style sheet for the <h1> tag, and instantly all thousand pages would be updated.
Finally, CSS offers real portability for your favorite styles. One of the factors in the widespread adaption of frameworks like Bootstrap comes from the ease of adding Bootstrap to your website: just link to the Bootstrap style sheet, and your site can incorporate the responsive styles that are a big part of Bootstrap.
You may be wondering, but what about the "Cascading" part of "Cascading Style Sheets"? The term "Cascading" means that a rule assigned to a parent element is passed down to the child element.
In the last module, you learned about the relationship between parent and child elements. Let us take an example. Perhaps I want all the text on my web page about gardening to be "green", rather than the default color of "black." Recall that the <body> element holds all the visible content on the web page. If I assign a text color of "green" to the <body> element, then all the elements inside the <body> element inherit the text color of "green." This is the "cascading" part.
<html>
<head>
<style>
body { color:green; }
</style>
<title>My Gardening Webpage</title>
</head>
<body>
<h1>The page is all about gardening</h1>
<p>This is some text!</p>
</body>
</html>
In practice, this means that we can quickly come up with a general color scheme for our website. With the "cascading" property of CSS, we do not have to specifically assign every element the color properties we want for our site.
What happens when we want to diverge away from our color scheme? In our example, we want the figure captions for our photos to have the typical black text color. This is not a problem. We break the cascading chain of colors as soon as we create specific rule for an element.
For all its power and flexibility, CSS is really pretty simple. There are just two parts to any CSS rule: the selector, and the declaration block.
We use the selector to target an element on the web page. If I want to target the <body>, or body element, then I will use the "body" selector.
The declaration block then lists the property we want to change, and the value. So, if I want all the text on my gardening page to be green, then I would use this CSS rule:
body { color:green; }
That seems pretty easy! This rule states that all the text inside the <body> of my website will be green. This rule will apply to paragraphs, headings, just about anything that has text.
If I want a figure caption to be black, then I would add this rule:
figcaption { color: black; }
So far, all the CSS selectors we have been working with are HTML tags. Tags are fundamental HTML elements. We do not make tags, they already exist. In fact, tags are the oldest part of web pages. Recall that tags are the "markup" part of HTML, or “Hyper Text Markup Language”.
If we have a simple web page made up only of a few basic HTML tags, this might be sufficient to do all the styling. But in practice this is much too limited for website design, so IDs and classes were added HTML and CSS. While there are a limited, fixed number of different tags available in HTML5, there are no limits to the number of IDs and classes you can create.
So unlike tags, IDs and classes need to be created. There are no per-existing IDs or classes. One of the reasons that we are using the Bootstrap 3 framework is because Bootstrap includes a number of very useful CSS classes. But these classes come to us courtesy of Bootstrap, and are not included in a basic web page. And we will need to specifically add the Bootstrap 3 classes to our web pages by linking to the Bootstrap CSS file..
IDs and classes are very important to web design. We are going to be using CSS IDs and Classes over and over again. Now, to me, IDs and Classes sound like two entirely different things. One would not’t think that they have a thing in common.
However, as it turns out, IDs and classes are practically identical with one major difference: a class can be used as many times as you like on a web page, over and over again, but an ID can be used only once.
For example, I have a bunch of boxes here that I want to use for my navigation. I want the color of the text for all these boxes to be red. If I make all the boxes a member of the same class, let’s call it the ‘nav’ class, and give the ‘nav’ class a text color of red, then as long as these boxes are members of the ‘nav’ class, they will all have the same red color text.
However I want one box to be unique, with bold text, and clicking on this box will take the visitor to a special sale, so I give this box an ID of “special.” This box will be used only once on the entire page.
So how do I actually write this in HTML code? For the boxes that are all members of the “nav” class, we write the code ‘class=”nav”’.
For the box that we want to have an ID of “special”, we write ‘id=”special”’.
Now everything that we have been talking about so far is taking place on the web page, the HTML document. This HTML document has all the elements for my web page, and I have used Classes and IDs to label these different elements.
We are going to take full advantage of CSS, and we will write all the rules fro these different classes and IDs in a separate CSS file.
For a small, single page website, you could write the rules on the same page.
This is what these style rules would look like in code
<style>
.nav { color:red; }
#special { font-weight:bold; }
</style>
Notice that my nav class rule starts with a ‘period', and my special id rule starts with a 'hash', or pound sign (#). We did not have to do this for our h1 tag rule.
Class definitions always start with a (.), or ‘period’.
ID definitions always start with a ‘#’ or ‘pound’ sign.
You might be wondering, can the same element be a member of both the ‘nav’ class, and also be ‘special’? Why, yes it can, and we would write that on the HTML web page like this:
class=”nav” id=”special”
And you have already probably figured out that the text would be both red, and bold, since it would combine both properties together.
Well, if classes and IDs are practically identical, and if we can use classes as many as we want on a web page, and use an ID only once on a page, then why on earth would we ever use an ID?
Well, as you may have guessed, IDs do have one special quality that Classes do not have!
We can use IDs as links on a web page.
And let me explain why this is. Consider every link you have ever clicked on since you started surfing the web. If you think about it, each click was a one-way flight from where you were, to your destination. And each time you arrive at a specific destination.
Clicking on a link does not take you to three places at the same time, it takes you to just once place. So IDs are perfect for using as links.
Have a look at the Bootstrap 3 component page:
http://getbootstrap.com/components/
There is a lot of information on the page, but I want to go directly to the section on input groups. Is there any way I can create a link that goes directly to the input group section?
As it turns out, the input group section has an ID of id=”input-group” and I can use this ID as a web link:
http://getbootstrap.com/components/#input-groups
By adding the ID after the web address, I am taken directly to the input group section. You cannot do the same thing with classes!. This is a special property of IDs.
When we build our site, we give the main section an ID of id=”section.” And we give our footer an ID of id=”footer.” So we can jump directly to the footer, or to the main section, on any of our pages by just adding the ID after the web link.
So the footer of the media.html page is “media/#footer”. Or the link to the main section of the home page is “index/#section”. Our home page has the special name of “index.”
As you might recall, there are three key components to a modern website: HTML, CSS and JavaScript. The structure of the website is in the HTML file, typically written as myWebPage.html. The appearance rules are in the CSS file, typically written as style.css.
If you look at both files, they are really quite different. However, both the HTML and CSS files have something in common: the CSS Selectors. You can think of CSS Selectors as the chain that links the CSS and HTML together.
If I have a <h1> element on my web page, and I want to specify a certain appearance of this <h1> element, then my CSS file will also have "h1".
If I have several navigation buttons on my site, members of the nav class, and I want to specify a certain appearance of this nav class, then my CSS file will also have ".nav".
If I have a special button on my site, with an ID of special, and I want to specify a certain appearance of this special ID, then my CSS file will also have "#special".
| Name | HTML Example | CSS | Description |
|---|---|---|---|
| tag | <h1> | h1 | Fundamental HTML code. |
| class | <span class="nav"> | .nav | Can be used multiple times on a web page. |
| ID | <div id="special"> | #special | Can only be used once on a web page |
As you can imagine, there can be conflicts, as when two style rules may require an element to appear two different ways. Broadly speaking, CSS rules declare that the more specific the rule, then the higher priority it will have when displaying, or rendering the page. And the last rule loaded, or the rule closest to the target element, takes priority.
If we were in charge of a car assembly line, we might say that all the cars produced today will be the color blue, but we also have a special order, and we want the first car to be red. As a general rule, all the cars will be blue. But we are making a special rule for the first car, to be painted blue. Making a specific rule for the first car takes priority over the more general rule that all cars should be painted red. CSS rules work the same way. When we create a rule to target a specific element, that rule will take priority.
Imagine you are walking to class, and asking for directions, one person says “turn left” and another person says “turn right.” Which way will you go? You will probably turn right, since that was the last thing you heard.
In the case of CSS, the last rule received takes priority over earlier rules. And we take advantage of this property of cascading style sheets when we build our Bootstrap 3 websites. Bootstrap has a lot of really great CSS rules that make our websites look modern and elegant. But sometimes we want to style our website differently. That is why we have our custom style sheet, styles.css, load after bootstrap.css. The rule loaded last takes priority.
There are three places to store your CSS Rules:
| Type | Description | Priority |
|---|---|---|
| inline | CSS styles are stored next to the web code they are effecting | 1 |
| internal | CSS styles are stored on the web page | 2 |
| external | CSS styles are stored in a separate file. This is the desired method for websites with more than one page. | 3 |
For the website you will be building, your CSS rules will be written and saved in an custom, external style sheet you will create called "styles.css." This is typical of a modern website. This provides the most flexibility and re-usability for your CSS. For example, you may have a set of favorite CSS rules you use over and over again. By saving these rules in an external style sheet, you can add these rules to any site you are building by simply including a reference to your favorite style sheet. The Bootstrap 3 style rules for our site are stored in an external style sheet as well.
If you have a very simple, limited website, then you can save all your styles in the <head> section of your website. This is called an internal style sheet. But just as soon as you add a second page to your site, you will need to save your rules in an external style sheet.
The final place to write a style rule is inline. This basically means that the style rule is written just before the element you want to style.
While inline style rules are generally discouraged, they can be helpful in some circumstances. As you might recall from the section just before this, we have a proximity rule for setting the priority of style rules. Rules written in external style sheets take the lowest priority, Rules written in internal style sheet take higher priority, because they are on the same web page as the actual web code they are styling. But inline styles always take top priority, because they are as close to the code as possible.
Wayne Joness
West Los Angeles College, cs952
Fall