Notes
advertisement
Day 5: CSS Text
For today's class, we will use internal style sheets (even though this is not a good way to do
it in general, it makes it easy to make changes in both the CSS and the HTML without
flipping back and forth between files). Once you have the CSS working, you can (and
should) extract it to a separate file.
CSS: Units of measure
Symbol
Name
Type
Description
px
pt
em
pixels
points
ems
absolute
absolute
relative
%
percent
relative
One dot on the monitor.
1 point is 1/72 of an inch
1 em is equal to the font size of the browser default
font.
Relative to the current value of the browser default
font.
You are not allowed to put a space between the number and the symbol. For example, 20 pt
is incorrect. You must write 20pt.
Selectors
Every CSS rule is made up of two parts: the selector and the declarations. There are many
options for specifying the selector.
Tag Selectors
This is what we did yesterday. Tag selectors simply use HTML tags like <html>, <body>,
<h1>, <p>, etc. When you use a tag for a selector, the formatting rules apply to every
element in the document with the given tag.
Example
h1 {
color: red;
font-family:Verdana, sans-serif;
}
Document1
1
February 9, 2016
Class selectors
A Class selector will specify the format for all of the elements that are in a given class. The
Class selector in the CSS must be preceded by a period. Class names are case-sensitive!
Example
Create a new HTML document called Page0501.htm with the following for the body.
<p class="center">George Washington</p>
<p>John Adams</p>
Create a <styles> element in the <head>. Add the following:
.center {text-align:center;}
Note that this requires that you define some elements in your HTML document with the
class value center, as we have done for the George Washington paragraph above. Also note
that NetBeans appears to give a bogus error message.
Preview your HTML file in the browser.
ID selectors
You can also specify that only a single HTML element be formatted in a given way by
assigning an ID to that element. The ID selector in the CSS must be preceded by a pound
sign.
Example
Note that if you use the id attribute, all IDs must be unique. Save your HTML file as
Page0502-IDSelector.htm. Now add the following to the second paragraph tag of your HTML
file:
<p id="intro">John Adams</p>
Add the following to your styles.
#intro {font-size:1.5em;}
This will cause the paragraph labeled intro to be 1.5 times as big as it would normally be.
However, only one HTML element may have an ID with the value intro. If you want to have
multiple paragraphs formatted in this way, you will have to use the class attribute and
assign all of them to the same class. NOTE: The ID attribute is used more often for
bookmarks than for styling.
Document1
2
February 9, 2016
Groups of tags
Group Selectors
Sometimes you may want several elements/tags to share the same formatting, like this:
h1
h2
h3
h4
h5
{color:blue;}
{color:blue;}
{color:blue;}
{color:blue;}
{color:blue;}
Instead of writing the five lines of rules above, you can combine them, like this:
h1, h2, h3, h4, h5 {color:blue;}
Don't forget the commas! If you forget them, you are saying to apply the rule to an h5
element that is inside of an h4 element that is inside of an h3 element that is inside of an
h2 element that is inside of an h1 element!
The Universal Selector
If you want every element in your HTML file to have the same rule(s), you can use the
universal selector: *. If you use * for the selector, then the rule that follows it will be
applied to every element in the document.
Example
Add this rule to your style element.
* {font-family:Verdana, sans-serif;}
NOTE: It appears that any rule with the "*" selector overrides any other rule! Every other
rule inherits from the universal selector and cannot be overridden! So this limits its use
quite a bit! A better way to apply a rule to everything in your HTML would be to use html or
body as the selector. More about this when we get to inheritance.
Document1
3
February 9, 2016
Pseudo-Classes
Pseudo-classes for links
There are four pseudo-classes that let you format links depending on how the user has
interacted with that link:
a:link. Selects any link that has not yet been visited, and does not have the mouse
hovering over it.
a:visited. Selects any link that has been visited.
a:hover. Selects the link that the mouse is currently hovering over.
a:active. Selects the link that the user is clicking on (as it is being clicked).
Example
Add the following to your styles element.
a:link {color:green;}
a:visited {color:cornflowerblue;}
a:hover {color:fuchsia;}
a:active {color:blue;}
Add the following after the h2 element in your HTML. Save your HTML file.
<a href=http://www.google.com>Google</a>
Clear your browser's history so it will show Google as an unvisited site.
Click on the menu button on the top right.
Click on History.
Click on Clear all browsing data.
Click on Clear browsing history, Clear download history, and Empty the cache.
Click on the drop-down arrow and click on the beginning of time.
Click on the Clear browsing data button.
Close the Settings tab.
Preview your HTML file. The link should be green until you hover over it, then it should turn
to fuchsia. When you click on it, it should turn blue, and then after you've visited it, it
should turn cornflower blue.
Document1
4
February 9, 2016
Styling Paragraphs
First-Letter and First-Line pseudo-elements
:first-letter. A pseudo-element that selects the first letter of an element.
:first-line. A pseudo-element that selects the first line of an element.
Add the following rule to your styles element.
Example
p:first-child:first-letter
{font-size: 150%; color:red;}
Preview your file in the browser. Note that there is no paragraph that is the first child of
another element, so nothing is changed.
Add the following to the first line of the body of your HTML file:
<h1>Welcome to Internet Programming!</h1>
Then in the <style> rules, change the p selector to h1. Note that there is an h1 element
that is the first child of another element, so it will make the "W" in the word "Welcome" red
and 50% larger than the rest of the text.
Preview it in the browser.
Document1
5
February 9, 2016
Descendant Selectors
An HTML document can be looked at as a tree. Consider the following HTML.
<body>
<h1>Heading 1</h1>
<p>This is <em>important</em></p>
</body>
This corresponds to the following tree:
body
h1
p
em
CSS looks at an HTML document as a tree, and identifies the following relationships:
Ancestor. A tag that encloses another tag is an ancestor of the inner tag. In the
previous example, body is an ancestor of h1, p, and em, and p is an ancestor of em.
Descendant. A tag that is enclosed by another tag is a descendant of that tag. In
the previous example, h1, p, and em are descendants of body, and em is a
descendant of p.
Parent. A parent is the closest ancestor.
Child. A child is the closest descendant(s). Note that an element may have only one
parent, but a parent may have many children.
Sibling. Tags that are descendants of the same parent are siblings.
Descendant selectors allow you to format elements only when they appear within certain
other elements. Creating a rule for descendants involves creating a selector that consists of
a tag followed by a descendant.
Example
Add the following two lines to the top of the body of your HTML document.
<h1>Welcome to the <em>Computer Science Department</em></h1>
<h2>A Course on <em>Web Programming</em></h2>
Add the following rule to your styles element.
h1 em {color:red;}
This will make any em text that is in an h1 heading red, but leave all other em text (such as
the em in h2) untouched.
Document1
6
February 9, 2016
Classes and Descendants
You can also use classes and descendants. The following tag says to make all hyperlinks
within the center class appear orange. Add it to your styles.
.center a {color: orange;}
Then add the following hyperlink to the "George Washington" paragraph.
<p class="center">George Washington<a href="http://www.yahoo.com"> Yahoo!</a></p>
Child Selectors
Children are the first-level descendants of an element. To set the format for the children of
an element, give the parent tag, followed by the greater-than sign (>), followed by the child
tag, followed by the formatting information.
Example
Add the following rule to your styles element
h1>b {color: pink;}
This rule will cause all <b> elements that are children of <h1> elements to be pink. A <b>
element that is a child of a paragraph element will not be pink, though.
Then change the first two lines of your HTML file to this:
<h1>Welcome to the <em>Computer <b>Science</b> Department</em></h1>
<h1>A Course on <b>Web <em>Programming</em></b></h1>
The first h1 element has an <em> child but not a <b> child (<b> is a descendant). So it
should not appear pink.
The second h1 element has a <b> child ("Web Programming"), so it should appear pink.
:first-child Selector
The :first-child selector selects an element only if it is a first child of another element.
Example
Add the following to your styles element.
p:first-child {color:purple;}
Modify the body of your document by enclosing the two paragraphs in a <div>.
<div>
<p class="center">George Washington<a href="http://www.yahoo.com">Yahoo!</a></p>
<p id="intro">John Adams</p>
</div>
Save the file and preview the file in the browser. Since the Washington paragraph (<p>) is
the first child of the <div> element, it will appear in purple.
Document1
7
February 9, 2016
:last-child Selector
The :last-child selector selects an element only if it is the last child of another element.
Example
Add the following to your styles element.
p:last-child {color:chocolate;}
Preview your file in the browser. John Adams should be orange since it is the last child of
the <div> element. But it's not! This is because there is also an id rule for this paragraph
that sets its color to green! And an id rule is more specific than a :last-child rule, so the
:last-child rule is ignored. To fix this, comment out the id rule for #intro, save your file, and
preview it again. This time it should work.
Nth-child, first-of-type, last-of-type, and nth-of-type, siblings, and not will be covered later.
CSS Combined Selectors, Attribute Selectors
You can have the same styles for multiple HTML elements by separating the selectors with
commas:
h1, h2, h3 {color: maroon;}
You can also set the style for an element with a specific attribute. For all elements that have
an href attribute:
*[href] {color:aqua;}
For just <a> elements that have an href attribute:
a[href] {color:aqua;}
Note that these do not appear to work in our file, but this is because of inheritance rules.
Create a new file (Page0502.html) and add the following to the body of the HTML file:
<a href="http://www.google.com">Google</a>
Then add the *[href] rule above and preview the file in the browser. It should work now.
Document1
8
February 9, 2016
Inheritance
Inheritance is the process by which nested tags inherit some of the CSS properties of their
ancestors. Inheritance saves a lot of time/code when creating styles.
For example, if you change the font for the <body> tag, everything inside of the <body>
tag will inherit that font. If they didn't inherit the font from the <body>, you would have to
set a rule for every tag on the page!
NOTE: It appears that everything inherits from the universal selector and it cannot be
overridden!
Example
Continue to use our original HTML file (Page0501.html). Modify the body rule in your styles
element.
body {font-family: "comic sans ms";}
This should change the font for the body to Comic Sans MS.
Preview it in the browser. It does not change the body to Comic Sans MS! This is because
we still have the universal selector setting the font to Verdana!
Delete the rule for the universal selector.
* {font-family:Verdana, sans-serif;}
Preview your file in the browser again. Note that everything in the body is now in the Comic
Sans MS format, even the <em> and <b> elements in the <h1> elements.
Now add another rule in your styles element.
p {font-family: "Garamond";}
Preview it in the browser.
Since the <p> tag is more specific than the <body> tag, its formatting rules override the
formatting rules of the <body> tag.
Note that the order of the rules in the styles element is irrelevant. That is, the <p> rule
could come before or after the <body> rule and the rules would still be applied the same
way. What matters is the order of the elements in the HTML. Since <p> is more specific
than <body>, any rules for <p> will override any rules for <body>.
The only time that the order of the rules matters is if you have two rules that set the same
property. For example:
p {font-family:"Verdana";}
p {font-family: "Garamond";}
will cause the Garamond font to be applied to paragraphs.
But this:
p {font-family: "Garamond";}
p {font-family:"Verdana";}
Document1
9
February 9, 2016
will cause the Verdana font to be applied to paragraphs.
Not all CSS properties are inherited. Consider what would happen, for example, if the
border property were inherited. Then every element would have a border around it!
Example
Add the following rule to your CSS.
h1 {border: thick solid red;}
This will put a thick solid red border around all <h1> elements. However, there are <b>
and <em> elements nested inside of the <h1> elements. They do not get their own thick
solid red borders!
If you want to see what this would look like, add the following to your CSS.
em {border: thick solid red;}
b {border: thick solid red;}
Preview the file in your browser. It's ugly!
Remove the above two lines.
Example
If you want to make everything on a page twice as big as it would normally appear, add this
to your styles tag:
body {font-size: 200%; }
Document1
10
February 9, 2016
How Styles Cascade
Some examples of inheritance can be found here.
1. Inherited styles accumulate
Example
Create a new HTML file called Page0503CascadingRules.htm and create a styles section with
the following.
body {font-family: Verdana, sans-serif;}
p {color:red;}
strong {font-size:24px;}
Any paragraphs will be Verdana and red.
Any strong elements will be Verdana, red, and 24px.
Add the following in the body:
<h1> Lincoln</h1>
<p>Four score and <strong> seven </strong> years ago...</p>
2. Nearest ancestor wins
Example
Modify the body rule:
body {font-family: Verdana, sans-serif; color:green;}
strong {font-size:24px; color:blue;}
All body text will be green, unless there is a nearer ancestor with a different color rule.
Preview it in your browser.
3. The directly applied style wins
A style applied to a specific tag will overrule any inherited rule. In the current example, all
<strong> elements are blue because the color blue is directly applied to the <strong>
element.
4. One tag may have many styles applied to it
If a tag also has a class assigned to it, it will inherit both the tag style rules and the class
style rules.
If the same style names appear more than once in a style sheet, all of the rules accumulate.
If a tag has both a class and an ID assigned to it, it will inherit from both the class and the
ID .
If a style name appears in both an external style sheet and an internal style sheet, the rules
are combined.
Document1
11
February 9, 2016
Rules for applying style sheets
It is legal for web users to create their own style sheets that will override the styles for the
web pages they visit. Such files are called user style sheets. In Chrome, the user style sheet
goes in Users/xxxx/AppData/Local/Google/Chrome/User Data/Default/User
Stylesheets/Custom.css where xxxx is your user name.
Open the Custom.css file in Notepad and add these rules:
a {color:red !important;}
body {color:green !important;}
Save the file and re-start Chrome.
Then check some of the following web sites: www.drudgereport.com. www.briarcliff.edu.
www.nytimes.com.
The !important part of the rule tells the browser that this rule is more important than any
other rule that affects the same tag. Note that the text !important must be inside of the
semicolon! Note: I have had mixed success with this.
If rules conflict, the following cascade order (priority rules) are used:
1. !important rules in a user style sheet.
2. !important rules in a web page.
3. Normal rules in a web page.
4. Normal rules in a user style sheet.
5. Default rules in the web browser.
If more than one rule at the same level is applied to the same element, the rule with the
highest specificity is used. If the specificity is the same, the most recent rule is used (refers
to the order in which the rules were read). Note that it is possible to specify more than one
style sheet for a web page.
Specificity of selectors
1. An ID is the most specific.
2. A class, attribute selector, or pseudo-class selector is next.
3. An element or pseudo-element is the least specific.
Document1
12
February 9, 2016
Formatting Text
font-family
There
are five generic font families:
serif (e.g. "Times New Roman", Garamond)
sans-serif (e.g. Verdana, Arial, Helvetica)
monospace (e.g. "Courier New", "Lucida Console")
cursive (e.g. "Lucida Handwriting")
fantasy (e.g. Impact)
Sans-serif is usually preferred for computer displays.
To set the font, use the font-family property.
Web Fonts
Font File Types
EOT. Embedded Open Type. Only works on IE.
TTF and OTF. True Type and Open Type. Most common font format. Supported by
Windows and Mac.
WOFF. Web Open Font Format. Compressed versions of Open Type fonts made for
the web.
Google Web Fonts
Google has many web fonts available at www.google.com/webfonts.
Go to their site and select a font to use.
Click on the Quick Use button.
Scroll down to "Add this code to your website."
Copy the code to the header of your HTML document.
Add a style rule to use that font for the body. For example:
body {font-family: Bonbon, sans-serif;}
Preview your file in the browser.
color
Use the color property to set the color of text. Text can be colored in any one of four ways:
1. Use a 6-digit hex code. Red is: #FF0000.
2. Use the rgb function. There are two ways to call it:
Use percentages: rgb(100%, 0, 0)
Use byte values: rgb(255, 0, 0)
Document1
13
February 9, 2016
3. You can also use rgba and specify an alpha value. The alpha value controls the
transparency of the text. 0 is totally transparent (invisible), and 1 is totally opaque (nothing
shows through).
4. Use the hsl (and hsla) functions. H=hue, S=saturation, and L=lightness (or luminence).
5. Use a name. There are 147 named colors available.
font-size
Font size can be specified as either absolute or relative.
Example
body
{
font-size: 75%;
margin-left: 2em;
}
h1
{
font-size: 100px;
margin-bottom: 0;
}
body
{
font-family: Verdana, Arial, sans-serif;
font-size:12pt;
}
a
{
font-size:200%;
}
Note that for font-family we listed multiple fonts. If the first one is not available, it will look
for the second one. If the second one is not available, it will look for the third one, etc. Use
one of the five generic font family names for the last name in the list.
font-style
Choices are:
font-style: normal
font-style: italic
font-style: oblique (appears to be same as italic)
font-weight
Choices are:
font-weight:
font-weight:
font-weight:
font-weight:
font-weight:
font-weight:
Document1
bold
bolder
light
lighter
100
normal
14
February 9, 2016
When using a number, use any number from 100 to 900 that is a multiple of 100. 400 is
normal.
font-variant
Choices are:
font-variant: normal;
font-variant: small-caps;
line-height
Choices can be absolute or relative:
line-height: 12pt;
line-height: 150%;
line-height: 1.5em;
line-height: 1.5;
The last three examples above all do the same thing.
The font shortcut
Syntax is:
font: [style] [weight] [variant] size family;
Note that size and family are required (no square brackets) and are always the last two
items.
Example
a {font: italic bold 200% Verdana}
text-indent
The text-indent property controls the indentation level of the first line. Measurements may
be relative or absolute.
Example
p {text-indent: 50px}
text-align
Determines horizontal alignment of text. Choices are:
text-align: left
text-align: center
text-align: right
text-align: justify
Example
p {text-align: justify}
Text Alignment: Vertical
We will skip this.
Document1
15
February 9, 2016
text-transform: Capitalization
To control capitalization. Choices are:
text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;
text-transform: none;
text-decoration
This is used to control adding lines to the text or to make it blink (use blink sparingly).
Choices are:
text-decoration:overline;
text-decoration:line-through;
text-decoration:underline;
text-decoration:blink;
text-decoration:none;
Example
<head>
<style>
h1 {text-decoration:overline; text-transform:uppercase;}
h2 {text-decoration:line-through; text-transform:lowercase;}
h3 {text-decoration:underline; text-transform:capitalize;}
h4 {text-decoration:blink; text-transform:none}
</style>
</head>
<body>
<h1>George Washington. All upper-case, line over.</h1>
<h2>John Adams. All lower-case, line through.</h2>
<h3>Thomas Jefferson. Capitalized, line under.</h3>
<h4>James Madison.</h4>
</body>
text-shadow
Before CSS3, if you wanted a shadow, you needed to use an image. The text-shadow
property has four parameters (in order): horizontal offset, vertical offset, blur radius, and
shadow color.
Example
h1 {text-shadow: -2px -2px 4px red;}
Try playing with the arguments and see how the shadow is affected. To get multiple
shadows, simply add a comma after the color and repeat the four arguments.
h1 {text-shadow: -5px -5px 3px red, 5px 5px 3px red;}
Note that the corners look funny. To fix this, you need shadows in all 4 directions!
Document1
16
February 9, 2016
Styling backgrounds
CSS properties used for background effects:
1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position
Example
body
{
background-color:silver;
background-image:url('http://www.w3schools.com/css/img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
Document1
17
February 9, 2016
