etsu logo

CSCI 1210

Essentials of Web Development

Essentials of Web Design

CSCI 1210


CSS Colors

HTML Tables

CSS Colors


Defining Color

CSS includes several ways in which we can specify colors

Colors are important

We'll explore a few different ways

Then we'll talk a little about colors and how to integrate them with a website

Options for Specifying Color

Option 1 - Named Colors

There are 17 standard colors (by name)

Over time, we've added 140 additional named colors

AliceBlue, AntiqueWhite, Aqua, Aquamarine, Azure, Beige, Bisque, Black, BlanchedAlmond, Blue, BlueViolet, Brown, BurlyWood, CadetBlue, Chartreuse, Chocolate, Coral, CornflowerBlue, Cornsilk, Crimson, Cyan, DarkBlue, DarkCyan, DarkGoldenRod, DarkGray, DarkGrey, DarkGreen, DarkKhaki, DarkMagenta, DarkOliveGreen, DarkOrange, DarkOrchid, DarkRed, DarkSalmon, DarkSeaGreen, DarkSlateBlue, DarkSlateGray, DarkSlateGrey, DarkTurquoise, DarkViolet, DeepPink, DeepSkyBlue, DimGray, DimGrey, DodgerBlue, FireBrick, FloralWhite, ForestGreen, Fuchsia, Gainsboro, GhostWhite, Gold, GoldenRod, Gray, Grey, Green, GreenYellow, HoneyDew, HotPink, IndianRed, Indigo, Ivory, Khaki, Lavender, LavenderBlush, LawnGreen, LemonChiffon, LightBlue, LightCoral, LightCyan, LightGoldenRodYellow, LightGray, LightGrey, LightGreen, LightPink, LightSalmon, LightSeaGreen, LightSkyBlue, LightSlateGray, LightSlateGrey, LightSteelBlue, LightYellow, Lime, LimeGreen, Linen, Magenta, Maroon, MediumAquaMarine, MediumBlue, MediumOrchid, MediumPurple, MediumSeaGreen, MediumSlateBlue, MediumSpringGreen, MediumTurquoise, MediumVioletRed, MidnightBlue, MintCream, MistyRose, Moccasin, NavajoWhite, Navy, OldLace, Olive, OliveDrab, Orange, OrangeRed, Orchid, PaleGoldenRod, PaleGreen, PaleTurquoise, PaleVioletRed, PapayaWhip, PeachPuff, Peru, Pink, Plum, PowderBlue, Purple, RebeccaPurple, Red, RosyBrown, RoyalBlue, SaddleBrown, Salmon, SandyBrown, SeaGreen, SeaShell, Sienna, Silver, SkyBlue, SlateBlue, SlateGray, SlateGrey, Snow, SpringGreen, SteelBlue, Tan, Teal, Thistle, Tomato, Turquoise, Violet, Wheat, White, WhiteSmoke, Yellow, YellowGreen

Options for Specifying Color

Option1 - Named Colors - Rebecca Purple

Purple was the favorite color of Rebecca Alison Meyer who passed away twelve hours into her sixth birthday from brain cancer. Rebecca was the daughter of prolific CSS standards pioneer Eric Meyer. Eric kept his online colleagues informed of the battle his daughter and family were waging through blog posts and brief updates on Twitter

After hearing the awful news, designer/author Jeffrey Zeldman decided to do something and started a Twitter hashtag campaign. What started as a hashtag charity campaign evidently transformed into a much larger project. Given Eric’s prolific work on CSS, it was proposed that the hex-value #663399, a shade of purple, be aliased to “beccapurple”

When informed of the initiative, Eric had one request if the standards body were to adopt the proposal: call it “rebeccapurple” instead. Eric writes that “Rebecca informed us that she was about to be a big girl of six years old, and Becca was a baby name. Once she turned six, she wanted everyone (not just me) to call her Rebecca, not Becca”

Options for Specifying Color

Option 2 - Decimal (rgb)

Option 2 is to signify the decimal value that represents the color

The colors on the screen are comprised of some mixture of Red, Green, and Blue (RGB)

Each color (R,G,B) can have a value from 0 (no color applied) to 255 (full color intensity)

0-255 represents one byte of information

Options for Specifying Color

Option 2 - Decimal (rgb)

Express the RGB values in a comma delimited list

This would be accomplished by rgb(RED, GREEN, BLUE);

color: rgb(255, 0, 0);     /* this is red */

color: rgb(255,255,255);   /* this is white */

color: rgb(255,0,255);     /* this is purple */

Options for Specifying Color

Option 3 - Hexadecimal

screen shot

Options for Specifying Color

Option 3 - Hexadecimal

Hexadecimal expresses single digits numbers 0-9, A, B, C, D, E, F. These numbers would be equivalent to decimal numbers 0-15 (with F being equal to 15)

To represent the values 0-255, two hexadecimal digits are needed

screen shot

Options for Specifying Color

Option 3 - Hexadecimal

Black#000000
White#FFFFFF
Red#FF0000
Green#00FF00
Blue#0000FF
BlanchedAlmond#FFEBCD
DeepSkyBlue#00BFFF

Options for Specifying Color

Option 4 - RGBA

Very similar to option 2, however this allows us to identify the opacity of the object by setting the Alpha parameter. This ranges from 0.0 (fully transparent) to 1.0 (fully opaque)

This is supported in IE9+, Firefox 3+, Chrome, Safari, Opera 10+

rgba(RED, GREEN, BLUE, ALPHA);

color: rgba(255,0,0,0.3); /* red with opacity */

color: rgba(0,0,255,0.8); /* blue with opacity */

Colors

So to change the font color of a paragraph to white we could do the following:

p { color: white; }
 
p { color: #FFFFFF; }  /* or color: #ffffff; */
 
p { color: rgb(255,255,255); }
 
p { color: rgba(255,255,255,1); }

Choosing Colors

Choosing Colors

As we learned from our first homework assignment, poor choice of display colors can ruin an otherwise good web site, and potentially a visitor’s eyesight

All joking aside, a badly executed color scheme will encourage users to find other sites

Several online tools are available that can help a developer select an effective set of colors for a web site

Adobe Kuler

screen shot

Paletton

screen shot

IDs & Classes

Deceptively Important

ID Attribute

ids and classes can be written to apply a group of rules selectively to elements on a web page

An id can only be used once on a given web page

A class can be used multiple times on a web page

id and class names should start with a letter or an underscore (_), not a number or any other character

ID Attribute


id="idName"


This is a paragraph. It can be styled using the id attribute

#paragraph1 {
    background-color: #333333;     /* dark gray */
    color: #eeeeee;                /* light gray */
    font-style: italic;            /* italic text */
}

ID Attribute

screen shot

Class Attribute

Classes are similar to ids, with one important difference

A class applies a group of CSS rules to an element

A class can be used multiple times on a web page

Unlike an id, a class can be used one or many times on a given page

Class Attribute


class="className"


This is a paragraph. It can be styled using the class attribute

/* Definition */
.paragraph-dark {
    background-color: #333333;     /* dark gray */
    color: #eeeeee;                /* light gray */
    font-style: italic;            /* italic text */
}

Class Attribute

screen shot

CSS - The Box Model

...kind of a big thing

The Box Model

A very important concept in CSS

Applies only to block level elements

Each is regarded as a nested box with four parts:

Content

Padding

Border

Margin

The Box Model

Content: The space where the page's content is displayed

Padding: Space between a box's border and content. Adding padding can improve readability of the content. Default = 0

Border: Wraps around the padding and content. Doesn't include the margin. Default = 0

Margin: Area outside of the border. Can create a gap between adjacent boxes. Default = 0

The Box Model

By default, padding, border, and margin are 0

We can modify any or all of the three to modify the presentation of our content using CSS

This adds whitespace and enhances the display of an element

Borders should be used sparingly, as we've seen, but can emphasize important content

The Box Model

screen shot

The Box Model

screen shot

The Box Model

If two block-level elements are stacked one on top of the other, the distance will be whichever top or bottom margin is greatest

I.e., if the top box has a bottom margin of 25px and the bottom box has a top margin of 20px, the distance between them will be 25px

screen shot

The Box Model

So the box can be modified to visually separate one block of content from another, improving its presentation

Web design is about more than just writing code

Arranging content based on established best practices to make it attractive for visitors and thus likely to engage them in the future

The Box Model

Different ways...

/* Syntax */
/* all four sides */
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;

/* top/bottom, right/left */
padding: 10px 15px;

/* all around */
padding: 10px;

The Box Model

Combined

/* Syntax */
/* combined */
padding: 5px 15px 5px 25px;

Tables

oh! how they turn!

Tables

Historically, tables were often used in HTML for page layout and text alignment. CSS techniques now used for this

HTML tables should only be used for rendering data that belongs naturally in a grid. In other words where the data describe a number of objects that have the same properties

Tables should never be used for layout

Tables

screen shot

Tables

screen shot

Tables

<table>
    <tr>
        <td>Frodo</td><td>Samwise</td>
    </tr>
    <tr>
        <td>Merry</td><td>Pippin</td>
    </tr>
</table>

<table> defines the table

<tr> a table row

<td> 'table data' - a cell

Tables

screen shot

By default, tables scale to be just big enough to fit their content

Tables - Table Headings

<table>
    <tr>
        <th>Hobbit</th><th>Hobbit</th>
    </tr>
    <tr>
        <td>Frodo</td><td>Samwise</td>
    </tr>
    <tr>
        <td>Merry</td><td>Pippin</td>
    </tr>
</table>

Tables - Table Headings

screen shot

By default, table headings are displayed in bold and centered

Tables

Cells can be joined using rowspan (for vertical joining) and colspan (for horizontal joining) attribute on td tag

rowspan=“n” or colspan=“n”

n represents number of rows or columns to span across

<table>
    <tr>
        <th colspan='2'>Hobbit</th>
    </tr>
    <tr>
        <td>Frodo</td><td>Samwise</td>
    </tr>
    <tr>
        <td>Merry</td><td>Pippin</td>
    </tr>
</table>

Tables

screen shot

The first row spans two columns

(I added the borders for illustration)

Tables

screen shot

Tables

We can fix the width of tables’ columns by using standalone tags inside the table element in the HTML with inline CSS

<table>
    <col style='width:15%;'>
    <col style='width:55%;'>
    <col style='width:30%;'>
    
    <tr><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td></tr>
</table>

Tables Summary

The <table> element is used to add tables to a web page

A table is drawn out row by row. Each row is created with the <tr> element

Inside each row there are a number of cells represented by the <td> element (or <th> if it is a header)

You can make cells of a table span more than one row or column using the rowspan or colspan attributes

Questions?

Lecture Quiz

1. What HTML element do we use to include CSS styling in a web page

A. <link>

B. <script>

C. <style>

D. <src>

Lecture Quiz

2. What does rel mean?

A. reason

B. rationalization

C. relationship

D. reaction

Lecture Quiz

3. Which part of a CSS rule identifies what we want to change?

A. property

B. selector

C. value

D. class

Lecture Quiz

4. If we're using the rgb color notation, what is the highest value for one of the values?

A. 256

B. 128

C. 255

D. 200

Lecture Quiz

5. Hexidecimal notation is based on what number system?

A. Base 2

B. Base 8

C. Base 10

D. Base 16

Lecture Quiz

6. The alpha value for rgba notation can range from what to what?

A. 0.00 to 0.10

B. 0 to 1

C. 10 to 100

D. 0 to 10

Lecture Quiz

7. (true/false) An id attribute can be used multiple times on a given page

A. True

B. False

Lecture Quiz

8. Padding

A. adds space between an element's content and its border

B. adds space between an element's border and margin

C. adds space between an element's content and margin

D. adds space between adjacent block elements

Lecture Quiz

9. Tables

A. are rendered cell by cell

B. are rendered column by column

C. are rendered bottom to top

D. are rendered row by row

Lecture Quiz

10. To merge table cells together horizontally, we use which attribute?

A. colspan

B. spancol

C. hjoin

D. rowspan