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
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?
<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?
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.
Let's turn to fonts next.
Which of the following is not a font property?
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
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:
4. A or B
6. C but could also use F, since it doesn't start with "font-"
Here's a solution to the jsfiddle on cascading CSS:
jsfiddle on cascading CSS, solution
Here's the code for the fonts exercise: