GDI Logo

Intro to HTML/CSS

Class 2

Quiz Part 1

Which tag is used to create a link to another page?

  1. <p>
  2. <link>
  3. <a>
  4. <america>
Answer: <a>

Quiz Part 2

What are the two tags that nest directly within the <html> tags?

Answer: <head> and <body>

Quiz Part 3

What is it called when you have a 'tag' + 'content' + 'closing tag'?

Answer: An HTML Element

Let's Review

Two elephants interacting

Photo credit: Ginable cc

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.

CSS: What can it do?

All colored text, position, and size

Screenshot of homepage

CSS: What does it look like?

Screenshot of CSS

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.

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>
  • Shared resource for several pages.
  • Reduced file size & bandwidth
  • Easy to maintain in larger projects.
  • Preferred by nerds everywhere!

Let's develop it

  • In the same foolder you used last week, create a new file called style.css
  • Add a link to the file in the head of your HTML file
  • Add the CSS rule below to the CSS file:
body {
  background-color: yellow;
}

CSS Syntax

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

Declarations end with a semicolon

Declaration groups are surrounded by curly brackets.

selector {
  property: value;
  property: value;
  property: value;
}

Selector: Element

p {
  property: value;
}

Selects all paragraph elements.

img {
  property: value;
}

Selects all image elements.

CSS Color Values

Your browser can accept colors in many different ways:

  • Color name (ex. red)
  • Hexadecimal value (ex. #FF0000)
  • RGB value (ex. rgb(255, 0, 0))
  • HSL value (ex. hsl(0, 100%, 100%))

The 17 standard colors are: aqua, black, blue, fuchsia, gray, grey, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

Property: Color

The color property changes the color of the text.

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

Property: Background-color

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

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

Let's develop it

  • Add some rules to your css file
  • Change the font color and background color of different types of elements
  • Try selecting links, paragraphs, and lists

Property Values

Each property can have one or more comma separated values.

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

Property: Font-family

The font-family property defines which font is used.

p {
  font-family: "Times New Roman";
  font-family: serif;
  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;
  font-size: 1.5em;
  font-size: 100%;
}

Pixels

"em"

Percentage

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

  • Change the fonts of your page
  • Try changing the font sizes and styles for different elements

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.

Selector: Position

  • Position selectors are more specific
  • They look for elements inside other elements
  • We seperate nested elements with a space

Selector: Position

So this code:

ul li a strong{
  color: purple;
}

Means "find a strong tag inside a link inside a list item in an unordered list"

<ul>
  <li><a href="programs.html">Our <strong>program</strong></a></li>
</ul>

Let's develop it

  • In your CSS file, try a position selector
  • Remember, you need to look for an element inside another element

Reusing code

As a general coding principle, Don't Repeat Yourself.

To reuse CSS, we use IDs and classes.

Recycle symbol

Photo credit: Yo Mostro cc

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 warnings on one webpage.
The "." is how you tell CSS "this is a class name."

Selector: ID

#footer {
  property: value;
}

Selects all elements with an id of "footer".

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

The associated HTML.

Selector: Class

.warning {
  color: red;
}

Selects all elements with a class of "warning".

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

The associated HTML.

Let's develop it

  • Add an ID and class to a your HTML
  • Add CSS rules to target these elements

Cascading

Styles "cascade" down until changed

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

<p>Paragraph</p>
<p class ="red">Paragraph</p>
<p class = "red" id ="special">Paragraph</p>

Cascading priority

Your browser assigns different priorities to CSS depending on the type of selector.

  1. Important! - Most Important
  2. In line CSS
  3. ID
  4. Class
  5. Element - Least Important

Cascading priority

Your browser also assigns priority based on the specificity of the selection. More specific selectors have higher priority.

.main .sale .clearance p{ //Most specific
  color: red;
}
.header .title p{
  color: green;
}
.footer p{ //Least specific
  color: blue;
}

Cascading priority

The tie-breaker is position. Rules lower in the file overwrite rules higher in the file

a{
  background-color: yellow;
}
a{
  background-color: teal;
}
a{ //This rule wins
  background-color: black;
}

CSS Properties

Many CSS properties have self-explanatory names:

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

Comprehensive list of all CSS properties

Questions?