Intro to HTML/CSS
Section 3
Quiz Part 1
What are the three parts that make up The CSS Rule?
Quiz Part 2
What is the shorthand for the CSS font property?
p {
font: style weight font-family;
}
Quiz Part 3
What does a complete link (anchor) element look like?
<a href="http://google.com/" target="_blank" >This goes to google</a>
Let's Review
Grouping elements with div
- The div tag is used everywhere to group elements together into sections.
- You can wrap groups of elements in a div to style them differently.
IDs vs. Classes
ID -- Should only apply to one element on a webpage, i.e., a webpage only has one footer.
The "#" is how you tell CSS "this is an id."
Class -- Lots of elements can have the same class, i.e., There can be many warnings on one webpage.
The "." is how you tell CSS "this is a class name."
Grouping elements with div, cont.
.align-right{
text-align:right;
color: purple;
font-weight: bold;
}
<div class="align-right">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<p>Sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
<p>Magna aliqua. Ut enim ad minim veniam.</p>
<p>Quis nostrud exercitation ullamco.</p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit
Sed do eiusmod tempor incididunt ut labore et dolore.
Magna aliqua. Ut enim ad minim veniam.
Quis nostrud exercitation ullamco.
Enough Talk: Let's Code!
Let's add some styling your site specific to each div class in your HTML.
Style the content in the header, content area, and footer to have different CSS properties.
ex. Change the background color of your header div.
Inline vs Block
So far, we have mostly seen "block" elements. They appear on the next line, like paragraphs and divs.
There are also "inline" elements. They appear on the same line that they are written on.
Block & Inline Elements
- CSS divides HTML into two types: inline and block.
- After block elements, browsers render a new line.
- Inline elements: img, a, br, em, strong, span
- Block elements: p, h1, ul, li, almost everything else
HTML5
HTML5 offers new elements for better document structure and semantics
Some of the most commonly used new tags include:
<header></header>
<nav></nav>
<article></article>
<section></section>
<main></main>
<footer></footer>
A full list can be found here.
Sample Code: HTML5
A page divided using HTML 5 elements might look like this:
<!doctype html>
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<header>
<h1>My Page Title</h1>
</header>
<main>
<p>The main content</p>
</main>
<aside>
<p>Some stuff in a sidebar</p>
</aside>
<footer>
<p>Copyright me</p>
</footer>
</body>
</html>
Element: Span
- Inline element. Each new span is rendered next to each other & only wraps when it reaches the edge of the containing element.
- Can be used to apply styles to text inline so as not to break the flow of content.
Span
Span is used to apply a specific style inline
.highlight{
color:teal;
}
<p>Paragraph with <span class="highlight">teal</span> text.</p>
Paragraph with teal text.
Enough Talk: Let's Code!
Let's add some spans to our content to help highlight some text.
Pseudo-classess
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.
Syntax:
selector:pseudo-class{
property:value;
}
Example:
a:link{
text-decoration: none;
}
Pseudo-classes
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover, a:focus {color:#FF00FF;} /* mouse over or select with keyboard*/
a:active {color:#0000FF;} /* selected link */
a:hover MUST come after a:link and a:visited in the CSS definition to be effective!
a:active MUST come after a:hover in the CSS definition to be effective!
Enough Talk: Let's Code!
Add pseudo classes to your links
The Box Model
Box Model
All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout.
The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.
Padding
Space between the border and the content
Padding
Notice that the padding adds to the total width of the box.
Padding
15 pixels on all sides
padding: 15px;10 pixels on top only
padding-top: 10px;10 on top, 5 on right, 3 on bottom, 5 on left
padding: 10px 5px 3px 5px;Padding
Four values
padding: top right bottom left;Three values
padding: top right/left bottom;Two values
padding: top/bottom right/left;One value
padding: all;Padding
padding: 10px 20px 30px 40px;
Enough Talk: Let's Code!
Try adding some padding to the div with the class that has your main content.
Remember: you can write out "padding-left", "padding-right", etc. or you can use shorthand declarations.
Border
The edge around the box.
Border
Borders are specified as "thickness, style, color."
A solid red border
border: 1px solid #ff0000;A thick dotted black top border
border-top: 4px dotted #000000;Two different border styles
border-top: 1px solid #ff0000;
border-bottom: 4px dotted #000000;
Border - Other Properties
border-width: 10px;
border-style: dashed;
border-color: #666666;
You can specify each property separately, or all three together.
Enough Talk: Let's Code!
Try adding a border to your <header> element as well as some padding.
Experiment with different border styles, thicknesses, and positions.
Margin
The transparent area around the box that separates it from other elements by creating whitespace. It can be used to horizontally center an element as well.
Margin
15 pixels on all sides
margin: 15px;10 on top, 5 on right, 3 on bottom, 5 on left
margin: 10px 5px 3px 5px;10 pixels on top
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
margin: 0 auto;
width: 200px;
This box will be centered.
Wrappers
Wrappers are a good way to center content if the screen width is wider than your content.
.wrapper {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
Enough Talk: Let's Code!
Try adding some margin to your <footer> element.
Notice how margin pushes the footer away from other content but the element stays the same size;
Then center your entire document in the browser by adding a wrapper class with auto margin, width and a max-width.
Placing elements side by side
If you want two block level elements to be side by side, you need to float both elements..
width: 25%;
float: left;
width: 75%;
float: left;
Float
- "Floating" an element takes it in the normal flow, as far to the left or right of it's containing element as possible.
- Any other elements, such as paragraphs or lists, will wrap around the floated element.
- Always specify a width when floating an element, otherwise the element is likely to take up the whole page and not appear floated.
- You can specify a) whether an element is floated or not, and b) which side it floats on.
This is a long paragraph text that is next to an image that is floating to the left. This is an image of Baby Groot. Groot was a Flora colossus from Planet X, the capital of the branch worlds. The sapling that would come to be known as "Groot" came from an "Enobled Sap-line" and gifted in quasi-dimensional super-positional engineering...at least, according to Maximus the Mad. Groot did not get along with his fellow saplings, instead preferring the company of the "Maintenance Mammals" who the other saplings treated with prejudice. After Groot killed another sapling to defend a maintenance mammal it was brutalising, as well as releasing a human subject that was kidnapped for scientific purposes, he was exiled of the planet by the "Arbor Masters". With no place to go, Groot set to explore other galaxies.
Clear
- Clearing tells the element on which side (right, left, both) other elements cannot appear.
- If you had an image floated left, and you did not want the paragraph to appear next to it, you would add clear: left; to the paragraph.
- Clearing both sides makes sure floats don’t flow past the clear element.
clear: right;
clear: left;
clear: both;
Clearfix
A clearfix is applied to pseudo-class :after of a div that contains two elements that are floating next to each other.
It's generally used in float layouts where elements are floated to be stacked horizontally.
Clearfix CSS
.wrapper:after {
content: '';
display: table;
clear: both;
}
Be sure to apply this to the div that is containing your two elements that are floating next to each other.
Enough Talk, Lets Code!
Let's float our side bar and content area so they are displayed next to each other.
Notice how the footer no longer is displayed correctly. Add a clearfix to your wrapper class that contains the floating divs.
Questions?
