HELLO
1) Please download Class 04 Starter Code
2) Move travel-bucket-list into homework
Class #04
09/26/2018
Intermediate CSS
• The Display Property: block vs. inline
• Three more weeks until final-project ideas are due!
• Please reach out sooner than later
• Happy to discuss ahead of schedule
Questions
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
1. Remember to indent all child elements
2. Files, images, and folders should be lowercase
My_Image.png ⇒ my_image.png
Index.html ⇒ index.html
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
• 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
// DO NOT DO THIS
<p id="important title">Hello, World!</p>
// DO THIS
<p id="important-title">Hello, World!</p>
• To style the following ID:
<p id="important-title">Hello, World!</p>
• 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>
• 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
• 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
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?
• Share CSS with multiple selectors
• Helps reduce repetitive code
• Group selectors using a comma separator:
h2, .some-class, #some-id {
color: red;
}
The Box Model
• Every HTML element is a box
• Each box is composed of:
⇒ content
⇒ padding
⇒ border
⇒ margin
• Awesome box model demo
Content:
⇒ The text (and other elements) within the element's tags
Padding:
⇒ Space between the content and border
Border:
⇒ The border around the element
Margin:
⇒ Space between the border and other elements
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
• 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;
}
// 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;
}
• 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
• All HTML elements are either:
⇒ block
⇒ inline
• Controlled by the CSS property: display
⇒ display: block;
⇒ display: inline;
• A third option will be discussed later: inline-block
• Take up 100% of the width of their parent
• Stack like blocks
• Can assign margin and padding
• Can set height and width
• Examples of block elements:
⇒ <h1> thru <h6>
⇒ <p>
⇒ <ul>
⇒ <li>
• 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
• Examples of inline elements:
⇒ <a>
⇒ <strong>
⇒ <em>
The Display Property
Easiest way to explore the display property is to tinker with the background color of various elements:
<span> & <div>
• <span> is a generic inline element
• <div> is a generic block element
• THEY PROVIDE NO INHERENT MEANING
• 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
• The generic block element
• Used to organize other tags into blocks of content
• We use it for layout EVERYWHERE
A note on centering...
• 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
⇒ padding
⇒ margin
⇒ text-align
⇒ Classes, ID's, grouped selectors
• CSS Specificity
• Chrome Developer Tools
• Browser Variances
• Semantic HTML