css foundations, pt 1
DESCRIPTION
http://shawncalvert.com/webdesign-1 Web Design 1 Columbia College ChicagoTRANSCRIPT
![Page 1: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/1.jpg)
22-3375 Web Design I // Columbia College Chicago
CSS Foundations, pt 1
![Page 2: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/2.jpg)
For Starters
!
!
Post assignment and blog post
Review student blog posts
Instructor review of Assign 3
HTML refresher exercise
!
!
![Page 3: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/3.jpg)
Skills learned so far
Code a basic webpage from scratch
how to mark up different types of content with appropriate HTML tags
how to use basic HTML attributes to create links and web images
how to set up a site domain, server host and install a wordpress site
how to create a web directory and link between files
![Page 4: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/4.jpg)
![Page 5: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/5.jpg)
![Page 6: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/6.jpg)
![Page 7: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/7.jpg)
![Page 8: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/8.jpg)
![Page 9: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/9.jpg)
![Page 10: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/10.jpg)
![Page 11: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/11.jpg)
![Page 12: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/12.jpg)
Three layers of web design: Structure, Style, Behavior
![Page 13: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/13.jpg)
Three layers of web design
![Page 14: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/14.jpg)
Three layers of web design
![Page 15: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/15.jpg)
Three layers of web design
![Page 16: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/16.jpg)
Three layers of web design
STRUCTURE
HTML markup
Site planning
PRESENTATION
CSS
Imagery
BEHAVIOR
Javascript
![Page 17: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/17.jpg)
What is CSS?
![Page 18: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/18.jpg)
Cascading+
Style Sheet
![Page 19: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/19.jpg)
A stylesheet is a set of rules defining how an html element will be “presented” in the browser.
These rules are targeted to specific elements in the html document.
Stylesheet
![Page 20: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/20.jpg)
The concept is very similar to how you create stylesheets in InDesign.
![Page 21: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/21.jpg)
Cascading
Most pages will have multiple stylesheets that define different styles to the same elements.
The cascade defines an ordered sequence of style sheets where rules in later sheets have greater precedence than earlier ones.
![Page 22: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/22.jpg)
Client (user) stylesheet
Linked stylesheet
Embedded stylesheet
Inline Styles
low
imp
orta
nce
hig
h im
por
tanc
e
![Page 23: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/23.jpg)
Stylesheet 1make the paragraph 16px, Verdana, red
Stylesheet 2make the paragraph blue
16px, Verdana, blue
![Page 24: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/24.jpg)
![Page 25: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/25.jpg)
How to add css to your document
![Page 26: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/26.jpg)
External (linked)
Internal <head>
There are 2 basic ways to add styles to your html page:
![Page 27: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/27.jpg)
<head> <link rel="stylesheet" type="text/css" href="stylesheet.css"></head>
Except in special circumstances, best practice is to keep all your styles in a separate css document.
Linked stylesheets can be applied across multiple documents and sites.
External
![Page 28: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/28.jpg)
<head> <style> p {color: red} </style></head>
You can add styles directly into your html page using the “style” element in the <head> of your document.
Embedded styles apply ONLY to that html document.
Internal (embedded)
![Page 29: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/29.jpg)
<p style=”color: red”>Red Text</tag>
You can add styles directly into your html markup using the “style” attribute on opening tag of your element. This is called an “inline” style.
Inline styles apply ONLY to that specific instance of the element.
Internal (inline)
![Page 30: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/30.jpg)
![Page 31: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/31.jpg)
Best Practice
In most cases you should use the external method of adding styles to your html page.
Writing the css in the <head> of your document is acceptable if you definitely only want to apply the styles to a single page.
However, adding your styles “inline” — inside a html starting tag, e.g. <p style=”font-size: 14px”> — should be avoided.
![Page 32: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/32.jpg)
CSS Syntax
Syntax = the rules for how to write the language
![Page 33: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/33.jpg)
Three terms for describing your styles:
CSS rule
CSS selector
CSS declaration
![Page 34: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/34.jpg)
selector {property: value;}
Every style is defined by a selector and a declaration. The declaration contains at least one property/value pair.Together they are called a CSS Rule.
declaration
CSS Rule
![Page 35: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/35.jpg)
body {font-family: Arial, Helvetica}"
p {color: #666666}"
h1 {font-size: 24px}"
a {color: blue}
The selector associates css rules with HTML elements.
CSS Selector
![Page 36: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/36.jpg)
p { color: red }
The selector is typed in front of the declaration, with a space separating it and the opening curly-bracket (aka curly-brace).
Typically, extra spaces and returns are added as shown for the sake of readability.
CSS Selector
![Page 37: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/37.jpg)
h1,h2,h3,h4 { font-weight: bold }
You can apply styles to multiple selectors in the same rule by separating the selectors with commas.
CSS Selector
![Page 38: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/38.jpg)
p { property: value }
The declaration is always defined in a property/value pair. The two are separated by a colon.
How you define the properties will affect how HTML elements are displayed.
CSS Declaration
![Page 39: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/39.jpg)
p { font-family: Arial, sans-serif; font-size: 14px; color: #666666; }
You can apply multiple declarations to a selector(s) by separating the delcarations with semi-colons.
CSS Declaration
![Page 40: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/40.jpg)
![Page 41: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/41.jpg)
CSS Selectors
![Page 42: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/42.jpg)
p Type (element)
# ID
. Class
Descendant
![Page 43: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/43.jpg)
body {declaration} p {declaration} h1 {declaration} ul {declaration}
The simplest selector is the type selector, which targets an html element by name.
Type (element) Selectors
![Page 44: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/44.jpg)
The essential selector types (elements)
PrimaryStructure html body
BodyElements p br h1 – h6
ul ol a img div
FormattingElements em i strong b q blockquote span
![Page 45: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/45.jpg)
Type selectors vs ID & Class selectors
Type selectors use the tag names that are built into HTML.
ID and class selectors use names that you define, and are added to html elements to make them more specific.
![Page 46: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/46.jpg)
CSS .ingredients {declaration}"
HTML <ul class=”ingredients”>
A class is an html attribute that is added to your html markup. You reference that ID in your css with a period.
Class Selectors
![Page 47: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/47.jpg)
CSS #logo {declaration}"
HTML <img id=”logo” src=”” alt=””>
An ID is an html attribute that is added to your html markup. You reference that ID in your css with a hash.
ID Selectors
![Page 48: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/48.jpg)
IDs vs Classes
The most important difference between IDs and classes is that there can be only one ID on a page, but multiple classes.
An ID is more specific than a class.
An element can have both an ID and multiple classes.
![Page 49: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/49.jpg)
IDs vs Classes
ID: #344-34-4344 Class: Male Class: Student
ID: #123-54-9877 Class: Female Class: Student
![Page 50: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/50.jpg)
Multiple classes
CSS .ingredients.time {declaration}"
HTML
<div class=”ingredients time”> <h1></h1> </div>
Elements can have multiple classes, giving you more control. The are written in the CSS in the exact order they appear in the html, with no spaces.
![Page 51: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/51.jpg)
Combining IDs and classes
CSS #wrapper.ingredients.time {declaration}"
HTML
<div id=”wrapper” class=”ingredients time”> <h1></h1> </div>
Elements can have both ids and classes. While an element can have only one id, it can have multiple classes.
![Page 52: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/52.jpg)
CSS .ingredients p {declaration}"
HTML <div class=”ingredients”>"
<p></p>"
</div>
A descendant selector is a selector that combines the selectors of different elements to target a specific element(s).
Descendant Selectors
![Page 53: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/53.jpg)
![Page 54: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/54.jpg)
Applying Styles
![Page 55: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/55.jpg)
The Cascade
Inheritance
Specificity
![Page 56: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/56.jpg)
The “cascade” part of CSS is a set of rules for resolving conflicts with multiple CSS rules applied to the same elements.
For example, if there are two rules defining the color or your h1 elements, the rule that comes last in the cascade order will “trump” the other.
The Cascade
![Page 57: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/57.jpg)
Client (user) stylesheet
Linked (external) stylesheet
Embedded (internal) stylesheet
Inline (internal) Styles
low
imp
orta
nce
hig
h im
por
tanc
e
![Page 58: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/58.jpg)
As a designer, your goal is to set an overall global consistent style, then add in more specific styles as needed.
You can control how and where your styles are applied to your HTML by managing their inheritance and specificity.
Inheritance & Specificity
![Page 59: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/59.jpg)
Most elements will inherit many style properties from their parent elements by default. A parent is a containing element of a child.
HTML"<body> <div> <ul> <li></li> </ul> </div> </body>
relationship"parent of site"parent of ul and li, child of body"parent of li, child of div and body"child of ul, div, and body"!
Inheritance
![Page 60: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/60.jpg)
bodymake the paragraph 16px, Verdana, red
pmake the paragraph blue
16px, Verdana, blue
Inheritance
![Page 61: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/61.jpg)
Not all properties are inherited
![Page 62: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/62.jpg)
![Page 63: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/63.jpg)
Shortly after styling your first html elements, you will find yourself wanting more control over where your styles are applied.
This is where specificity comes in.
Specificity refers to how specific your selector is in naming an element.
Specificity
![Page 64: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/64.jpg)
If you have multiple styles applied to the same element, the browser goes with whichever selector is more specific.
Male MaleStudent
Male StudentGeorge
Specificity
![Page 65: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/65.jpg)
bodymake the paragraph 16px, Verdana, red
pmake the paragraph blue
16px, Verdana, pink
p.pinkmake the paragraph pink
Specificity
![Page 66: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/66.jpg)
Where specificity gets tricky
The basic concept of specificity is fairly simple: you target specific elements in your HTML by listing out more of their identifiers.
For example, if you want to apply a special style to a paragraph, you need a “hook” in the html to make it different from every other paragraph.
![Page 67: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/67.jpg)
Where specificity gets tricky
This can get tricky in your css, because the more specific you make your selectors, the harder it is to manage global styles (inheritances).
![Page 68: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/68.jpg)
Where specificity gets tricky
body {color: pink}
#recipe {color: blue}
.ingredients {color: green}
p.ingredients {color: purple}
#recipe p.ingredients {color: grey}"
Make all text pink.
Make all text in the element with the id “recipe” blue.
Make all text in the element with the class “ingredients” blue.
Make all text in the paragraph element with the class “ingredients” purple.
Make all text in the paragraph element with the class “ingredients”, contained in the element with the id “recipe”, grey.
![Page 69: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/69.jpg)
Where specificity gets tricky
HTML <div id=”recipe”> <p class=”ingredients”> <div>"
CSS body {color: pink} #recipe {color: blue} .ingredients {color: green} p.ingredients {color: purple} #recipe p.ingredients {color: grey}"
!
![Page 70: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/70.jpg)
![Page 71: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/71.jpg)
Style Declaration: Text
![Page 72: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/72.jpg)
Style declarations are made of a property and a value. The type of value you can use depends on the property.
Property Values
color: #444444;
font-family: "Times New Roman", Georgia, serif;
font-size: 16px; (define in px, em, or %)
![Page 73: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/73.jpg)
There are 5 basic ways of identifying fonts:
Web Safe Fonts(called font-family in your text)
Font-Face
Service-Based Font-Face
Images
sIFR/Cufon
![Page 74: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/74.jpg)
Web-safe
Web-safe fonts are fonts likely to be present on a wide range of computer systems, and used by Web content authors to increase the likelihood that content will be displayed in their chosen font.
If a visitor to a Web site does not have the specified font, their browser will attempt to select a similar alternative, based on the author-specified fallback fonts and generic families or it will use font substitution defined in the visitor's operating system.
![Page 75: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/75.jpg)
from http://www.w3schools.com/cssref/css_websafe_fonts.asp
![Page 76: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/76.jpg)
from http://www.w3schools.com/cssref/css_websafe_fonts.asp
![Page 77: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/77.jpg)
Font Stack The font-family property can hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font.
Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.
!
EXAMPLES body { font-family: Helvetica, Arial, sans-serif}"
h1 { “Lato”, Arial, sans-serif}"
![Page 78: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/78.jpg)
Units of Type Size
There are three different ways to define type sizes in css.
emsEms are a relative unit: 1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px.
pxPixels are a an absolute unit, it sets the text to a specific size instead of a size relative to the browser’s default. Except in special cases, you should define pixels in your css with the number and “px” together, no spaces: “16px”. %Like ems, percentages are also a relative unit. It is very useful for layout, not usually a good idea for type sizes.
![Page 79: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/79.jpg)
Specifying Color
There are three different ways to define color in css.
Hex CodesThis is the most common way to identify colors in CSS. The code gives two characters to correspond to RGB values. The number always has 6 characters (#44de42), unless all four characters are the same, and you can shorten it (#444). RGBYou can use a color’s RGB values with this syntax: p {color: rgb(34,123,125);}
Color NamesThere are built-in color names that you can use, that will provide generic hues: p {color: rgb(34,123,125);}
![Page 80: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/80.jpg)
Specifying Color
!
Hexidecimal RGB
![Page 81: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/81.jpg)
Color: white, black, grey
White = #ffffff, or #fff
Black = #000000, or #000
Greys = #111111 – #999999
![Page 82: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/82.jpg)
![Page 83: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/83.jpg)
![Page 84: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/84.jpg)
Type properties to learn now:
color
font-family
font-size
font-weight
font-style
letter-spacing
line-height
text-align
text-transform
![Page 85: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/85.jpg)
Example values:
color: #444444;
font-family: "Times New Roman", Georgia, serif;
font-size: 16px; (define in px, em, or %)
font-weight: bold; (or by number, 400, 700)
font-style: italic;
letter-spacing: .02em;
line-height: 1.6; (relative to whatever your type size is)
text-align: left;
text-transform: uppercase;
![Page 86: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/86.jpg)
![Page 87: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/87.jpg)
Styling Lists
![Page 88: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/88.jpg)
List styling Links can be styled just like any text, but have special properties. The most often used is “list-style-type”, which allows you to control whether bullets are used, and how they are styled.
ul { list-style-type: none; padding: 0px; margin: 0px;}
!
!
!
![Page 89: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/89.jpg)
List styling By default, <li> elements are block-level elements (they stack on top of each other). You can force them to line up in a row by changing the display property to “inline.”
li { display: inline;}
!
!
!
![Page 90: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/90.jpg)
![Page 91: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/91.jpg)
Styling Links
![Page 92: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/92.jpg)
Link states Links can be styled just like any text, but have special pseudo-classes that allow you to define their behavior.
a {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
When setting the style for several link states, there are some order rules:
— a:hover MUST come after a:link and a:visited
— a:active MUST come after a:hover
!
![Page 93: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/93.jpg)
Links By default, links are underlined. You can turn this off by changing the “text-decoration” property.
In the example below, the link will only have an underline when the cursor is hovering over the element.
a { color:#FF0000; text-decoration: none; }
a:hover { color:#00FF00; text-decoration: underline; }
!
![Page 94: CSS Foundations, pt 1](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7fce34a795954348b4672/html5/thumbnails/94.jpg)
Class Exercise 9
!