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

What we'll be making today

Today we will be making a site from scratch using divs and spans to create a header, footer, sidebar and a content area.

Let's (prepare to) Develop It!

  1. Create a new folder on your desktop, and name it something clever like "MyGDIWebsite" - remember, no spaces in that name!
  2. Inside of that folder, create 2 new folders: styles and images
  3. Open Sublime Text and create a new document: save it as index.html, and save it to the MyGDIWebsite folder.
  4. In the new index.html file, put in the basic tags needed for a site: doctype, html, head, body.
  5. In Sublime Text, create a new file and save it as "style.css", and save it to the "styles" folder.
  6. Add a link to this stylesheet in your html document.

Inline vs Block

So far, we have mostly seen "block" elements

They appear on the next line, like paragraphs



There are also "inline" elements

They appear on the same line that they are written on.

example of inline and block elements

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
  • Block elements: p, h1, ul, li, almost everything else

Element: Div

  • Block level element. Each new div is rendered on a new line.
  • A division, or section of content within an HTML page.
  • Used to group elements to format them with CSS.
  • Apply IDs and Classes to divs to control their styles with CSS.
<div>
   <p>Content<p>
   <p>Content<p>
</div>
<div id="header">
   <h1>Main Heading<h1>
</div>
<div class="sub-content">
   <p>Some more content<p>
</div>

Grouping elements with div

  • The div tag is used everywhere to group elements together into sections.
  • For example, what if we want the first 2 paragraphs of a section to be right-aligned, purple & bold, but we don't want any other paragraphs to be right-aligned?
  • We would wrap them in a div element to style them differently.

Grouping elements with div, cont.


.align-right{
  text-align:right;
  color: green;
  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.</a>

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.

Let's Develop It

  1. Open your new index.html file in Sublime Text and create a <div> for each of the following
    • header
    • content area
    • sidebar
    • footer
  2. Give each an appropriate id so we know what type of content it will hold.
  3. Put some content in each div - you can use sites like http://www.catipsum.com/ to generate content.
  4. Using the CSS we learned last week, apply some fun styles to the divs!

Box Model

Properties: Width and Height


#long-div {
  width: 900px;
  height: 50px;
  background-color: red;
}

.tall-div {
  width: 150px;
  height: 250px;
  background-color: orange;
}
#long-div
.tall-div

Padding

Space between the border and the content

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


  padding: 10px 20px 30px 40px;

Border

The edge around the box, specified as "thickness, style, color."

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: auto;
  width: 300px;

FLUSH-RIGHT


  margin-left: auto;
  margin-right: 5px;
  width: 300px;

Let's Develop it!

Let's add width, padding, borders, and margins to our divs.

Use "margin: auto;" to center our entire document in the browser.

POSITIONING!!!

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.

Float: Example

Below a <blockquote> is floated to the left, allowing text to wrap around it on the right

example float

Float


  .float{
    float:left;
    width:200px;
    background:yellow;
  }
Hi, I'm a yellow box with black text.
I like to hang out on the left side.

Not floating element
Not floating element
Not floating element with wrapping Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Using floats to place elements side by side

If you want two block level elements to be side by side, you need to float both elements. One left, and one right.

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;

Clear


   .float{
     float:left;
     width:50px;
     background:yellow;
   }
   .clear-left{
     clear:left
   }
 
hi
hi
hi
Not floating element
Not floating element
Non-floating element with a class of .clear-left

Let's Develop It

Use the three values of float (left, right, clear) to position your header, content, sidebar, and footer.

Now that you see those divs in place, you may want to adjust the width/height, padding, border, and margins you added in the last exercise.

Questions?

?