CSS & the Box Model

Firmidable Website Training

HTML On Its Own Is Ugly.

All it does is semantically categorize text.

CSS Ain't Easy

This might be the most difficult part of coding for websites.

HTML is straightforward.

JavaScript and PHP might be a full coding language, but mostly involves manipulating HTML & CSS.

What's So Hard About CSS?

So I Updated Your HTML a little


<header>
	<h1>Douglas Thomas</h1>
	<!-- SOME STUFF -->
</header>
		

<div id="main">
	<aside>
		<p><img src="img/me.jpg" alt="Douglas Thomas"></p>
	</aside>
	<section>
		<h2>My Job</h2>
		<!-- SOME STUFF -->
	</section>l
	<section>
		<h2>My Projects</h2>
		<!-- SOME STUFF -->
	</section>
</div>

Adding CSS to your HTML Page

link tags are HTML links that are only followed by the browser.

The type attribute tells the browser what kind of file to expect.


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

Your First CSS

Right-Click on the Remote Site Current Directory pane > Create New File

Call this file css.css.

Right-Click on css.css > View/Edit

What Is CSS?

Cascading Style Sheet

A file ("sheet") with two main properties:

Your First CSS: Font & Typography


body {
	font-family: Tahoma,sans-serif;
	font-size: 18px;
	line-height:1.25;
}

Your First CSS: CSS Selector


body {
	
	
}

CSS selectors choose what to style

In this case, we're styling the body element

To overcomplicate it: Specificity

Your First CSS: CSS Properties


     {
	font-family:	
	font-size:	
}

There are a TON of CSS Properties. Just like HTML, Google it!

CSS Properties are often set to inherit the parent element's value

Your First CSS: Values


     {
	           : Tahoma,sans-serif;
	         : 18px;
}

Values provide what the CSS will look like.

When you Inspect Element, you can look at possible values

CSS Units

Two kinds of units: Relative & Absolute

CSS Units: When to Use What?

I would suggest using relative units as much as possible.

Relative units tend to be valuable for fluid & responsive layouts.

Absolute units are good for lining up strictly with a mockup.

Units calculate into pixels when rendered.

Element Types

Two kinds of HTML element: Inline & Block

Element Types

Two kinds of HTML element: Inline & Block

What Block Means

Block means it has a set width and height.

Block can also set margin, padding, and borders.

In display: block, margin, padding & borders substract from the width and height of the element.

Having Trouble With Blocks?

I can haslayout?

Add overflow:hidden

In display: block, margin, padding & borders substract from the width and height of the element.

What Block Means: Adding borders

In display: block, margin, padding & borders substract from the width and height of the element.

Note that interior elements can be set to the width of the outer element.

Styling Our Page: header


header {
    width: 80%;
    padding: 1em 10%;
    background-color: skyblue;
}

Makes the header element full-width (10% + 80% + 10%)

Adds a little top and bottom margins for breathing room - 1em = 18px

sets the background-color to skyblue

Color

3 main ways to set color:

I use names for unambiguous colors like black and white but almost otherwise always hex.

RGBa is pretty neat because it can set opacity

Styling Our Page: div#main


div#main {
    width: 80%;
    padding: 1em 10%;
    background-color: lightsteelblue;
}

Almost literally the exact same thing. Patterns are the key to solid CSS design.

Note that the properties are in the same order - this is for organization

Styling Our Page: Alternate Method


header, div#main {
    width: 80%;
    padding: 1em 10%;
}
header { background-color: skyblue; }
div#main { background-color: lightsteelblue; }

Depends on how you want to organize.

Styling Our Page: aside


aside {
    width: 15%;
    margin-right: 5%;
    float: left;
    clear: left;
}

Sets a width and margin-right totaling 20% of parent element

floats the aside left.

Makes sure there is no content to the left of the aside, i.e. it is clear.

float & clear

A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or “floated” or “floating” box) is that content may flow along its side (or be prohibited from doing so by the “clear” property). Content flows down the right side of a left-floated box and down the left side of a right-floated box.

Sort of like pressing Text Wrapping > Square in Word.

clear moves a floated element past another floated element. This allows elements to stack.

Would you like to know more? More than you'd want to know.

Styling Our Page: Making the Image Fit


aside img {
    width: 100%;
}

You might have noticed your image going way outside your column.

By setting the image's width to 100%, you make sure that it only fills in inside of your parent element.

We add this right below the aside to keep things organized by section.

Styling Our Page: float the section


section {
    width: 80%;
    float: right;
    clear: right;
}

We set the sections to 80% width - (100%-15%-5%) to take into account the left aside.

To clean up the margins, we float the section elements right.

Since there's nothing to the right, the clear doesn't do much, but it in two-column layout, this makes sure nothing goes awry.

Styling Our Page: float Breaks Stuff


div#main {
    width: 80%;
    padding: 1em 10%;
    background-color: lightsteelblue;
	overflow: hidden;
}

Float does some odd things. The first is that it collapses parent elements to make sure text-wrapping acts correctly.

It's often necessary to make a small edit to the parent element to make it work.

The dirtiest solution is adding overflow: hidden.

Styling Our Page: Getting Fancy With Pseudoclasses


a:hover {
	text-decoration:underline overline;
}

Lots of elements take "pseudoclasses" like target, hover, before, etc.

These are a little inconsistent, but overall work well across browsers.

Styling Our Page: Clean up the body


body {
	font-family:Tahoma,sans-serif;
	font-size: 18px;
	line-height:1.25;
	margin:0;
	padding:0;
}

Every element has a "user-agent-style" that a browser adds on.

In most cases, it adds a little margin to the body element.

Even though we didn't set it, we have to remove it.

Another example of this is a blue border around image links in Internet Explorer.

Styling Our Page: Dealing With Smaller Screens


@media (max-width:600px) {
	body { font-size: 16px; }
	header, div#main {
		width:90%;
		padding: 1em 5%;
	}
	aside, section {
		width:100%;
	}
}

This is the key to "Responsive" and "Adaptive" design: the screen changes, so we change how the content flows.

Dealing With Smaller Screens: the @media Query


@media (max-width:600px) {
	
	
	
	
	
	
	
	
}

The @media query only fires if the screen is less than 600px. Above that it doesn't happen.

To maintain the Cascade, it's easier to place this as the end of the file

Dealing With Smaller Screens: the @media Query


	
	body { font-size: 16px; }
	header, div#main {
		width:90%;
		padding: 1em 5%;
	}
	aside, section {
		width:100%;
	}

Otherwise, it's just normal CSS

Week 2 Recap

  1. We started with a slightly more complicated HTML.
  2. We set the basic typography for the page.
  3. We learned about relative & absolute units.
  4. We learned the difference between block & inline elements.
  5. We learned the CSS Box Model.
  6. We styled our page to be a bit more visually-friendly.
  7. We added a "psuedo-class" to an element's styling.
  8. We cleaned up a basic user-agent-style.
  9. We corrected for screen width suing media queries.

Week 2 Homework

Have some fun with this page.

Change the colors - to change text, you can use color on any element.

Add elements you think are relevant. Add images and links.