#Lesson Index Card
###1. CSS Selectors and Styling
###2. Learning Objective(s)
- Say what CSS is and stands for
- Create a simple CSS sheet
- Understand how to select elements out of the DOM
###3. Essential Question(s) Make a given page look a certain way using just css
###4. Talking Points/Road Map
- CSS stands for Cascading Style Sheet
- before css there was inline stying
<p style="color:black">- Adding this to the page took forever
- Font CSS
- box model
###CSS Selectors
CSS selectors allow you to select and manipulate HTML element(s).
CSS selectors are used to "find" (or select) HTML elements based on their id, classes, types, attributes, values of attributes and much more. Where does it find these selectors?...... In the DOM
The element selector selects elements based on the element name, you can select all h1 elements on the page like this
h1 {
text-align: center;
color: red;
}
this is how we naturally figured out how to find things in the DOM yesterday, its gets a little more complicated however. Just like input tags could have a type attribute, every html tag can have an id attribute, and class attributes. Heres the syntax, it isnt tough difficult
<p id="paragraph_1" class="center blue" >
Can someone explain what this is in english?
The content selector selects an element based on it's id attribute. An id should be unique within the page, use the id selector to find a single, unique element. Use a hash character # followed by the id. With this command we can select the element with the id of foo and center align it with blue text
#foo {
text-align: center;
color: red;
}
the class selector selects elements based on their class attribute. Class selectors are useful for selecting a whole bunch of disparate elements and applying a style them, for example here we can select every element that has the class center and align its text to center
.center {
text-align: center;
}
We can combine these selectors infinitely for example I can select all paragraph tags that have a center class and center align them like this
p.center {
text-align: center;
}
How can we select all headings that have the class left?
There are many different ways to select that paragraph above, can someone tell me 3
###Styling
background-color
background
border
color:
height
width
font-family
###Box Model
Now lets talk about the box model, each element is a rectangular box, what are some properties boxes have?
Cool in CSS they not only have height and width but also padding, border, and margin.
Lets play around with some of these properties:
<div>
<div id="box" class="border-solid">2px <br> solid
</div>
<div id="box" class="border-double">6px <br> double
</div>
<div id="box" class="border-dashed">8px <br> dashed
</div>
</div>
###Display Property How elements are displayed is determined by the display property. There are a ton of values for the display property but the most common are block, inline, inline-block, and none. Any guesses on what these properties can do?
#box {
display: inline-block;
}
p{
display: block;
}
.hidden {
display: none;
}
###Inline vs. block-level Content model
Generally, inline elements may contain only data and other inline elements. They line up side by side.
Formatting
By default, inline elements do not begin with new line.
###Block-level vs. inline Formatting
By default, block-level elements begin on new lines. They can be stacked
Content model
Generally, block-level elements may contain inline elements and other block-level elements. Inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements.
###Putting this all together~~! Lets create some web pages, Open up terminal and make a new folder and touch some files. Let's get our directory structure set up till it looks like this
├── page1.html
├── css
│ └── stylesheet.css
├── image
│ └── boom.jpg
└── index.html
Hop into index.html until it looks like this
<!DOCTYPE Html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hi I'm a h1 Heading</h1>
<div id="content">
<p>This is just some text inside the main content id</p>
<div class="article">
<h3 class="article_header">Boldly going where no article has gone before!</h3>
<p class="article_paragraph">
We're just some regular paragraph text chilling hanging out in a regular paragraph way. In my spare time I like to appear in off broadway paragraphs, fight crime at night, and do paragraph stuff
<img class="article_image" src="image/boom.jpg">
<br>
<a href="page1.html">Paragraphs in your area!</a>
</p><!-- class="article_paragraph" -->
</div><!-- class="article"-->
</div><!-- class="content" -->
</body>
</html>
**Lets add a CSS stylesheet to **
css/stylesheet.css
html{
display: table;
margin:auto;
}
body{
display: table-cell;
vertical-align: middle;
}
#content{
height:200px;
width:800px;
}
.article{
padding: 20px;
margin-top: 20px;
margin-bottom: 20px;
height:100%;
background-color:silver;
border-radius: 10px;
}
.article_header {
font-size: large;
font-family: sans-serif;
font-weight: bold;
margin-bottom: 10px;
}
.article_paragraph{
}
.article_image{
width: 100px;
height: 100px;
float:left;
border:1px dotted black;
margin:0px 15px 0px 0px;
}
Download boom.jpg
Now lets play with it
- Start by including your css file in
index.html - Like so:
<link type="text/css" rel="stylesheet" href="css/stylesheet.css" />
###Resources: CSS Tricks
ID Selector controversy