Beginning HTML and CSS

Class 2

Welcome!

Girl Develop It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction.

Some "rules"

  • We are here for you!
  • Every question is important
  • Help each other
  • Have fun

Anatomy of a website

Your Content
+ HTML: Structure
+ CSS: Presentation
= Your Website

A website is a way to present your content to the world, using HTML and CSS to present that content & make it look good.

CSS: What is it?

CSS = Cascading Style Sheets

CSS is a "style sheet language" that lets you style the elements on your page.

CSS is works in conjunction with HTML, but is not HTML itself.

HTML + CSS
 
Structure + Style

HTML CSS
  +   =

CSS: What can it do?

All colored text, position, and size

CSS: What does it look like?

Connecting CSS to HTML

3 ways

"Inline"

"Embedded"

"External"

Connecting CSS to HTML: Inline


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

Uses the HTML attribute style.

Difficult to use in large projects

Not preferred.

Connecting CSS to HTML: Embedded


  <head>
    <style type="text/css">
      p {
        color: blue;
        font-size: 12px;
      }
    </style>
  </head>

Inside <head> element.

Uses <style> tag.

Can only be used in one html file

Connecting CSS to HTML: Linked


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



  body {
    color: red;
  }

Shared resource for several pages.

Reduced file size & bandwidth

Easy to maintain in larger projects.

Preferred by web developers everywhere!

Let's develop it

  • Create a new .css file
  • Add a link to the file in the head of your html file
  • Add the rule below to your css to make sure it works (your text should now be red).

  body {
    color: red;
  }

The CSS Rule

The CSS Rule

The CSS Rule


  selector {
    property: value;
  }

A block of CSS code is a rule.

The rule starts with a selector.

It has sets of properties and values.

A property-value pair is a declaration.

CSS Syntax

Declarations: Property and value of style you plan use on HTML element.

Declarations end with a semicolon

Declaration groups are surrounded by curly brackets.


  selector {
    property-1: value-A;
    property-2: value-B;
    property-3: value-C;
  }

Selector: Element


  p {
    property: value;
  }

Selects all paragraph elements.


  img {
    property: value;
  }

Selects all image elements.

Selector: ID


  #footer {
    property: value;
  }

Selects all elements with an id of "footer".


  <p id="footer">Copyright 2011</p>

The associated HTML.

  • Unique identifiers - a page can only have one of each id
  • Begin with a letter and followed by any number of letters, numbers, hyphens, underscores

Selector: Class


  .warning {
    color: red;
  }

Selects all elements with a class of "warning".

  <p class="warning">Run away!</p>

The associated HTML.

  • Multiple elements can have the same class
  • Element can have multiple classes separated by a space
  • Begin with a letter and followed by any number of letters, numbers, hyphens, underscores

IDs vs. Classes

ID -- Should only apply to one element on a webpage. I.E. A webpage only has one footer.

The "#" is how you tell CSS "this is an id."

Class -- Lots of elements can have the same class. I.E. There can be many warning on one webpage.

The "." is how you tell CSS "this is a class name."

Naming Classes and IDs

  • Do describe what it is for
  • Do not describe what it looks like
  • Use a name that will make sense to you in the future

Bad Class and ID Names

  • bigText
  • red
  • leftColumn
  • underlined
  • style7

Better Class and ID Names

  • header
  • footer
  • sidebar
  • alert
  • copyright
  • navigation

Selector: Position


  p em {
    color: yellow;
  }

Selects all em elements that are within a paragraph


  <p>This is <em>important.</em></p>

The associated HTML.

Property Values

Each property can have one or more comma separated values.


  p {
    color: white;
    background-color: red;
    font-family: Arial, sans-serif;
  }

Property: Color

The color property changes the color of the text.

p { color: red; }

p { color: #ff0000; }

p { color: rgb(255, 0, 0); }

Color name

Hexadecimal value

RGB value

The 17 standard colors are:

  • aqua
  • yellow
  • blue
  • fuchsia
  • gray
  • grey
  • green
  • lime
  • maroon
  • navy
  • olive
  • purple
  • red
  • silver
  • teal
  • white
  • black

Property: Background-color

The background-color property changes the color of the background.

p {
  background-color: black;
}

p {
  background-color: #000000;
}

p {
  background-color: rgb(0,0,0);
}

CSS references

These will be useful throughout the class.

Let's develop it

  • Edit your css file to change colors
  • Try some id and class selectors to use different colors
  • Feel free to edit your HTML, if needed

Let's develop it

Hint: not sure which colors to pick? Check out the color scheme designer.

Property: Font-family

The font-family property defines which font is used.

p {
  font-family: "Times New Roman";
}

p {
  font-family: serif;
}

p {
  font-family: "Arial", sans-serif;
}

Specific font name

Generic name

Comma-separated list

Property: Font-size

The font-size property specifies the size of the font.

p {
  font-size: 12px;
}

p {
  font-size: 1.5em;
}

p {
  font-size: 100%;
}

Pixels

"em"

Percentage

Property: Font-weight

The font-weight property specifies the weight of the font.

p {
  font-weight: normal;
}

p {
  font-weight: bold;
}

p {
  font-weight: 700;
}

Property: Fonts (shorthand)


  p {
    font-style: italic;
    font-weight: bold;
    font-size: 10px;
    font-family: sans-serif;
  }
OR 

  p {
    font: italic bold 10px sans-serif;
  }

Let's develop it

  • Go to Google Web Fonts
  • Select a font and click "quick use"
  • Check the font styles you want
  • Add the standard code to <head> in your html file
  • Edit your css file to use the font
  • Use the web developer tools to check your work

Cascading

Styles "cascade" down until changed


  p {
    color: blue;
    font-family: 'Helvetica';
  }
  .warm {
    color: red;
  }
  #special {
    font-family: Arial;
  }



  <p>Paragraph</p>
  <p class="green">Paragraph</p>
  <p class="warm">Paragraph</p>
  <p class="warm" id="special">Paragraph</p>

CSS Properties

Many CSS properties have self-explanatory names:

  • background-color
  • font-family
  • font-size
  • color
  • width
  • height

Comprehensive list of all CSS properties

Comments

You can add comments to your code that will not be seen by the browser, but only visible when viewing the code.


  /* comments go here */

Comments can be used to organize your code into sections so you (or someone else) can easily understand your code. It can also be used to 'comment out' large chunks of code to hide it from the browser.


  /* Main styles */
  ...

  /* Styles for the footer */
  ...

CSS Reset

CSS resets are used to set all styles to the same baseline

This is useful for eliminating inconsistencies across browsers

Let's develop it

  • Go to http://meyerweb.com/eric/tools/css/reset/reset.css
  • Save the file to your project folder as reset.css
  • Link to reset.css in your <head>
  • Make sure you link to reset.css before your stylesheet (otherwise it will reset your styles too!)
  • View the page in your browser and note the differences

Let's develop it

Continue adding CSS and HTML to your page as time allows.

Questions?

?