We'll start by re-viewing URLs.
By the end of today, you will be able to:
The goal of CSS is to take over all the formatting of a website, which used to be done with now-obsolete HTML tags like <center>. Modern websites are formatted using CSS, so that the same content (HTML) might be rendered different ways depending on the device (laptop, notebook, phone) and the CSS rules.
<center>
A tour de force example of that is csszengarden.com, in which the same content is rendered in shockingly different ways. We'll take a few minutes to view a few examples and look at the source. If you use Firefox to view it, you can easily turn off the CSS and see what it looks like plain.
Next time, we'll learn about selecting elements with ID and CLASS, and adding background images.
In short, if you find yourself wanting to change the appearance of your page by changing the HTML, you're thinking about it the wrong way. On the other hand, we will sometime have to modify the HTML in order to provide the containers and hooks to allow the CSS to work, including classes and IDs.
The basics of CSS are:
If all of the following are specifying the same property value for an element, which one wins?
external style file
document level style tag
inline style attribute
It's up to the user
Why should we use external style files?
an external style file can apply to all the pages of a site
an external style file gives you one place to specify a rule
an external style file reduces redundancy
all of the above
In addition, an external style file can be cached by a browser, which can speed up the loading of subsequent pages (though this can be a hassle during development).
How do we specify an external style file?
<style src="mystyle.css">
<link rel="stylesheet" href="mystyle.css">
<a rel="stylesheet" href="mystyle.css">
<external rel="stylesheet" src="mystyle.css">
How do we specify a set of document-level CSS rules?
<style> </style>
<style type="text/css"> </style>
<link rel="stylesheet"> </link>
<document> </document>
How do we specify an inline rule to make an emphasis tag be bold?
This is <em style="font-weight: bold">really</em> important.
This is <em class="font-weight: bold">really</em> important.
This is <em class="font-style: bold">really</em> important.
This is <em style="font-style: bold">really</em> important.
Using this jsfiddle on cascading CSS, which has an external CSS file, do the following steps. Note that you can type your CSS into the box at the upper right; that's the same as typing it into a <style> element.
<style>
Let's turn to fonts next.
Which of the following is not a font property?
style
weight
height
family
size
color
Fonts can be difficult to work with because
They have to be on your computer
They have to be on the user's computer
They have to be on the server
All of the above
Start up a new jsfiddle and put in some HTML for a demo sentence, like this:
The quick brown fox jumps over the lazy dog.
(or any other text you like). Feel free to copy/paste that sentence. Then:
fantasy
You're encouraged to use jsfiddle.net for your own experiments. It's really nice to be able to play around with stuff. There's no need to save if you just want to test something!
If we have extra time, try to use a Google Font in the jsfiddle!
We hope that after these activities you have a good understanding of:
Will be posted later, visit again after .
Answers to quiz questions:
1. C 2. D 3. B 4. A or B 5. A 6. C but could also use F, since it doesn't start with "font-" 7. B
Here's a solution to the jsfiddle on cascading CSS: jsfiddle on cascading CSS, solution
Here's the code for the fonts exercise:
p { font-family: fantasy; font-size: 24px; font-weight: bold; font-style: italic; color: green; }