Beginning HTML and CSS
Class 3
Welcome!
Girl Develop It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction.
Some "rules"
- We are here for you!
- Every question is important
- Help each other
- Have fun
Homework Review
- Create a CSS file and link it
- Put borders on your images
- Headings should be in Georgia
- P's in Arial
- Footers should have centered text
- Extra credit: Background image
(how to cover entire background) - Extra credit: Centered images
- Extra credit: Rounding image corners
HTML Refresher Quiz
- Write out a paragraph element complete with tags.
- Within your <html></html> tags, which are the two nested tags required for a website?
- Write out a complete link (anchor) element. Hint: needs an 'href'.
- What is the attribute we add to an element to select with CSS that can be used with multiple elements?
- Same as above, but only one element?
HTML Refresher Quiz: Answers
<p>This is a paragraph</p>
<head></head> and <body></body>
<a href="http://google.com/">this goes to google</a>
class
id
Block & Inline Elements, review
- Two HTML types: Block and Inline.
- After block elements, browsers render a new line.
- Block elements: p, h1, ul, li, almost everything else
- Block elements contain inline elements
- Inline elements: img, a, br, em, strong
Div and Span
Two new HTML elements!
Style multiple elements the same way by grouping them together.
<span> creates an inline element.
<div> creates a block element.
<div>The quick <span class="brown">brown fox</span> jumps over the lazy duck?</div>
Quick CSS Quiz
How do we write a 'class' selector in CSS?
<div>The quick <span class="brown">brown fox</span> jumps over the lazy duck?</div>
How do we center text?
How do we add a border to something?
Quick CSS Quiz
.brown { color: brown; }
selector { text-align: center; }
selector { border: 2px solid black; }
Grouping elements with div
The div tag is a great way to apply styles to a bunch of elements all at once.
The div tag is used everywhere to group elements together into sections.
For example:
<div class="right">
<p>These paragraphs can be styled together</p>
<p>By using a css rule for class "right"</p>
</div>
<p>But, I'll still be aligned to the left. I'm lonely :/ </p>
DIV group in action
.right {
text-align: right;
}
<div class="right">
<a href="http://twitter.com/girldevelopit">Twitter!</a> |
<a href="http://facebook.com/girldevelopit">Facebook!</a>
</div>
<a href="http://girldevelopit.com">Website!</a> |
<a href="http://girldevelopit.tumblr.com">Blog!</a>
See? How fun!
Span
Span is used to apply a specific style inline
.yellow {
color: yellow;
}
<p>Paragraph with <span class ="yellow">yellow</span> text.</p>
Paragraph with yellow text.
Pseudo-classes, more CSS for links
Changing the format of a link when you hover over it is accomplished by using pseudo-classes.
CSS pseudo-classes are used to add special effects to some selectors.
selector:pseudo-class
{
property: value;
}
a:link
{
text-decoration: none;
}
Pseudo-classes, more CSS for links
a:link { color:#FF0000; } /* unvisited link */
a:visited { color:#00FF00; } /* visited link */
a:hover { color:#FF00FF; } /* mouse over link */
a:active { color:#0000FF; } /* selected link */
Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!
Note: a:active MUST come after a:hover in the CSS definition in order to be effective!
Let's Develop It
1. Start dividing your links and paragraphs into divs.
2. Add pseudo classes to your links.
3. Add text-align to your text.
Bonus: Add text-decoration: none; to one of your new link classes and see what it does.
Box Model
Padding
Space between the border and the content
Border
The edge around the box, specified as "thickness, style, color."
Margin
The transparent area around the box that separates it from other elements.
Padding
15 pixels on all sides
p { padding: 15px; }
p { padding-top: 10px; }
p { padding: 10px 5px 3px 5px; }
Padding
Four values
p { padding: top right bottom left; }
Two values
p { padding: top/bottom right/left; }
One value
p { padding: all; }
Padding
div { padding: 10px 20px 30px 40px; }
Box Model, acronym!
Easy to remember:
The box model is Trouble
The box model is TRBL
Top Right Bottom Left
Let's take a minute to try some if you all want!
p { padding: 30px 30px 30px 30px; }
Border
A solid red border
p { border: 1px solid #ff0000; }
A thick dotted black top border
div { border-top: 4px dotted #000000; }
Two diļ¬erent border styles
address { border-top: 1px solid #ff0000; }
blockquote { border-bottom: 4px dotted #000000; }
Border - Other Properties
p { border-width: 10px; }
p { border-style: dashed; }
p { border-color: #666666; }
You can specify each property separately, or all three together.
Padding:
p { padding: 10px 20px 30px 40px; }
Margin
15 pixels on all sides
p { margin: 15px; }
10 on top, 5 on right, 3 on bottom, 5 on left
p { margin: 10px 5px 3px 5px; }
10 pixels on top
p { margin-top: 10px; }
Auto Margin
If a margin is set to auto on a box that has width, it will take up as much space as possible.
CENTERED
div { margin: auto; }
div { width: 300px; } /*Must have a specified width to work*/
FLUSH-RIGHT
div { margin-left: auto; }
div { margin-right: 5px; }
div { width: 300px; } /*Must have a specified width to work*/
Exercise
1. Try to center your stuff using auto margin
2. Start adding padding, borders and margins to your divs to work more on styling
Cheat sheet:
div { padding: 10x 5px 10px 5px; }
div { margin: 15px; }
div { border: 3px dotted red;}
Try it on other block elements: p, blockquote, address
Questions?
Quiz
How would I add a border to the top and bottom of this paragraph?
<p id="my-paragraph">This is a really great paragraph</p>
#my-paragraph {
border-top: 1px solid black;
border-bottom: 1px solid black;
}