HTML CSS 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

  • Find the CSS folder, locate the default.css and the layout.css
  • Add a link to the file in the head of your HTML file.
  • Create a new custom.css file and save it in the css folder (Don't worry about adding content yet!). Link to this new file underneath the rest of the css links in the head tag

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 class "Button" to your LinkedIn and Email link
  • Add an new ID and class to a your HTML. For example, add an class to the first row in your education section, and give it a different background color.
  • 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?