Css the rules literally
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