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 next

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.

HTML: Inline vs Block

So far, we have mostly seen "block" elements

They appear on the next line, like paragraphs

Ex: p, h1, ol



There are also "inline" elements

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

Ex: img, em, a

example of inline and block elements

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. Use comments near each div to note what they will be used for (header, etc)
  3. Put some content in each div - you can use sites like http://www.catipsum.com/ to generate content if needed.

CSS Selectors: Class & ID

  • Classes and IDs allow us to completely customize how we target our styles to our HTML.
  • Unlike the Element selector, use of the Class and ID selectors require making a change to your HTML as well as the CSS.
  • You write a rule for the class name in your CSS, but then add an attribute of class or id to the target HTML element(s), and give that attribute a value of the same class/id name as from your CSS.
  • Any HTML element(s) can be given that class/id value.

CSS Selector: Class

  • All elements with the class attribute AND the same class name will get the styles - and those elements can be of different types (p, div, h1, etc)
  • Class should be used for styles that will be used multiple times in the same page.

Class: CSS vs HTML

HTML Attribute:

  • Add the "class" attribute to all HTML elements in our page that we want targeted for a particular CSS rule.
  • The value of the class attribute is the class name.
  • Just like other attribute-value pairs, the syntax is: class="className"


CSS Selector:

  • In the selector, we tell the browser that the selector is a class by starting with a "."
  • This is followed immediately by the class name. The class name is case sensitive - it must match the value we gave to the class attribute in our HTML.

CSS Selector: Class

Selects all elements with a class of "warning".

.warning {
color: red;
}


<p>Run away.</p>
<p class="warning">Run away!</p>
<h3 class="warning">No, really. RUN AWAY!<h3>


Run away.

Run away!

No, really. RUN AWAY!

CSS Selector: ID

  • Like the Class selector, using an ID requires making a change to your HTML as well as your CSS.
  • Like a Class, the CSS Rule associated with your ID is applied to the element in your HTML that has that same ID.
  • Unlike a Class, an ID can only be used once on an HTML page.

ID: HTML vs CSS

HTML Attribute:

  • Add the id attribute to the single HTML element in our page that we want targeted for the CSS rule.
  • The value of the id attribute is the ID name.
  • Just like other attribute-value pairs, the HTML syntax is: id="idName"

CSS Selector:

  • In the selector, we tell the browser that the selector is an ID by starting with a "#"
  • This is followed immediately by the ID name. The ID name is case sensitive, and spelling counts. It must match the value we gave to the id attribute in our HTML.

CSS Selector: ID


#footer {
background-color: orange;
}

Selects the element with an id of "footer".




<p id="footer">Copyright 2015</p>

Copyright 2015

IDs vs. Classes

ID -- Should only apply to one element on a webpage. I.E. A webpage only has one footer.

CSS: #idName { ... }

HTML: <tagName id="idName"> ... </tagName>

Class -- Many elements can have the same class. I.E. There can be many warnings on one webpage.

CSS: .className { ... }

HTML: <tagName class="className"> ... </tagName>

Let's develop it

  1. Open up your styles.css and index.html files again in Sublime Text
  2. Add the appropriate ids to each of your divs (header, content, sidebar, footer)
  3. Add classes to elements that you want styled the same. (For example, sidebar and content may have the same font size or color)
  4. Create rules for those classes and ids in your .css file. Don't forget - spelling and case matter.
  5. Don't forget to open index.html in Chrome (or refresh the page if it is already open) to see what you've done!

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 space the element takes up on the page*.

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 element, specified by thickness, style, color.

Adds to the space the element takes up on the page*.

Border

You can specify each property separately...

#myID {
		border-width: 10px;
		border-style: dashed;
		border-color: #666666;
	}

#myID {
		border: 10px dashed #666666;
	}

...or all three together.

Border

You can also apply different values to each side of a border.


This paragraph has a style of
border-color: red;
border-style: solid;
border-width: 10px  5px  1px  20px;

Border

A solid red border

border: 4px solid #ff0000;


A thick dotted black top border

border-top: 6px dotted #000000;


Two diļ¬€erent border styles

border-top: 4px solid #ff0000;
	border-bottom: 6px dotted #000000;

Margin

The space around between the border and other elements.

Adds to the space the element takes up on the page.

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;

Box-Sizing

Adding padding or border to an element increases the space that element takes up on the page. We have a CSS property that can change this: box-sizing

The default value is content-box, (border/padding adds to the space the element takes up).

But if you set the value to border-box, the padding and border sizes don't add to the space the element takes up.

border: 5px solid red;
padding: 5px;
width: 80px;
height: 40px;
box-sizing: content-box;
border: 5px solid red;
padding: 5px;
width: 80px;
height: 40px;
box-sizing: border-box;

Auto Margin

If a margin is set to auto on an element that has width, it will add to the margin so that it takes all available space.

Uses: center an element within an element whose width is not known, right-align with right margin in an element of unknown width.

CENTERED


  margin: auto;
  width: 300px;

FLUSH-RIGHT


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

Let's Develop it!

  1. Let's add width, padding, borders, and margins to our divs.
  2. Again, use classes to assign similar width/padding/border/margin to elements, and id to assign unique values to elements
  3. Use "margin: auto;" to center our entire document in the browser.


* Hint for centering your document: Add an additional div around the entire page (but within those body tags!) and give it an id of 'container'. Apply all your centering styles to that div.

Questions?

?