CSS Color CSS Color & Text& Text
Cascading Style SheetsCascading Style Sheets
Advantages of CSSAdvantages of CSS
Typography and page layout can be better Typography and page layout can be better controlledcontrolled
Style is separate from structureStyle is separate from structure
Documents are potentially smallerDocuments are potentially smaller
Site maintenance is easierSite maintenance is easier
Configuring CSSConfiguring CSS
Commenting CSS = /*comment goes here*/Commenting CSS = /*comment goes here*/
Inline Styles Inline Styles (coded in body, apply to one element only)(coded in body, apply to one element only)
Embedded Styles Embedded Styles (coded in head, apply to entire document)(coded in head, apply to entire document)
External Styles External Styles (coded in separate .css file, can be applied to (coded in separate .css file, can be applied to multiple documents)multiple documents)
Imported Styles Imported Styles (similar to external, external can be imported (similar to external, external can be imported using @import directive)using @import directive)
CSS Selectors and CSS Selectors and DeclarationsDeclarations
CSS Style Rule SelectorCSS Style Rule Selector
Can be an HTML element, a class name, Can be an HTML element, a class name, or an id nameor an id name
CSS Style Rule DeclarationCSS Style Rule Declaration
Indicates the CSS property you are Indicates the CSS property you are settingsetting
body{color:blue;}body{color:blue;}
Selector{Declaration:Value;}Selector{Declaration:Value;}
A Few CSS PropertiesA Few CSS Properties
background-color, colorbackground-color, color
font-family, font-size, font-style, font-weightfont-family, font-size, font-style, font-weight
line-heightline-height
margin, margin-left, margin-rightmargin, margin-left, margin-right
text-align, text-decorationtext-align, text-decoration
widthwidth
Color Values (Hex and Color Values (Hex and Name)Name)
Hexadecimal Number SystemHexadecimal Number System
Base 16Base 16
0-9, A-F (must begin with #)0-9, A-F (must begin with #)
#FFFFFF (white), #000000 (black)#FFFFFF (white), #000000 (black)
CSS Color SyntaxCSS Color Syntax
p{color:red;} = p{color:#FF0000;} = p{color:#F00;} = p{color:red;} = p{color:#FF0000;} = p{color:#F00;} = p{color:rgb(255,0,0);}p{color:rgb(255,0,0);}
http://www.w3schools.com/cssref/css_colornames.asp
Inline CSS with StyleInline CSS with Style
<h1 style=“color:#cc0000”>This is displayed <h1 style=“color:#cc0000”>This is displayed as a red heading</h1>as a red heading</h1>
<h1 style=“color:#cc0000; background-<h1 style=“color:#cc0000; background-color:#cccccc”>This is displayed as a red color:#cccccc”>This is displayed as a red heading on a gray background</h1>heading on a gray background</h1>
Embedded CSS With StyleEmbedded CSS With Style
Embedded styles are placed within a <style> Embedded styles are placed within a <style> element located in the head section of a web element located in the head section of a web pagepage
XHTML requires <style type=“text/css”>XHTML requires <style type=“text/css”>
HTML5 requires <style>HTML5 requires <style>
<style><style>body{background-color:#CCFFFF; color:#000033;}body{background-color:#CCFFFF; color:#000033;}
</style></style>
Configuring Text with CSSConfiguring Text with CSS
Font-Family CategoryFont-Family Category
serif, sans-serif, monospace, cursive, fantasyserif, sans-serif, monospace, cursive, fantasy
p{font-family:Arial, Helvetica, sans-serif;}p{font-family:Arial, Helvetica, sans-serif;}
Not all computers have the same font installed. Not all computers have the same font installed. Or a list of web-safe fonts, visit Or a list of web-safe fonts, visit http://www.w3schools.com/cssref/css_websafe_fonts.asp
More CSS Font More CSS Font PropertiesProperties
font-sizefont-size
Text Value (xx-small, x-small, small, medium, Text Value (xx-small, x-small, small, medium, large, x-large, xx-large)large, x-large, xx-large)
Pixel Unit (px), Point Unit (pt), Em Unit (em), Pixel Unit (px), Point Unit (pt), Em Unit (em), Percentage Value (%)Percentage Value (%)
font-weight, font-style, line-height, text-align, font-weight, font-style, line-height, text-align, text-indent, text-decorationtext-indent, text-decoration
Configuring selectors (h1, h2, ul, p)Configuring selectors (h1, h2, ul, p)
CSS Class and id CSS Class and id SelectorsSelectors
Class Selector (used when you need to apply a Class Selector (used when you need to apply a CSS declaration to certain elements)CSS declaration to certain elements)
.feature{color:#FF0000;}.feature{color:#FF0000;}
<li class=“feature”>Usability Studies</li><li class=“feature”>Usability Studies</li>
<div class=“feature”>I’ll have the feature CSS properties</div><div class=“feature”>I’ll have the feature CSS properties</div>
id Selector (used when you want to apply a id Selector (used when you want to apply a CSS declaration to a single area)CSS declaration to a single area)
#footer{color:#333333; font-size:.75em; font-style:italic;}#footer{color:#333333; font-size:.75em; font-style:italic;}
<li id=“footer”>Usability Studies</li><li id=“footer”>Usability Studies</li>
<div id=“footer”>This is the footer</div><div id=“footer”>This is the footer</div>
Contextual SelectorsContextual Selectors
Used when you want to specify an element Used when you want to specify an element within the context of its container (parent) within the context of its container (parent) elementelement
aka: descendent selectorsaka: descendent selectors
To specify a green text color only for anchor To specify a green text color only for anchor tags located within the footer id declared tags located within the footer id declared earlier…earlier…#footer a {color:#00ff00;}#footer a {color:#00ff00;}
Span ElementSpan Element
<div> defines areas separate, with empty <div> defines areas separate, with empty space above and belowspace above and below
<span> defines a section that is not physically <span> defines a section that is not physically separated from other areasseparated from other areas
Use the <span> tag if you need to format an Use the <span> tag if you need to format an area that is contained within another, such as area that is contained within another, such as within <p>, <blockquote>, <li>, or <div> tag.within <p>, <blockquote>, <li>, or <div> tag.
External Style SheetsExternal Style Sheets
Best method (in my opinion)Best method (in my opinion)
Link to external style sheet from HEADLink to external style sheet from HEAD<link rel=“stylesheet” href=“stylesheet.css”><link rel=“stylesheet” href=“stylesheet.css”>
Centering with CSSCentering with CSS
Wrap the entire document in a <div> to Wrap the entire document in a <div> to encompass centering all contentencompass centering all content
<div id=“wrapper”></div><div id=“wrapper”></div>
#wrapper {width:700px; margin-left:auto; margin-right:auto;}#wrapper {width:700px; margin-left:auto; margin-right:auto;}
#wrapper {width:80%; margin-left:auto; margin-right:auto;}#wrapper {width:80%; margin-left:auto; margin-right:auto;}
The “Cascade”The “Cascade”
Browser DefaultsBrowser Defaults
External StylesExternal Styles
Embedded StylesEmbedded Styles
Inline StylesInline Styles
HTML AttributesHTML Attributes
CSS ValidationCSS Validation
Similar to HTML5 validationSimilar to HTML5 validation
http://jigsaw.w3.org/css-validator/
Horizontal Rule ElementHorizontal Rule Element
Visually separates areas of the pageVisually separates areas of the page
XHTML = <hr />XHTML = <hr />
HTML5 = <hr>HTML5 = <hr>
Use CSS to specify width, height, color, & styleUse CSS to specify width, height, color, & style
Border & Padding Border & Padding PropertyProperty
Border = configure the border around an Border = configure the border around an element (default width set to 0 to be invisible)element (default width set to 0 to be invisible)
border-width, border-color, border-styleborder-width, border-color, border-style
Padding = configures the empty space Padding = configures the empty space between the content of the element and the between the content of the element and the borderborder
padding-bottom, padding-left, padding-right, padding-bottom, padding-left, padding-right, padding-toppadding-top
Other CSS PropertiesOther CSS Properties
background-background-attachment, clip, attachment, clip,
image, origin, position, image, origin, position, repeat, sizerepeat, size
box-shadow, height, box-shadow, height, linear-gradient, min-linear-gradient, min-width, opacity, radial-width, opacity, radial-gradient, text-shadowgradient, text-shadow
border-border-bottom, bottom-left-bottom, bottom-left-radius, bottom-radius, bottom-
right-right- radius, color, radius, color, left, left, radius, right, radius, right, style, top, style, top, top-left-top-left-radius, top-radius, top- right-radius, right-radius, widthwidth
Types of GraphicsTypes of Graphics
GIF, JPEG, PNGGIF, JPEG, PNG
Image ElementImage Element
Image Element = src attribute + alt attributeImage Element = src attribute + alt attribute
<img src=“pic.jpg” height=“200” width=“500” alt=“My Picture”><img src=“pic.jpg” height=“200” width=“500” alt=“My Picture”>
Attributes:Attributes:
align, alt, border, height, hspace, id, name, align, alt, border, height, hspace, id, name, src, title, vspace, widthsrc, title, vspace, width
Image HyperlinksImage Hyperlinks
<a href=“url”><img src=“pic.jpg” alt=“Alt Text”></a><a href=“url”><img src=“pic.jpg” alt=“Alt Text”></a>
HTML5 Figure ElementHTML5 Figure Element
Figure includes image and caption (figcaption)Figure includes image and caption (figcaption)
Create image element, add alternate text, Create image element, add alternate text, set figcaption in CSSset figcaption in CSS
Open <figure> element, create image Open <figure> element, create image element with <img…>, use element with <img…>, use <figcaption>Caption Here</figcaption>, <figcaption>Caption Here</figcaption>, close </figure> elementclose </figure> element
HTML5 Meter & ProgressHTML5 Meter & Progress
Meter = displays a visual gauge of a numeric Meter = displays a visual gauge of a numeric value within a known rage, typically part of a value within a known rage, typically part of a bar chartbar chart
<meter value=“123” min=“0” max=“200”>123</meter><meter value=“123” min=“0” max=“200”>123</meter>
Progress = displays a bar that depicts a Progress = displays a bar that depicts a numeric value within a specified rangenumeric value within a specified range
<progress value=“123” max=“200”>123</progress><progress value=“123” max=“200”>123</progress>
Background ImagesBackground Images
Use CSS whenever possible for background imagesUse CSS whenever possible for background images
body{background-image: url(pic.jpg);}body{background-image: url(pic.jpg);}
background-repeat (repeat-y, repeat-x, no-repeat)background-repeat (repeat-y, repeat-x, no-repeat)
background-position (left, top, center, bottom, right)background-position (left, top, center, bottom, right)
background-attachment (fixed, scroll) = configure background-attachment (fixed, scroll) = configure whether the background image remains fixed in whether the background image remains fixed in place or scrolls along with the pageplace or scrolls along with the page
Image MapsImage Maps
Create “hotspots” on images that are linksCreate “hotspots” on images that are links
<map name=“boat” id=“boat”><map name=“boat” id=“boat”><area href=“http://someurl.com” shape=“rect” <area href=“http://someurl.com” shape=“rect”
coords=“24, 188, 339, 283” coords=“24, 188, 339, 283” alt=“Alt Text”>alt=“Alt Text”></map></map><img src=“pic.jpg” usemap=“#boat” alt=“Alt Text” width=“416” <img src=“pic.jpg” usemap=“#boat” alt=“Alt Text” width=“416” height=“350”>height=“350”>
Certainly not something you want to code by Certainly not something you want to code by hand. Use GIMP, Fireworks, Coffee Cup HTML hand. Use GIMP, Fireworks, Coffee Cup HTML EditorEditor
Favorites IconFavorites Icon
favicon.icofavicon.ico
Either 16x16 or 32x32 pixelsEither 16x16 or 32x32 pixels
favicongenerator.com, favicon.cc, favicongenerator.com, favicon.cc, freefavicon.comfreefavicon.com
<link rel=“icon” href=“favicon.ico” type=“image/x-icon”><link rel=“icon” href=“favicon.ico” type=“image/x-icon”>
For IE compatibility:For IE compatibility:<link rel=“shortcut icon” href=“favicon.ico” type=“image/x-<link rel=“shortcut icon” href=“favicon.ico” type=“image/x-icon”>icon”>
CSS3 Visual EffectsCSS3 Visual Effects
background-clip (content-box, padding-box, background-clip (content-box, padding-box, border-box)border-box)
background-origin (content-box, padding-box, background-origin (content-box, padding-box, border-box)border-box)
background-size (%w%h, px w px h, auto, background-size (%w%h, px w px h, auto, contain, cover)contain, cover)
Multiple Background Multiple Background ImagesImages
Progressive EnhancementProgressive Enhancement
In CSS, configure a standard background-In CSS, configure a standard background-image propertyimage property
Continue by adding background: url(….); within Continue by adding background: url(….); within body CSSbody CSS
CSS3 Rounded CornersCSS3 Rounded Corners
border-radius propertyborder-radius property
border-bottom-left-radiusborder-bottom-left-radius
border-top-left-radiusborder-top-left-radius
border-bottom-right-radiusborder-bottom-right-radius
border-top-right-radiusborder-top-right-radius
Shadow PropertiesShadow Properties
CSS3 box-shadow propertyCSS3 box-shadow property
CSS3 text-shadow propertyCSS3 text-shadow property
CSS3 opacity propertyCSS3 opacity property
Gradients (filter and linear)Gradients (filter and linear)