CSS Overview

This is a short introduction to writing HTML. You should review the page source, particularly focusing on how this HTML page is written and how it is rendered on the screen. For more information, please refer to "Programming the World Wide Web" by Robert W. Sebesta book and W3 Web Schools
(Please tell me if you find any errors or omissions in the document —Upsorn Praphamontripong, 30-January-2021)

What is CSS?

CSS (Cascading Style Sheet) is a style sheet language that let you style the html elements on your web page. It is embedded inside html but it is not html itself.

Note: if the web browser does not recognize any specific tags, formats, or settings, the browser will render the content based on its default styles.

Why CSS

Define how to display html elements

Can we format/style the document using html?

Separating visual presentation (CSS) from document structure (HTML) increases readability and maintaintability: (i) enable changes to one or the other and (ii) enable style to be reused across sets of elements.

How to use CSS

Three levels of style sheets

Inline

Specify the style property in the opening tag of the particular html element

Format

style="property_1:value_1; property_2:value_2; ...; 
       property_n:value_n;"

Example:

<h1 style="color:red; text-decoration: underline;">CSS Examples</h1>
   ...
<font size=-1; color="red">
   Specify the style property in 
   the opening tag of the particular html element
</font>

Document-level

Specify the style specifications in the document head section and apply to the entire body of the document

Format

<head>
   ...  
   <style> 
      rule list 
   </style> 
   ... 
</head>

External-level

Write the style specifications in a separated file with the type .css. Example: main-style.css

Link to .css file in the header of the html document

<head>
   ...  
   <link rel="stylesheet" type="text/css" 
         href="http://www.cs.virginia.edu/~up3f/cs4640/styles/main-style.css" />  
   ... 
</head>

Pros and Cons?

How to define CSS

Rule structure

Rules control how sets of boxes and their contents are presented.

Selector: a pattern used to select the element(s) to be styled
Declaration: Description indicating how selected elements should be styled

Example:

p { font-family: Arial; }

Selector: select and apply the style to all <p> elements
Declaration: use Arial font family

Types of selectors

Element (Simple selector or type selector): Apply to a particular element name or a list of element names separated by commas
Example:
```
h1 { property-value list }
h2, h3 { property-value list } 
```
Apply these properties to all <h1>
Id selectors: Allow the application of a style to one specific element (apply to the element with the given id).
- Each element can have only one id
- Each page can have only one element with that id. Thus, a separate rule must be written for each element.
- Use when there is a single element on the page that will take the style.
Example:
```
#intro {
   color: green;
   font-size: 0.8em;
}  
```
Usage:
```
<p id="intro">
   This is a short introduction to writing CSS.
   Please feel free to compare page source with the screen.
</p>
```

Class selectors: Allow different occurrences of the same element to use different style specifications
Example:

p.normal {property-value list}
p.warning {property-value list}

Usage:

<p class="normal">
   A paragraph of text that we want to be presented 
   in normal presentation style
</p>
        
<p class="warning">
   A paragraph of text that is a warning to the reader,
   which should be presented in an especially noticeable style
</p>

Generic class selectors: Can be applied to the content of more than one kind of element (defined without an element name, begins with a period)
- Multiple elements can use the same class
- A given element can have multiple classes assocaited to it
- Use to consistently style multiple elements throughout the page (or site). Classes are useful when there are multiple elements that shares the same style.
Example:
```
.sale {property-value list} 
```
Usage:
```
<h3 class="sale"> Weekend Sale </h3>
   ...
<p class="sale">
   ...
</p>  
```

Pseudo class: Specify that certain styles apply when something happens, rather than the target element simply exists. Examples of pseudo classes

:active     /* elements activated by user. For mouse clicks, occurs between mouse down and mouse up. */
:checked    /* radio, checkbox, option elements that are checked by user */
:disabled   /* elements that cannot receive focus */
:focus      /* element that currently has the focus */
:hover      /* elements that are currently hovered over by mouse */
:link       /* link element that has not yet been visited */
:visited    /* link element that has been visited */

Usage:

a:link {         /* unvisited link */
   color: red;   /* text color */
}
a:visited {      /* visited link */ 
   color: blue;
}
a:hover {        /* mouse over link */ 
   color: green;
}
a:active {       /* current link */ 
   color: purple;
}
a:focus {        /* focused link */
   color: purple; 
}
        
/* group selectors */
a:hover, a:active, a:focus {
   background-color: yellow; 
}

Some common properties

Each property can have one or more comma separated values

Color: specifies text color

color: red;             /* specified by name */  
color: #ff0000;         /* specified by hexadecimal value */
color: rgb(255, 0, 0);  /* specified

Usage:

body {  
   color: red;    
}

Background color: specifies background color

background-color: black;   
background-color: #000000;   
background-color: rgb(0, 0, 0);

Usage:

body {  
   background-color: yellow;    
} 
table {
  background-color:#000080;     /* navy */
}

Font family: specifies the font family of the text

font-family: Arial, Helvetica, Futura

Usage:

body {
   font-family: Arial, sans-serif;
}

Font size: specifies the size of the font

font-size: 14px;    /* absolute size: pixels */
font-size: 1.2em;   /* relative size: 1.2 times or 120% of the current font size in pixels */
font-size: 75%;     /* relative size: 75% of the current font size in pixels */
font-size: larger;  /* relative size: adjust the font size relative to the font size of the parent element */

Font style: specifies the font style
```
font-style: italic; 
```

Font weight: specifies the degree of boldness

font-weight: bold;

Usage:

h2 {
   font-family: 'Time New Roman';
   font-size: 2em;
   font-style: italic;
   font-weight: bold;
}

Font shorthand: specifies multiple property value in the font property

font: property-value-list

Usage:

h2 {
   font: 'Time New Roman' 2em italic bold;
}

Text decoration: specifies some special features of text

text-decoration: line-through;
text-decoration: overline;
text-decoration: underline;
text-decoration: none;

Usage:

p.delete {
   text-decoration: line-through;
}
p.cap {
   text-decoration: overline;
}
p.attention {
   text-decoration: underline;
}

Text indent: indent the first line of a paragraph

p.indent {
   text-indent: 2em; 
}
...
<p class="indent">
   A homework exercise is not only an important contributor
   to what you learn in a class, but is often an important
   part of your grade as well. From a student's point of view, 
   homework is usually the first time the information
   from the course is used, and thus is a very valuable
   early feedback mechanism that helps the student
   prepare for exams.          
</p>

Text align: arrange text horizontally

text-align: left;
text-align: center; 
text-align: right;
text-align: justify;

Usage:

p {
   text-align: right; 
}

Float: specify that text should flow around some element, often an image or a table
```
float: left; 
float: right;
float: none;   
```
Usage:
```
img {
   float: right; 
}  
```

Padding: generate space around content

padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
padding: 50px 30px 50px 80px;     /* specify space of top, right, bottom, left padding */ 
padding: 50px 30px 50px;          /* specify space of top, right, bottom padding */
padding: 50px 30px;               /* specify space of top, right padding */
padding: 50px;                    /* specify space of all four paddings */

Usage:

p.special {
   padding: 25px 50px 75px 25px;
}

Border: specify the style, width, and color of an element's border

border-style: specify the kind of border to display
border-width: specify the width of the four borders
border-color: specify the color of the four borders

border-style: dotted;                    
border-style: dashed;                    
border-style: solid;
border-style: double; 
border-style: groove;
border-style: ridge;
border-style: inset; 
border-style: outset;
border-style: none; 
border-style: hidden;
border-style: dotted dashed solid double;   /* combine multiple styles */
        
border-width: 5px;
border-width: medium;
border-width: 2px 10px 4px 20px         /* specify width of top, right, bottom, left borders */
        
border-color: red;
border-color: red green blue yellow;    /* specify color of top, right, bottom, left borders */

Usage:

p.special {
   border-style: solid;
   border-width: thick;
   border-color: red;
}
p.special2 {
   border: 3px dotted #0088dd;
}

Box properties

Boxes, by default, are sized just large enough to fit their contents
Sizes can be specified using px or % (% values are relative to the container dimensions)
Margin can be specified in clockwise order ([top][right][bottom][left])
Border can include [width][style][color].

Centering content

Steps to center an element inside a container:

Must first ensure that element is narrower than container
- By default,element will expand to fill entire container
- Thus, the width of an element must be explicitly set
Use auto value for left and right to create equal gaps

Example

.centered {
   width: 300px;
   margin: 10px auto 10px auto;      /* auto set margin for right and left */
   border: 2px solid #0088dd;
}

Visibility and layout

To force elements to be inline or block element

display: inline;
display: block;

To cause element to not be laid out or take up any space (very useful for content that is dynamically added or removed)

display: none;

To cause boxes to be invisible, but still take up space

visibility: hidden;

Example

<ul>
   <li>Home</li>
   <li>Products</li>
   <li class="coming-soon">Services</li>
   <li>About</li>
   <li>Contact</li>
</ul>

li {
   display: inline; 
   margin-right: 10px; 
}
li.coming-soon {
   display: none; 
}

This produces

Home  Products  About  Contact

li {
   display: inline; 
   margin-right: 10px; 
}
li.coming-soon {
   visibility: hidden; 
}

This produces

Home  Products            About  Contact

Positioning schemes

Five schemes:

Normal flow (default)
Relative positioning
Absolute positioning
Fixed positioning
Float positioning

images showing styles for different positioning

Stacking elements

source: images showing stacking (z-index and opacity)

images showing stacking (z-index and opacity)

Transform

A transformation is an effect that lets an element change shape, size and position.

imges showing transformation

Transitions

Transitions cause the property values to be changed smoothly (from one value to another), over a given duration.

imges showing transition

Hover over the div element below, to see the transition effect.

Transition

Additional styling

<span> tag: specify style/presentation for a particular part of text

<style type="text/css">
   .spanred {
      font-size: 1.5em;
      color: red; 
      font-weight: bold;
   }
</style>
...
<p>
   Homework is due <span class="spanred">before class</span> on the day it is due. 
</p>

Homework is due before class on the day it is due.

<div> tag: specify style/presentation for a section/division of a document

<style type="text/css">
   .primary {
      font-size: 1.5em;
      color: purple; 
      font-weight: bold;
   }
</style>        
...
<p>This is some text.</p>
<div class="primary">
      <h3>This is a heading in a div element</h3>
      <p>This is some text in a div element.</p>
</div>
<p>This is some text.</p>

This is some text.

This is a heading in a div element

This is some text in a div element.

This is some text.

Conflict Resolution

Multiple styles may be defined for the same property of a selector. Cascade rules are used to determine which styles will be applied.

  /* cstyle.css – an external style sheet for use with cascade.html */
   p { font-size: 0.8em; }

<!doctype html>
<!-- cascade.html -->
<html lang ="en">
   <head>
      <title> Style sheet levels </title>
      ...
      <link rel="stylesheet" type="text/css" href="cstyle.css" />
      
    <style type="text/css">
            p.docstyle { font-size: 1.2em; }
    </style>   </head>
   <body>        
      <p>
         Now is the time
      </p>
      <p class="docstyle">
         for all good men
      </p>
          <p class="docstyle" style="font-size:1.6em">
       to come to the aid
    </p>   </body>
</html>

Cascade rules

Id is more specific than class; class is more specific than element
The longer the selector, the more specific it is
The more specific rule wins
If style rules are equally specific, the last one wins

#id1 #id2 h1 {color: red; }  
#id1 #id2 h1 {color: green; }     /* winner */
#id1 h1 {color: blue; }

More examples

Assignment	Due
Assignment 6	04/12
Assignment 7	05/01

"Advice on submitting homework," by Professor Jeff Offutt. Although the professor will usually make an honest attempt to grade the homework completely objectively and solely on the basis of content, unfortunately, most homeworks require some judgement to evaluate. This means that the presentation of your homework can have a significant impact on the amount of time needed to grade, and ultimately, on your grade that you receive. Thus it is to your advantage, as well as your professor's, for you to do your best to make your homework not only correct, but easy to grade.