Structure & CSS – The basics – Divs
Structure & CSS – The basics – Divs
0 0
Wounded-Warrior-Part-3
On Github rwagner00 / Wounded-Warrior-Part-3
Structure & CSS
The basics
Ryan Wagner
Who is this guy?
- Engineer
- Front End Developer
- Worked on small, personal sites and large enterprise level sites.
- Sometimes I teach CSS classes.
What can you do with this stuff?
Divs
Fancy Definition: A div is the basic structural element of any web page. It's used to define a division in a document.
Source: w3schools.com
Talk briefly about w3 schools, great resource.Structure?
Courtesy: http://www.qualityquotes.co.za/
Not quite, but close.
<div> <h1>This is a header!</h1> <p>This is some text under the header!</p> </div> <div> <h2>This is a sub header.</h2> <p>The sub header is less impressive.</p> </div>
In the real world...
Make a note here about nested divs. Explain that most pages have dozens of divs and that they are formed into groups for styling and organizational purposes.Nested Divs?
Talk for a moment about how a div will (with very few exceptions) create a division. Sometimes you want to style a particular section of content without removing it from the flow.Spans
Technical Definition: The <span> tag is used to group inline-elements in a document.
What would I use that for?
My mother has blue eyes.
The Code:
My mother has<span style="color:blue">blue</span> eyes.Note here that they've just seen their first bit of CSS. The style="color:blue" is an inline style that changes the color of the text.
Your turn!
Using Divs, headers, paragraphs, and spans, create a basic page that looks like this:
What is CSS?
Cascading Style Sheets is a style sheet language used for describing the presentation semantics of a document written in a markup language
Awesome, but what does that actually mean?
Credit: hyperboleandahalf.blogspot.com
Discuss briefly how CSS makes things pretty.In practice, CSS is a sheet(s) that provides styling to specific elements on a page.
CSS needs to be able to target the element, and it does so generally through one of three ways.ID's
An ID takes the following form:
<div id="hero">This is really important!</div>
Use an ID on something you only intend to have one of per page.
Example
Classes
A CSS class looks a lot like an ID:
<div class="tinted"> This Div is probably tinted. </div>
Classes are used in cases where you intend to use that styling multiple times.
Example
Combinations!
ID's and Classes can be combined for fun and profit. You can even have multiple classes on the same element.
<div id="important" class="tinted bordered transparent"> The content of this div will have the CSS from all of the classes and the ID on it. </div>Spans can have all the same classes and divs applied to them that Div's can.
Type
A type selector is simply targeting everything of a specific type. <h1>, <p>, <div>, and <span> are all examples of things that can be universally targeted.
Paragraphs are very common universal targets of styling. Other examples.Prep work
Using the previous example, apply the hero id to the first div, and then apply the classes tinted and bordered to the divs in any combination you want.
Neat, but how do I get my styling on the page now?
There are two main ways.Inline
<style>
#hero {
color: orange;
}
.tinted {
background-color: gray;
}
.bordered {
border: 1px solid black;
}
div {
margin: 10px;
}
</style>
Note that there are many, many CSS properties you could apply, provide examples. Note the different properties here. We can now set a background color, a text color, a border, and opacity.Import
Importing an external sheet is the most popular way to get CSS onto a page.
<link rel="stylesheet" type="text/css" href="my-styles.css">
Guided Practice
Create a new document called "my-styles.css", and use the code
<link rel="stylesheet" type="text/css" href="my-styles.css">to import it to your page. When done, populate the sheet with the following:
#hero {
color: orange;
}
.tinted {
background-color: gray;
}
.bordered {
border: 1px solid black;
}
div {
margin: 10px;
}
Questions so far?
If not, take a couple minutes to discuss some of the different other available tags, cross browser compatibility, IE, and multiple sheets.Unguided Practice
Using everything you've learned so far, create the following.
Hint: The borders are 5px and divs have a 10px margin.
Remind the class to look for things that are the same as well as things that are unique.