Week 3 | Feb. 18, 2015

CSS Box Model & Design Basics

Lesson Prep

  • Open: Class Website, GitHub, Slack & Sublime
  • In Sublime open your site: File > Open > yoursite.
  • In Terminal, cd into your site and use mkdir week3 to make a directory for your week 3 practice.
  • Next, cd
    • into week3 and use touch index.html to create the index page for week 3.
  • Check in Sublime to see that you've created all these correctly and double click week3/index.html to open.

Set Up Your Index

Paste the code below into your week3/index.html

<!DOCTYPE html>
<html>

<head>
  <title>Week 3 - CSS Practice</title>
</head>

<body>
  <div id="content">
    <h1>My First CSS Styled Page</h1>
    <hr />
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et arcu ultricies, vehicula urna ut, lacinia metus. Aenean ac ante odio. Nullam mollis scelerisque urna, eget interdum velit posuere vel. Nullam eu leo ac ipsum tristique scelerisque. Nullam lobortis consequat arcu, id maximus erat sagittis eget.
    </p>
  </div>
</body>

</html>

Your Site Should Look Like This:

Push Your Changes

Now that we're set up let's commit and push the changes to your repo.

  • git add -A
  • git commit -m 'added week 3'
  • git push origin master

The Box Model

Definition

Think of each element on your page as a box. The box model outlines the structure of each box or HTML element on your page, and various components available to you.

Example

Padding

The padding is the space between the content of your box and the border.

Margin

The margin is the space between the border and the content around the box.

Border

The border is the containing walls of the box.

CSS vs. IE

The original IE box model calculated the width property of an element by including both padding and the border. The CSS box model, which came into favor, calculates the width of the content only. However, this can be frustrating, so CSS introduced a property called box-sizing that allows you to revert to the IE model by defining box-sizing: border-box;

What Is CSS?

Definition

  • CSS stands for Cascading Style Sheets
  • CSS allows you to create style rules that specify how an element will appear on your page.
  • With CSS you can control things like positioning, color, fonts, borders, backgrounds, size and more.
  • CSS3, the latest version, also gives you control over transitions and keyframe animating abilities.

Example

h1 {
  margin-bottom: 12px;
  color: #fff;
}

Adding CSS to your page

There are three ways to apply CSS to your page.

1. Inline Styles

  • You can add a style attribute to any HTML tag, with the value being CSS styling.
  • EX: <div style="width:200px;"></div>
  • Using inline styles is generally not good practice, but you will alter them when you start using JavaScript.

2. External: In Your Head

  • Within your <head> include a set of <style></style> tags
  • Write your styles inside these tags.

3. External: Using <link />

  • Also goes in your <head>
  • Pulls in styles from a separate sheet on your server.
  • EX: <link rel="stylesheet" href="css/styles.css" />

External Practice

  • Use mkdir to create a directory in your root folder called css.
  • cd into your css directory and use touch styles.css to make your stylesheet.
  • Within your <head> write out a <link /> tag and include an href attribute to link to your stylesheet.
  • <link rel="stylesheet" href="css/styles.css" />
  • The rel attribute describes the relationship between the current document and the linked document.
  • TIP: Make two file windows in Sublime by selecting View > Layout > Columns: 2

Note

Anything you add into your stylesheet could also be added into the style tags in head.

But style tags do not go in your stylesheet - they are HTML, only CSS rules go in your stylesheet.

Style Syntax

The Selector

Indicates which element(s) the rule applies to

Common Selectors

  • Type/Tag matches an element name: h1, p, a
  • Class matches an element with that class value: .credit
  • ID matches the element with that ID value: #container

Other Selectors

  • Universal targets all elements on a page: *
  • Child matches an element that is the direct child of another: li > a
  • Descendant matches an element that is a descendant of anotehr element (not necessarily a direct child): p a

The Rule

  • Defines a set of styles for the selector element. There are two parts to each declaration.
  • Property: The aspect of the element you wish to style
  • Value: The setting you choose for that property

The Cascade

If two or more rules apply to the same element the one that takes precedence is either:

  • Last: If the selectors are identical the latter will take precedence.
  • Specificity: If one selector is more specific it will take precedence.

Inheriting Styles

Child elements, unless specificed in the styles, will usually inherit a style from their parent or container element. You can also declare inherit as a value to any property.

Colors

Common Color Properties

  • color is used for text colors
  • background-color defines the background color of an element
  • border-color is the color of an element's border

Color Values

  • There are currently 147 predefined colors that are recognized by most browsers, including black, blue and DarkCyan.
  • You can use HEX and RGBA values like #000 for black.
  • HEX values are more common but RGBA is useful if you want to define the opacity of a background color

How to Pick Colors

  • When picking foreground (text) and background colors, you want to make sure that there is enough contrast for text to be legible
  • Reverse, high contrast (like white text on a black background) should not be used for large blocks of text because it strains the eye.

Exercise

Add the following to your page in your <style> tags. Make sure to be specific about the tags you are targeting.

  • A background-color to your body (you can choose from here)
  • A text color for your headline and body text
  • Make the border-color of the hr tag black

Add/Commit/Push Your Work

  • git add -A
  • git commit -m 'added colors'
  • git push origin master

Fonts

Common Font Properties

  • font-family defines a cascading font stack starting with the preferred font, then fallback fonts in case the browser doesn't recognize the first. Ex: font-family: arial,helvetica,sans-serif;
  • font-size can be in pixels or ems
  • font-weight normal, light, bold
  • font-style normal, italic, oblique

Types of Fonts

  • Serif fronts have extra details (serifs) on the ends of the main strokes of the letters
  • Sans-Serif have straight ends to letters
  • Monospace means each letter has the same width

More Text Properties

  • text-transform
  • text-decoration
  • text-align
  • text-indent
  • line-height

Exercise

Add the following rules to your page styles (choose fonts here or use Google):

  • Using font-family a sans-serif font for your headline and a serif font for your body text
  • Using font-size make your fonts both both the headline and body text larger (check your console for the default)
  • At least one of the following: text-transform, text-decoration, text-align

Add/Commit/Push Your Work

  • git add -A
  • git commit -m 'added fonts'
  • git push origin master

Psuedo Elements

Can be added to the end of your selector for more control.

Examples

  • :first-letter and :first-line
  • :hover and :active for links

Box Styling

This references styling the parts included in the box model.

Size Properties

  • width, min-width, max-width defined in pixels
  • height, min-height, max-height defined in pixels
  • These properties can also be set to percentages of the width and height of the parent or container element.

Overflow

A property that controls what happens to content that doesn't fit inside of the box. By default, overflow: visible;

Box Margins

  • Rule: margin (set in pixels or percentage)
  • Specific sides: margin-top, margin-right, margin-bottom, margin-left
  • Set all sides at once: margin: 10px;
  • Collapse side styles: margin: 5px 0px 10px 5px; going clockwise from the top side to the left side.
  • To center a box, you can set margin: 0 auto;

Box Padding

Set exactly like margins, except the property name is padding

  • Rule: padding
  • Specific sides: padding-top, padding-right, padding-bottom, padding-left
  • Set all sides at once: padding: 10px;
  • Collapse side styles: padding: 5px 0px 10px 5px;

Box Border

  • border to sell all sides or specify border-top, border-right, border-bottom or border-left
  • You can also set border-width in pixels, border-style and border-color.
  • border-radius is CSS3 property that allows you to create rounded corners. Set border-radius: 10px;.

Box Display

  • You can use the display property to specify whether the box should be visible or hidden
  • You can also set the property to block or inline to, for example, make an inline element have the properties of a block element.

Exercise

  • Add a width property to your content container (targeting the id of the div)
  • Make it no more than 700px.
  • Add a background-color.
  • Add another property to content for margin to center: margin: 0 auto;

Add/Commit/Push Your Work

  • git add -A
  • git commit -m 'added box'
  • git push origin master

Comments in CSS

Same principle as in HTML, you use these to write notes to yourself or anyone who is looking at your code.

/* CSS Comment Here */

Add Author Info to Styles

  • Inside CSS comments on your external stylesheet, type:
    Website: SITE NAME v.1
    Author: YOUR NAME

Add/Commit/Push Your Work

  • git add -A
  • git commit -m 'added author info'
  • git push origin master

Assignments

Readings

Slack Post

Pick at least one story you've read/watched/interacted with this week and post it in the class Slack with a sentence or two about what you like or didn't like about it. It should be a piece that you appreciate beyond the topic or how well it's written (though that counts too!): Does it integrate photos well? Do you think it's confusing to use? Is it too bogged down with video? Did you like the way the chart explained a confusing topic?

Choose Colors & Fonts

  • Pick a color theme for your site. Choose at least 3 colors (backgrounds, text, links) using a tool like the Kuler Color Wheel.
  • Decide on complimentary serif and sans-serif font stacks (refer to slide 7 for font-family example. Use tools like CSS Font Stack and Google Fonts. Your font stacks should have three fonts each: Your ideal font, a fallback, and a generic serif or sans-serif declaration.

Create Rules

Create rules for your color and font choices. These will be the starting points for your project (you can always change them later).

For example, if you want the background of your page to be blue, you would write:

body{ background-color: blue; }

Add/Commit/Push your changes and send me a DM in Slack with the link to the stylesheet on GitHub.

If you're feeling brave...

Use these properties to further perfect your design:

  • rgba() as a value for color or background-color
  • box-shadow or text-shadow
  • font-smoothing
  • letter-spacing

Have a great week!