beginning css
Post on 21-Jan-2015
789 Views
Preview:
DESCRIPTION
TRANSCRIPT
Adding Style with CSS The first steps to making your page look fab
Thursday, October 14, 2010
Before we start
• Install Firefox and Web Developer Toolbar
• Open http://doglr.com/base-css.html
• We will edit the CSS directly via WDT and save the changes to /css/start-css.css
Thursday, October 14, 2010
What is CSS?
• Cascading Style Sheets
• The styles cascade. Generic rules are over powered by more specific rules.
• The closer you get to the tag, the more powerful the rule
• HTML provides structure, CSS provides style
Thursday, October 14, 2010
CSS syntax
• selector {property:value; property:value;}
• selector selector {property:value;}
• selector.class {property:value}
• selector#id {property:value}
Thursday, October 14, 2010
The most basic rule
• * {color:black}
• * = everything
• color:black = make text black
Thursday, October 14, 2010
Style a container
• The uppermost container: html
• html {background: #000000; }
• #000000 = hexadecimal code for black
• #000 = #000000
• A specific container
• html body aside p {color:pink;}
Thursday, October 14, 2010
Id and Class
• An id can only be used once on a page.
• A class can be used multiple times
• Keep the names functional, not stylistic, i.e. class=”intro” not class=”bigletter”
• header#hd = the header with id=”hd”
• p.first = the paragraph with class=”first”
Thursday, October 14, 2010
Popular CSS properties
• border: 1px solid red;
• margin: 10px 0 5px 10px; /* top, right, bottom, left */
• background-color: yellow;
• width:500px;
• display:block;
Thursday, October 14, 2010
Fonts Style for your text
Thursday, October 14, 2010
What is an em?
• The size of the letter m
• A proportional size, that allows the user to resize the text.
• A better measurement for fonts and container widths.
•
Thursday, October 14, 2010
What is a px?
• A single pixel.
• Proportional to the size of the screen.
• Good for objects that don’t resize, such as images
Thursday, October 14, 2010
What is a pt?
• A point.
• Something used for printing on paper, not the web.
• Often times you’ll see this for web display and it’s not a good idea.
• 1px does not equal 1pt.
Thursday, October 14, 2010
Font Families
• Serifs have feet and tails. These are good for reading paragraphs and large bodies of text. They are mostly used on paper.
• Sans Serifs do not have feet and tails. These are good for the web.
• Don’t use comic sans!
Thursday, October 14, 2010
Popular Font Rules
• font-family: woot, helvetica, arial, sans-serif;
• The browser will use the first font your computer has available.
• font-size: 1.1 em;
• color: #808080;
• text-decoration:none;
Thursday, October 14, 2010
Layout StylesCreate grids and text flows
Thursday, October 14, 2010
Positioningrelative - absolute - fixed
Thursday, October 14, 2010
Position
• Position:relative; The object remains in the content flow. This is a basic status, but is not a default.
• Position:absolute; Position the item absolutely to it’s closest relatively positioned parent.
• Position:fixed; object is positioned absolutely, but doesn’t move as the user scrolls.
Thursday, October 14, 2010
FloatingPowerful grids and content flow
Thursday, October 14, 2010
Floats
• Float:left; /* or right */
• The object will move as far to one side as it can. It stops when it hits something solid.
• Clear:left /* or right, both */
• The object will drop below anything previously floated
Thursday, October 14, 2010
Text Flow
• Text and other elements will flow around an object that has been floated.
• This gives you the floated image effect.
This text willflow around
the floated box.
Thursday, October 14, 2010
Next Class
• Why you should hate Internet Explorer
• How to use libraries
• Background images
• Intro to CSS3, pseudo-selectors, attribute selectors...
Thursday, October 14, 2010
Resources
• http://csszengarden.com
• Subscribe to http://www.css-discuss.org/
• http://css.maxdesign.com.au/
• http://www.last-child.com/category/css/
Thursday, October 14, 2010
top related