Cascading Style Sheets

Cascading Style Sheets
Cascading Style Sheets (CSS)

CSS Sources
CSS inherits properties in the order they are loaded. Those that come later in a document take precedence over any earlier properties. Anything that you don't specifically change will cascade (also called inheritance) from the previous property.

Inline Styles: ...

Embedded Styles:  p { color: red; }

External Styles:  

Structure

 * selector: what elements to apply styles to ('p {')

p { /* selector */ h1 a { /* contextual selector */ h1, h2, h3 { /* group selector */ .fun { /* class selector */ blockquote.fun { /* targeted class selector */
 * 1) nav a { /* id contextual selector */


 * declaration: property and value ('color: red;')


 * property: ('color:')


 * value: ('red;')


 * rule: combination of selector and declarations

Sources:
 * Inline
 * Embedded
 * External

Style Units

 * % (percentage of default font zie)
 * px (pixels - a dot on the computer screen)
 * pt (points - 1 pt is the same as 1/72 inch)
 * em (size of M - see below)


 * em: "1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses"

Source: CSS Units - http://w3schools.com/cssref/css_units.asp

Styling Links
Link States (pseudo-classes) a {...} a:link {...} a:visited {...} a:hover {...} a:active {...}

Remove underline: a { text-decoration: none; }



Comments
/* this is a comment */

Color
color: green; color: #00ff00; /* RGB */ color: rgb(0,255,0); background-color: cyan;

Font
Sans-serif typefaces like Arial are clean and modern-looking; serifed typefaces like Times New Roman have little “feet.”

color: red; background-color: green; font-family: Verdana; font-family: Helvetica, Arial, sans-serif; font-size: x-large; /* 'medium', ... */ font-weight: bold; /* 'bold' or 'normal' */ font-style: normal; /* 'normal' or 'italic' */ text-decoration: none; /* none, underline, overline, line-through */

font stack: font-family: Verdana, Helvetica, Arial, sans-serif;

font sizes:
 * xx-small
 * x-small
 * small
 * medium
 * large
 * x-large
 * xx-large
 * 140% (percentage)
 * 1.2em .8em (em units - 1em is hight of M)
 * 20px (pixels)
 * 20pt (points)

Strike through
&lt;pre style="text-decoration: line-through;">...&lt;/pre>

Visibility
visibility:hidden; visibility:visible;

JS: object.style.visibility="hidden"

Selectors
/* element selector */ p { color: blue; }

/* unique id selector */ color: green; }
 * 1) id_select {

/* general class selector */ .example_class { color: red; }

Blue

green

red

Note: As IDs are most specific, they can trump classes.

Division
The &lt;div&gt; tag stands for division. These can be nested.

Borders
.highlight { border-width: 5px; border-style: solid; border-color: black; }

.highlight { border: 5px solid black; /* also border-top, border-bottom, etc. */ }

.top_highlight { /* top, bottom, left, right */ border-top-width: 5px; border-top-style: solid; border-top-color: black; }

Border styles:
 * solid
 * dashed
 * dotted
 * double
 * etc...

No border (cancel previous definition) border: none;

Rounded Corners
border-radius: 15px;

References:
 * Border-radius: create rounded corners with CSS! - CSS3 . Info - http://www.css3.info/preview/rounded-border/

Margins, Borders and Padding
Box Model: Margin (out), Border, Padding (in), width and height

line-height: 125%; /* spacing between text lines */ padding: 15px; /* padding between element and border */ padding: 5%; margin: 30px; margin-top: 5px; /* margin-top, margin-bottom, margin-left, margin-right */ width: 50%; height: 200px; padding: 0; /* no need to specify unit with 0 */ margin: 0;

Center
...

style="width:70%; margin:0 auto;"

Absolute
Based off of distance from top left of viewport. (Except for nested "position" elements) position: absolute; top: 200px; left: 200px;

Note: if you nest absolute "blocks", within another "position" element, the inner position will be based off of the outer block.

Relative
Based off of distance from current element position. (Nudge in a direction)

position: relative; top: 10px; left: 10px;

Note: this is the best for text reflow. Use 'em' units for Elastic Desgin.

Float
Float causes an element to hug an edge, and have other elements wrap around it. This allows you to get multi column affect like newspapers.

float: right; /* left, right, none */ width: 300px;

Note: To avoid L shape around float object, use 'padding' property on adjacent element that will reflow. .content_constrained { padding-right: 310px; }

clear: both; /* ignore a float on your left, right, none or both */

---

Header left column right column

.main { margin: 0 auto; width: 80%; } .main:after { display: block; clear: both; content: ""; } .column { width: 50%; min-height: 500px; margin-bottom: 20px; float: left; display: block; } .header { width: 100%; height: 100px; background-color: yellow; clear: both; }
 * 1) leftcolumn { background-color: blue }
 * 2) rightcolumn { background-color: red; }

Center Float
CSS Horizontal Align - http://www.w3schools.com/css/css_align.asp

center: margin-left:auto; margin-right:auto; width: 660px; text-align: center;

---

CSS examples - Centred Floats - http://pmob.co.uk/pob/centred-float.htm

float:right; position:relative; left:-50%; text-align:left; }
 * 1) center-float{

center: float:left; position:relative; right:-25%; border: 2px solid black; width: 50%; text-align:center;

center left: .left { float:left; position:relative; right:-50%; text-align:center; }

center right: .right { float:right; position:relative; left:-50%; text-align:center; }

Styling Lists
list-style-type: none; /* circle, disc, square, none */

Background Image
CSS Background Image: (repeat horizontally and vertically) background-image: url('home_background.gif'); }
 * 1) home {

To repeat only in x or y: background-repeat:repeat-x; background-repeat:repeat-y;

No repeat: background-repeat:no-repeat; background-position:right top;

Shorthand: body {background:#ffffff url('img_tree.png') no-repeat right top;}

Fill background: background-repeat:no-repeat; background-size:100% 100%;

background-repeat:no-repeat; background-size:cover;

body { background-image: url('background.jpg'); background-repeat:no-repeat; background-size:cover; } References:
 * CSS Background - http://www.w3schools.com/css/css_background.asp

Styling Images
Inline Image: 

CSS Background Image: (repeat horizontally and vertically) background-image: url('home_background.gif'); }
 * 1) home {

Make sure to put a default color behind: background-color: #aebbdb;

Repeat horizontally: (gradients) background-repeat:repeat-x;

Repeat vertically: (gradients) background-repeat:repeat-y;

No repeat: background-repeat:no-repeat; background-position:right top; /* (left, center, right) (top, center, bottom) default: top left*/

Background - Shorthand property: body { background: #ffffff url('img_tree.png'); } body { background: #ffffff url('img_tree.png') no-repeat right top; }

Fixed height/width: .sunset { border: 1px solid black; color: white; font-weight: bold; font-size: 300%; background: black url(sunset.jpg); width: 650px; height: 125px; padding-left: 50px; padding-top: 400px; } Sunsets are a gift of nature.

CSS Background - w3schools - http://www.w3schools.com/css/css_background.asp

Transperency (opacity): img { opacity:0.4; filter:alpha(opacity=40); /* For IE8 and earlier */ }

Note: This will work with 'block' elements as well.

See: Transparency on css background image, that doesn't affect child elements - http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/

Image Sprites
An image sprite is a collection of images put into a single image.

A web page with many images can take a long time to load and generates multiple server requests.

Using image sprites will reduce the number of server requests and save bandwidth.

CSS Image Sprites - http://www.w3schools.com/css/css_image_sprites.asp


 * 1) navlist{position:relative;}
 * 2) navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
 * 3) navlist li, #navlist a{height:44px;display:block;}


 * 1) home{left:0px;width:46px;}
 * 2) home{background:url('img_navsprites.gif') 0 0;}


 * 1) prev{left:63px;width:43px;}
 * 2) prev{background:url('img_navsprites.gif') -47px 0;}


 * 1) next{left:129px;width:43px;}
 * 2) next{background:url('img_navsprites.gif') -91px 0;}

Hover Effect:
 * 1) home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}
 * 2) prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}
 * 3) next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}

Note: Because this is one single image, and not six separate files, there will be no loading delay when a user hovers over the image.

Navigation Bar
Button Bar:  Home News</li> Contact</a></li> About</a></li> </ul>

Remove Buttons: ul { list-style-type:none; margin:0; padding:0; }

Vertical: a { display:block; width:60px; }

Horizontal: li { display:inline; }

Equal width with Horizonal Float: li { float:left; } a { display:block; width:60px; }

CSS Navigation Bar - w3schools - http://www.w3schools.com/css/css_navbar.asp

Footer
"When an HTML page contains a small amount of content, the footer can sometimes sit halfway up the page leaving a blank space underneath. This can look bad, particularly on a large screen. Web designers are often asked to push footers down to the bottom of the viewport, but it's not immediately obvious how this can be done."

HTML:

CSS: body { margin:0; padding:0; height:100%; }  min-height:100%; position:relative; }  background:#ff0; padding:10px; }  padding:10px; padding-bottom:60px;  /* Height of the footer */ }  position:absolute; bottom:0; width:100%; height:60px;  /* Height of the footer */ background:#6cf; }
 * 1) container {
 * 1) header {
 * 1) body {
 * 1) footer {

/* And one simple CSS rule for IE 6 and IE 5.5: */ height:100%; }
 * 1) container {

Source: Get down! How to keep footers at the bottom of the page - http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

See also: A CSS Sticky Footer - http://ryanfait.com/sticky-footer/

Styling Tables
table { border-collapse: collapse; border: 1px solid black; } th { text-align: left; background: gray; color: white; padding: 0.2em; } td { border: 1px solid black; padding: 0.2em; }

classifying your tables:

table.rates { ... } table.rates th, table.rates td { ... }

...

Styling Forms
Fixed width labels: form.contact label.fixedwidth { display: block; /* convert to block element so we can set width */ width: 240px; float: left; /* to stop newline after block element */ }

Convert an inline element into a block-level element: display: block

CSS Button Creator
Best CSS Button Generator: Create CSS-only Buttons - http://www.bestcssbuttongenerator.com/

Fancy Sections
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css">

/* general stuff */ body {   text-align: left; font-family: "helvetica", sans-serif; font-size: 11pt; }

h2.section-head-open {   font-size: 14pt; margin-bottom: 0pt; padding: 4pt; background-color: #e6edff; border-bottom: none; border-top: 1pt solid #888888; border-left: 1pt solid #888888; border-right: 1pt solid #888888; }

.section-body {   margin-top: 0pt; border-bottom: 1pt solid #888888; border-left: 1pt solid #888888; border-right: 1pt solid #888888; overflow: auto; }

.section-content {   padding: 8pt; }

Test <h2 class="section-head-open"> Project Status This is a test.

Debugging with Inspect Element
To investigate further a particular page element, right click on the element and select "Inspect Element".

CSS Frameworks
Bootstrap