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
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
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”
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
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 */
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
Black | #000000 |
White | #FFFFFF |
Red | #FF0000 |
Green | #00FF00 |
Blue | #0000FF |
BlanchedAlmond | #FFEBCD |
DeepSkyBlue | #00BFFF |
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 */
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); }
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
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="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 */
}
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="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 */
}
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
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
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
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
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
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;
Combined
/* Syntax */
/* combined */
padding: 5px 15px 5px 25px;
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
<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
By default, tables scale to be just big enough to fit their content
<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>
By default, table headings are displayed in bold and centered
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>
The first row spans two columns
(I added the borders for illustration)
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>
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
1. What HTML element do we use to include CSS styling in a web page
A. <link>
B. <script>
C. <style>
D. <src>
2. What does rel mean?
A. reason
B. rationalization
C. relationship
D. reaction
3. Which part of a CSS rule identifies what we want to change?
A. property
B. selector
C. value
D. class
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
5. Hexidecimal notation is based on what number system?
A. Base 2
B. Base 8
C. Base 10
D. Base 16
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
7. (true/false) An id attribute can be used multiple times on a given page
A. True
B. False
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
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
10. To merge table cells together horizontally, we use which attribute?
A. colspan
B. spancol
C. hjoin
D. rowspan