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:

<p style="color: red;">...</p>

Embedded Styles:

<style type="text/css">
  p {
    color: red;
  }
</style>

External Styles:

<link href="style1.css" rel="stylesheet"/>
<link href="style1.css" rel="stylesheet" type="text/css"/>

Structure

selector

what elements to apply styles to ('p {')

p {  /* selector */
h1 a {  /* contextual selector */
#nav a {  /* id contextual selector */
h1, h2, h3 {  /* group selector */
.fun {  /* class selector */
blockquote.fun {  /* targeted class 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" [1]

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; }

<a style="text-decoration: none;" href="http://www.google.com"/>

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

  <pre style="text-decoration: line-through;">...</pre>

Visibility

visibility:hidden;
visibility:visible;

JS:

object.style.visibility="hidden"

Hide

<div style="display: none;">Hide this div</div>

Selectors

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

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

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

<p>Blue</p>

<span id="id_select">green</span>

<span class="example_class another_class">red</span>

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

Division

The <div> 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/

Box Model

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;

Positioning

Center

<div style="text-align: center;">...</div>

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 */

---

<div class="container">
  <div class="header">Header</div>
  <div class="column" id="leftcolumn">left column</div>
  <div class="column" id="rightcolumn">right column</div>
</div>

.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;
}
#leftcolumn { background-color: blue }
#rightcolumn { background-color: red; }
.header { width: 100%; height: 100px; background-color: yellow;
    clear: both;
}

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

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

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)

#home {
  background-image: url('home_background.gif');
}

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)

#home {
  background-image: url('home_background.gif');
}

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;
}
<div class="sunset">Sunsets are a gift of nature.</div>

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

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

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

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

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

Hover Effect:

#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}
#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}
#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:

<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">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:

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

CSS:

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

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

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/ [2]

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 { ... }

<table class="rates">...

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">
<html>
<head>
	<title></title>
  <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;
}

</style></head>
<body>
		<h1>Test</h1>
		<h2 class="section-head-open">
			Project Status
		</h2>
		<div class="section-body">
            <div class="section-content" id="status-content">
            This is a test.
            </div>
		</div>

</body>
</html>

Debugging with Inspect Element

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

CSS Frameworks

Bootstrap