Cascading Style Sheets

CS174

Chris Pollett

Sep 14, 2020

Outline

Finish Form Elements
Cascading Style Sheets
Style Levels
Quiz
Basic Styles
Selectors
Pseudo-Classes
Colors, Fonts, etc
List properties, Images...

Introduction

We have been going over the different possible tag elements that can be used in an HTML documents.
We finished talking about the table tag and had started going over forms in HTML and the tags that can occur within forms.
Recall forms are one mechanism by which a user can send data from a client to a server for processing.
We discussed different kinds of input tags such as text, checkbox, radio, password, etc. and has just started looking at the select tag.
Let's resume our discussion by looking at this tag again.

select tags

<textarea>

This tag can be used to specify a multi-line region for text entry:

<textarea name="life" rows="3" cols="40" >
You can enter your life story here.
</textarea>

Stylesheets

We now return to talking about XHTML, in particular, how to control the presentation of XHTML documents with stylesheets.
Stylesheets are used to specify the look of the page and its elements.
For instance, one can globally control things like margins, indentation, etc.
They can be used to support the idea of separating structure of content from how it is presented.
Cascading Style Sheets (CSS) are the standard way to do this for XHTML documents.
CSS comes in four specs: CSS1, CSS2 (2.1 became a recommendation), CSS3, CSS4 each adding more features to the last.
Most modern browsers support CSS1, most CSS2.1, and some of CSS3 and CSS 4.
Beginning with CSS 3, new features are split into modules of different "levels". A module is level 3, if it depends on CSS 2.1, and level 4 (i.e., part of CSS4) if it depends on a level 3 module. For example, there is both a CSS Level 3 Selector Module and a CSS Level 4 Selector Module.
CanIUse.com is a good website for seeing what browsers support which more sophisticated feature.
The basic concept in a stylesheet is that of the value of a property that a tag has.
Cascading refers to how settings of this value in high level stylesheets can be overrriden in lower level style sheets.

Levels of Style Sheets

We introduced Cascading Stylesheets (CSS) as a means of controlling the presentation of a web page, and we discussed the various spec's that define CSS.
The word cascading is used because styles affecting the presentation properties of a tag can be applied at different levels with the nearest-to-the-tag set level values overriding those set farther away.
So what are the levels of stylesheets?
inline
sets property value for single tag. For example,
```
<p style="color:red;">red paragraph</p>
```
document
sets property value for the whole document

external
sets property value for several documents till value is changed.
If no style information is available for a given property the browser will use a default value.
It is often useful to use the same stylesheet for several documents. The MIME type for stylesheets is text/css. You can link a stylesheet file into an xhtml file with a line like:
```
<link rel="stylesheet" type="text/css" href="mystyles.css" />
```
Styles can be validated at the W3C site.

Quiz

Which of the following statements is true?

A shortcut icon for a web page can be specified with a syntax like:

<link rel="icon"   
    href="http://www.cs.sjsu.edu/faculty/pollett/favicon.ico" />

To add an image to an HTML document we can use an <image> tag.
The Web Accessibility Initiative guidelines encourage the use of tables for layout purposes.

Basics of Styles

The basic inline style command looks like:

<tag style="property_1: value1 ; property2: value2; ..." >

The basic document level style in the head of the document looks like
```
<style >
    /* here is a comment */
	rule_list
</style>
```

Each rule has the format

selector {property_1: value1 ; property2: value2; ...}

External style sheets are similar to document level styles except you don't need the style tags.

Examples of Simple Selectors

h1 {font-size: 24pt;} /* would apply to all h1 tags in the document */

h2, h3 {font-size: 14pt;} /* notice applies to both h2 and h3 tags */

You can also specify that styles should only apply to elements in certain positions within the file:

body b i {font-size: 30pt;} /* only for bolded italic'd text within body of HTML*/

Class selectors

A class is defined in a style element by putting a period with a name after it:
```
p.normal {prop_list1}
p.narrow {prop_list2}
```
To use we do:
```
<p class="normal">normal look text</p>
```
One can also have generic selectors:
```
.red {color:red}
```

These can be used with multiple tags

<h3 class="red"></h3> <p class="red"></p>

ID Selectors

In a similar way to class selectors, one can use a "#" to specify an id selector
```
p#sec1 {prop_list2}
```
To use this we do:
```
<p id="sec1">section1 text</p>
```
Although only one id attribute (for instance, sec1) of a given value can appear in a document, such a selector may occur in an external style and thus be applied to id tags with that name in several documents.
For instance, one might specify p#abstract. A typical document has only one abstract but you could use the same style for several documents.

Reset Styles, !important

So far, we have learned that for a given property of a tag, inline style values for that property override document-level style values override external style values override browser defaults.
Because browser defaults used to be somewhat variable, web-designers sometimes use an external stylesheet called a reset stylesheet to set the property values of all the tags to some value they knew (usually 0). They then apply a later stylesheet to achieve the styles they wanted for the particular app.
You can override the cascading-style effect by using !important. For example, color: red !important;, the !important keyword will prevent lower-level stylesheets from changing this value -- you should avoid using this, but in debugging other people's styles you might run into it.

Pseudo Classes

Pseudo selectors allow you to apply styles in the case that certain events happen.
For example, link (unvisited link), visited (visited link), hover and focus.

These might appear in code as:

input:hover {color:red} /* input tag will turn red when mouse over. */
input:focus {color:green} /* when click into 
   input field, it will turn green */

Pseudo selectors also allow you to apply styles if certain conditions are met:

<style">
div:first-child b
{
   color:blue
}
div:before
{
    content:"The following div tag has something to tell you: ";
} 
</style>
<div>
<div>
<b>I'm blue</b>
</div>
<div>
<b>But I'm not</b>
</div>
</div>

Other pseudo-selectors are: :link, :visited, :active, :first-letter, :first-line, :after, :lang(locale-tag), :not(some-class-name)

What values can a property have?

CSS1 supports over 60 properties for tags (the next few slides will discuss these).
First, though, the values one can assign a property can take one of several forms:
Predefined values:

For example, bold, red, disc. These are case insensitive

Signed Number values:

-17, 17em /*1 em =height of letter m */, 17ex, 17mm, 17px, 17cm, 17pt These may or may not have a unit after them.

Percentage values:
75%

URL values:

For example: url(mypic.jpg)

Color values:
These can be predefined as for example the keyword white Or you can specify rgb values in one of two formats:
```
  rgb(0, 0, 0) /*decimal */
  #C8C8C8 /*hex */
```