css the rules literally
Skip this Video
Download Presentation
CSS: The Rules (literally!)

Loading in 2 Seconds...

play fullscreen
1 / 16

CSS: The Rules (literally!) - PowerPoint PPT Presentation

  • Uploaded on

CSS: The Rules (literally!). ( Chapters 7 – 9 ). History of CSS. 1994ish – Concept for CSS originally proposed 1996 – CSS 1 accepted with formatting support 1997 – CSS 2 accepted with layout support 2000 – Browser support (finally!)

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about ' CSS: The Rules (literally!)' - dessa

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
css the rules literally

CSS: The Rules (literally!)

(Chapters 7 – 9)

history of css
History of CSS
  • 1994ish – Concept for CSS originally proposed
  • 1996 – CSS 1 accepted with formatting support
  • 1997 – CSS 2 accepted with layout support
  • 2000 – Browser support (finally!)
  • 2004 – CSS 2.1 threw out unsupported features, tweaked spec for some
  • 2005 – CSS 2.1 pulled back to draft
  • 2007 – CSS 2.1 reinstated as accepted standard
  • 2011 – more edits to CSS 2.1
  • NOW – CSS 3, modular standards, no browser support
structure vs presentation
Structure vs. Presentation
  • HTML is used to structure (mark up) your content
    • Should have all verbiage, reference to images, etc.
    • Provides structure for the content (also used by search engines) – think outline of a paper/essay
  • CSS is used for presentation
    • Formatting, Placement, Some interaction (hover)
    • Basically just a list of rules that apply to your HTML
    • Needs GOOD structure to be utilized
    • Rules are CASCADED through inheritance (parent, child)
  • Note: NO browser currently supports ALL of the CSS and there are discrepancies with some CSS rules.
a css rule
A CSS Rule

h1 { text-align: center; }

  • Selector BEGINS a rule; h1
    • Tells what element(s) in HTML this rule applies to
    • Can be formatted several different ways (more later)
  • Rules that apply to the given selector are grouped inside one set of braces { }.
  • A rule starts with a property; text-align
  • Then a :
  • Each rule must have an associated value; center
  • Each rule is separated by a ;
css comments
CSS Comments

/* This is a CSS comment */

  • Comments begin with /* and end with */
  • Must be first thing in a line or after a rule (follows ;)
  • Usually used when a CSS rule is used to accomplish something that isn’t intuitive OR a hack
  • Another common use is to signify why a rule is made (perhaps related to JavaScript)
  • And another may be to signify a property that may be inherited (more later) – CSS can get confusing...
css values
CSS Values
  • Predefined – a list of valid values to choose from

text-align: center, left, right, justify

display: block, inline, none

color: red, blue, green, (and another 13)

  • Measurements – determined in 1 of 2 ways and must have quantity and unit
    • relative (pixels, em, etc.)

font-size: 18px;

    • absolute (inches, points, etc.)

font-size: 16pt;

css values1
CSS Values
  • Percentage – depends on inheritance (more later) – use with caution

width: 50%;

  • URL – some properties need a URL, format as follows




    • if using relative path, it is relative to the document that contains the CSS rule
css values2
CSS Values
  • Color – many different ways to express a color
  • There are 16 predefined colors

red, green, blue, teal, maroon, olive, etc.

  • You can give a numerical value or percentage of red, green, and blue – rgb(red, green, blue)

rgb(25%, 90%, 18%)

rgb(95, 255, 0)

  • Use a hexadecimal representation (back cover)



common formatting properties
Common Formatting Properties

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

font-style: italic;

font-weight: bold;

font-size: 18px;

line-height: 20px;

color: #333333;

background-color: #FF0000;

text-indent: 25px;

text-align: center;

text-transform: uppercase;

font-variant: small-caps;

text-decoration: underline;

where to put css rules
Where to put CSS rules
  • CSS rules can occur in one of 3 places
    • In an external document (Style Sheet)
      • This is preferred way – completely separate from structure
      • Must be linked in head of HTML document
      • Style Sheet stored as .cssfile, just a list of CSS rules
    • In an internal style sheet
      • Should be declared in the head section of an HTML file
      • Rules must be preceeded by <style type="text/css">
      • Must be followed by </style>
    • Inline styles
      • Written as a style attribute to a tag (note format)
      • Not ideal but sometimes the best place to make a rule
external style sheet
External Style Sheet
  • These rules come from a separate document that contains only CSS rules (can span several pages)
  • Link in head of HTML document on every page used

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

  • This is the PREFERRED/RECOMMENDED location
  • Will be overruled by styles by an internal style sheet within the HTML documentand inline styles defined in an element – YOU control where they are, so you must think
internal style sheet
Internal Style Sheet
  • These rules come from a separate list of rules in the head of an HTML document (only applies to 1 page)

<style type="text/css" />

h1 {

text-align: center;

color: red;



  • Will overrule a style from an external style sheet.
  • Will be overruled by inline styles defined in an element – again...YOU control where they are
inline styles
Inline Styles
  • These are written as an attribute to individual tags
  • Rules for inline styles change a little here

<h1 style="text-align: center; color: red;">

  • Notice there is no selector and no braces { }
  • Will overrule a style from an external style sheet.
  • Will overrule a style from an internal style sheet.
  • To cause less confusion about WHERE a style comes from, inline styles shouldn’t be used too often.
how it could look
How It Could Look


<title>My Web Page Title</title>

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

<style type="text/css" />

h1 {

text-align: center;





<h1 style="color: red;">This is my heading.</h1>



  • my-styles.css

h1 {

font-size: 24px;


  • Predefined HTML tag selector

h1 {text-align: center; color: red;}

p {font-size: 14px;}

  • Context (WHERE it is in structure)
    • Could apply to ALL descendents

p em {color: red; font-weight: bold;}

    • Could apply to ONLY children

p > em {color: red; font-weight: bold;}

  • Class of an element (determined by class attribute)
    • Must include .preceeding class name

.intro {font-size: 18px;}

    • Could include a tag to restrict further

p.intro {font-size: 18px;}

  • ID of an element (determined by ID attribute)
    • Must include #preceeding ID

#header {

background-color: silver;

text-align: center;


    • Could also include a tag such as div#header