1) Please download Class 04 Starter Code

2) Move travel-bucket-list into homework

Class #04


Intermediate CSS


Classes and ID's

Grouping Selectors

The Box Model

The Display Property: block vs. inline

<span> and <div>


• Three more weeks until final-project ideas are due!

• Please reach out sooner than later

• Happy to discuss ahead of schedule



Q: Difference between display: inline & display: inline-block

A: Will learn this class, and next!

Q: With multiple pages, what is best practice for styling the body: style the body directly, or use a class?

A: Beware when styling the body! Limit styles and use classes when appropriate.

Q: How to style/build a <button>?

A: CodePen

Homework Feedback

1. Remember to indent all child elements

2. Files, images, and folders should be lowercase



3. Make sure to clean up your code - avoid random empty lines

I have multiple <p> tags.

How do I style each differently?

Classes and ID's

Applying Element ID's

• ID's are attributes (options to specify element behavior)

• An ID can only be used one!

• Identify the element for styling/scripting

• Cannot contain spaces

	<p id="important title">Hello, World!</p>

	<p id="important-title">Hello, World!</p>

Targeting Element ID's

• To style the following ID:

	<p id="important-title">Hello, World!</p>

• Use # + the ID's name:

	#important-title {
	  color: red;

CodePen Exercise

Applying Element Classes

• Classes are also attributes

• Assigned to multiple HTML elements per page

• Identifies the elements for styling/scripting

• Like the id attribute, class cannot contain spaces

	<p class="hello">Hello, World!</p>

	<p class="hello">Hello, Mars!</p>

	<p class="hello">Hello, Jupiter!</p>

Targeting Element Classes

• To style the following classes:

	<p class="hello">Hello, World!</p>

	<p class="hello">Hello, Mars!</p>

• Use . + the class's name:

	.hello {
	  color: pink;

• Add HTML classes to the previous CodePen

ID's vs. Classes

• General rule:

⇒ Use id when you are styling ONE specific element

⇒ Use a class when you are styling a GROUP of elements

• Note:

⇒ Elements cannot have more than one ID

⇒ Elements can have multiple classes

Grouping Selectors

Grouping Selectors

Is there anything wrong with this CSS:

	h2 {
	  color: red;

	.some-class {
	  color: red;

	#some-title {
	  color: red;

No - nothing is wrong! However, is anything being repeated?

Grouping Selectors

• Share CSS with multiple selectors

• Helps reduce repetitive code

• Group selectors using a comma separator:

	h2, .some-class, #some-id {
	    color: red;

CodePen Exercise

The Box Model

The Box Model

• Every HTML element is a box

• Each box is composed of:





• Awesome box model demo

The Box Model
The Box Model: Content


⇒ The text (and other elements) within the element's tags

The Box Model: Padding


⇒ Space between the content and border

The Box Model: Border


⇒ The border around the element

The Box Model: Margin


⇒ Space between the border and other elements

Box Model Codealong

1. Open a CodePen

2. Create a <div></div>

3. Add content to it - type lorem and hit tab

4. Apply a background color to it

The Box Model: Borders

• Borders consist of three properties:

border-width: a pixel-based value for width

border-style: the style (solid, dotted, dashed, double)

border-color: the color

• Apply all three properties via shorthand technique:

	p {
	  border: 2px solid black;

The Box Model: Padding

	// Method One: targets each side individually
	p {
	  padding-top: 5px;
	  padding-bottom: 5px;
	  padding-right: 5px;
	  padding-left: 5px;

	// Method Two: starts at top, moves clockwise: right, bottom, left
	p {
	  padding: 5px 5px 5px 5px;

	// Method Three: (top/bottom) (left/right)
	p {
	  padding: 5px 5px;

	// Method Four: targets all four sides (top, right, bottom, left)
	p {
	  padding: 5px;

The Box Model: Margin

• Margin follows the same syntax as padding:

	p {
	  margin-top: 5px;
	  margin-bottom: 5px;
	  margin-right: 5px;
	  margin-left: 5px

	p {
	  margin: 5px 5px 5px 5px;

	p {
	  margin: 5px 5px;

	p {
	  margin: 5px;

Box Model Exercise


5 minute break

The Display Property

The Display Property

• All HTML elements are either:



• Controlled by the CSS property: display

display: block;

display: inline;

• A third option will be discussed later: inline-block

Block Elements

• Take up 100% of the width of their parent

• Stack like blocks

• Can assign margin and padding

• Can set height and width

Block Elements
Block Elements

• Examples of block elements:

<h1> thru <h6>




Inline Elements

• Take up the width of their content

• Do not stack - renders inline, like this text

• Can assign padding

• Can only assign left and right margin

• CANNOT set height and width

Inline Elements
Inline Elements

• Examples of inline elements:




The Display Property

Easiest way to explore the display property is to tinker with the background color of various elements:

Code Pen Exercise

<span> & <div>

<span> & <div>

<span> is a generic inline element

<div> is a generic block element


• Provide structure for content they wrap


• The generic inline element

• Hooks onto inline words or phases within content

• Can apply classes and ID's for styling

CodePen Exercise


• The generic block element

• Used to organize other tags into blocks of content

• We use it for layout EVERYWHERE

CodePen Exercise

A note on centering...

Centering Block and Inline Elements

• Center inline elements by applying to their parent:

text-align: center

• Center block elements by setting:

1) a width on the element

2) margin: auto;

• Apply styling to the previous CodePen


1. Open the travel-bucket-list in SublimeText

2. Build spec.png in index.html

3. Make sure index.html and styles.css are linked!

4. You will need to use:

⇒ Relative links for the images




⇒ Classes, ID's, grouped selectors

On Deck: Class #05 - Introduction to Page Layout

• CSS Specificity

• Chrome Developer Tools

• Browser Variances

• Semantic HTML

Exit Tickets!