README.md

#Lesson Index Card

###1. CSS Selectors and Styling

###2. Learning Objective(s)

Say what CSS is and stands for
Create a simple CSS sheet
use element selectors
use class selectors
use id selectors
understand the box model

###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

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 too difficult

<p id="paragraph_1" class="center blue" >

Can someone explain what this is in english?

The id selector

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

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;
}

Combining these selectors

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 it

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;
}