HTML/CSS Refresher

View Github Repository Open presentation in a new window

girldevelopitcincinnati

See all presentation from girldevelopitcincinnati

HTML/CSS Refresher

0 1

gdi-cincinnati-refresher-htmlcss

Intro to HTML/CSS Refresher Workshop

On Github girldevelopitcincinnati / gdi-cincinnati-refresher-htmlcss

HTML/CSS Refresher

Workshop

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 1

 

1 This one's important

Welcome!

Wifi Info

Network:RFGUEST

Password:SilverJoe's

Follow along at

http://gdi.etboggs.com/refresher

Welcome!

Tell us about yourself.

  • Who are you?
  • What do you hope to get out of the class?
  • What is your favorite breakfast food?

Terms

  • Web design
    The process of planning, structuring and creating a website
  • Web development
    The process of programming dynamic web applications
  • Front end
    The outwardly visible elements of a website or application
  • Back end
    The inner workings and functionality of a website or application.

Tools

Anatomy of a website

Your Content
+ HTML: Structure/Content
+ CSS: Presentation
= Your Website

A website is a way to present your content to the world, using HTML and CSS to present that content & make it look good.

HTML

What is HTML?

HTML is the code that allows us to build websites.

If you 'view the source' of a page, you see this:

Important Slide!

< >

Angle brackets. HTML.

Every piece of content involves these.

So, what is content?

Concrete example

  • A paragraph is your content

  • Putting your content into an HTML tag to make it look like a paragraph is structure
                    <p>A paragraph is your content</p>
  • Making the font of your paragraph blue and 18pt is presentation, so it uses CSS instead.

    A paragraph is your content

HTML Tags

  • Our HTML lives are made up of tags.
  • All HTML tags have < and >
  • There are a variety: p, strong, div, em, span, section, etc. etc is not one
  • A paragraph in HTML is simply: 
    <p>There's a tag on the left and a tag on the right.</p>
  • Some tags have default padding and margin (block), some do not (inline).

Nesting

All elements "nest" inside one another

Whichever element OPENS first CLOSES last

Nesting

So, you could put a link into a paragraph. Very common.

<p>I want you to visit <a href="http://google.com/">this site</a>, 
soon!</p>

What would that look like?

I want you to visit this site, soon!

Doctype

The first thing on an HTML page is the doctype, which tells the browser which version of the markup language the page is using.

Here's the doctype we use to tell the browser "Hey, this is HTML5, buddy"

          <!DOCTYPE html>

Head and Body Tags

The head contains meta information about the page.

The body contains the actual content of the page.

Use tags to build a skeleton!

          <!DOCTYPE html>
          <html>

            <head>
              <title>Awesome Site!</title>
            </head>

            <body>
              Stuff goes here
            </body>

          </html>

Create a GDI folder on your desktop. Inside of that folder create a file called index.html. Open that file using Sublime Text, type this code in and save.

Anatomy of an HTML element

  • Container Element
    • An individual component of HTML, consisting of an opening and closing tag and the content inside of the tags.
    • Paragraph, Table, List
    •                 
        <p>This is an HTML element, right here</p>
  • Standalone (self-closing) Element
    • An individual component that cannot contain anything else
    •  <br>
 <img> 
 <hr>

Let's add an element - container and standalone

          <!DOCTYPE html>
          <html>

            <head>
              <title>Awesome Site!</title>
            </head>

            <body>
              <p>Look at all of the elements!</p>
              <p>There are so many of them!</p>
              <br>
              <img>
            </body>

          </html>

Add these elements to index.html and save!

Anatomy of an HTML element

  • Attribute
    • Each element can have a variety of attributes
    • Language, style, identity, source, link
    • They look like:name="some value here"
  • Drop them 'inside' your opening HTML tag
    • Value is the value assigned to a given attribute.
    •  <a href="http://girldevelopit.com">GDI</a>
 <img src="my-picture.jpg"/>

Let's add an attribute to an element

          <!DOCTYPE html>
          <html>

            <head>
              <title>Awesome Site!</title>
            </head>

            <body>
              <p id="title">Look at all of the elements!</p>
              <p class="sub-heading">There are so many of them!</p>
              <br>
              <img src="http://www.placecage.com/500/500">
            </body>

          </html>

Add id="value" to the first p tag, class="value" to the second p tag and src="value" to the img tag in index.html and save!

CSS

CSS: What is it?

CSS = Cascading Style Sheets

CSS is a "style sheet language" that lets you style the elements on your page.

CSS is works in conjunction with HTML, but is not HTML itself.

CSS: What can it do?

All colored text, position, and size

CSS: What does it look like?

Important Slide!

{ }

Curly braces. CSS.

Every rule we create has a { and a }. Always.

CSS: The first part - Selector

It's how we tie our CSS to specific HTML elements

In this CSS, 'selector' is a rule to select HTML.

selector {
  
}

"I want to select all the paragraphs."

"I want to select the list of recipe ingredients."

CSS: The second part - Declaration

It's how we give a certain style to what we 'selected'

p {
  color: red;
}

"I declare that this text shall be red!

"I declare this paragraph shall be aligned to the right!

The CSS Rule

selector {
  property: value;
}

A block of CSS code is a rule.

The rule starts with a selector.

It has sets of properties and values.

A property-value pair is a declaration.

CSS Syntax

Declarations: Property and value of style you plan use on HTML element.

Declarations end with a semicolon

Declaration groups are surrounded by curly brackets.

selector {
  property: value;
  property: value;
  property: value;
}

This is a 'rule' with three declarations.

Selector: Element

p {
  property: value;
}

Selects all paragraph elements.

img {
  property: value;
}

Selects all image elements.

Rewind to HTML: id's

How can we identify a single item on the page?

By giving it an 'id'.

  <p id="footer">This is the footer of our website, and we should probably style it in some way so it hangs out at the bottom.</p>

The 'id' of that paragraph is 'footer'

There can be only one.

We've basically 'named' this element so we can style it in our CSS document specifically.

Selector: ID

ID's are selected with the # (hash) symbol.

#footer {
  property: value;
}

Selects all elements with an id of "footer".

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

The associated HTML.

Rewind to HTML, classes

How can we identify a set of items on the page?

By giving each of them a 'class'.

  <p class="warning">My text must be red, or else.</p>
  <p>I have no class.</p>
  <p class="warning">I beg you, redden me.</p>

The 'class' of two of them is 'warning'.

We can single out just 'warning' with some CSS...

Selector: Class

.warning {
  color: red;
}

Selects all elements with a class of 'warning'.

<p class="warning">Run away!</p>

The associated HTML.

IDs vs. Classes

id: Should only apply to one element on a webpage. A webpage only has one footer.

The "#" is how you tell CSS "this is an id." #footer

class: Lots of elements can have the same class. There can be many warnings on one page.

The "." is how you tell CSS "this is a class name." .warning

Add an external stylesheet to your code

<head>
  ...
  <link href="style.css" rel="stylesheet">
</head>

In your GDI folder, create a file called style.css and link it using the example above.

Let's select something!

#title {
  font-size: 24px;
  color: red;
}

.sub-heading {
  font-size: 18px;
  color: green;
}

img {
  border: 1px solid black;
}

In your GDI folder, create a file called style.css and link it using the example above. Now, open index.html in Chrome and look at the changes! Spend a few minutes adding your own elements and targetting them using CSS!

Box Model

What you need to know about positioning

  • Remember talking earlier about inline vs block?
  • All block level elements follow a box model
  • We will use the box model for layouts

Box Model

Padding

Space between the border and the content

Border

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

Margin

The transparent area around the box that separates it from other elements.

Box Model, acronym!

Easy to remember:

The box model is Trouble

The box model is TRBL

Top Right Bottom Left

Padding

15 pixels on all sides 
p { padding: 15px; }
10 pixels on top only 
p { padding-top: 10px; }
10 on top, 5 on right, 3 on bottom, 5 on left 
p { padding: 10px 5px 3px 5px; }

Padding

Four values

p { padding: top right bottom left; }

Two values

p { padding: top/bottom right/left; }

One value

p { padding: all; }

Padding

div { padding: 10px 20px 30px 40px; }

Border

A solid red border

p { border: 1px solid #ff0000; }

A thick dotted black top border

div { border-top: 4px dotted #000000; }

Two different border styles

address { border-top: 1px solid #ff0000; }
blockquote { border-bottom: 4px dotted #000000; }

Margin

15 pixels on all sides

p { margin: 15px; }

10 on top, 5 on right, 3 on bottom, 5 on left

p { margin: 10px 5px 3px 5px; }

10 pixels on top

p { margin-top: 10px; }

Put the box model to work!

  p { 
    margin: 20px;
    padding: 30px;
    border: 1px solid red; 
  }

Add this code to style.css and look at how if affects your paragraphs!

Positioning

Static Positioning

HTML elements are positioned static BY DEFAULT.

Static elements are positioned in the normal flow of the page.

Static elements ignore top, bottom, right or left property specifications. (So there's no trouble, get it?)

Static Positioning

In normal flow, inline boxes flow from left to right, wrapping to next line when needed.

<img src="images/cookie1.png"/>
<img src="images/cookie2.png"/>
<img src="images/cookie3.png"/>
...
<img src="images/cookie2.png"/>
<img src="images/cookie3.png"/>

Static Positioning

In normal flow, block boxes flow from top to bottom, making a new line after every box.

 <p>Greetings</p>
 <p>Hello</p>
 <p>Hi there!</p>

Greetings

Hello

Hi there!

Relative Positioning

  • Takes the element out of the normal flow, allowing it to be moved to the top, left, right or bottom.
  • Does not affect the elements surrounding it.
  • Makes an element a "positioning context" in which to position other elements relative to it.
  • Relative positioning and absolute positioning are used together.

Relative Positioning

The "relative" value will still put the element in the normal flow, but then offset it according to top/left/right/bottom properties.

  .relative{
    position: relative; 
    left: 80px; 
    top: 20px;
    height: 100px; 
    background-color: yellow;
  }
Hello, hi!

Try it out!

Make the word 'elements' shift out of place.

  <p id="title">
    Look at all of the <span class="shift">elements</span>!
  </p>

  .shift {
    position: relative;
    top: -10px;
  }

Add this to your code and save. Try moving the word around using TRBL!

Absolute Positioning

  • Positions element outside of the normal flow.
  • An absolutely positioned element is offset from its container block, (if container is position: relative;).
  • Its container block is the first element that has a position other than static.
  • If no such element is found, the container block is <html>.
  • Other elements act as if it's not there.
  • Determined by its offset values in the properties top, bottom, right and left (only if values supplied).

Absolute Positioning

The "absolute" value will take the element out of the normal flow and position it in relation to the window (or the closest non-static element).

  .top{
    position: absolute; 
    top: -40px; 
    right: 10px; 
    background-color: yellow
  }

  .bottom{
    position: absolute; 
    bottom: -40px; 
    left:60px; 
    background-color: green
  }
Up here
Down here

Example: Absolute Positioning

Here's an example of an image with a caption absolutely positioned over top of it.

The containing div has a position of relative, and the caption has a position of absolute.

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

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.

Let's float!

          <!DOCTYPE html>
          <html>

            <head>
              <title>Awesome Site!</title>
            </head>

            <body>

            <div id="navigation">
              Nav
            </div>

            <div id="content">
              <p id="title">Look at all of the elements!</p>
              <p class="sub-heading">There are so many of them!</p>
              <br>
              <img src="http://www.placecage.com/500/500">
            </div>
            </body>

          </html>

Add this HTML to your index.html document and save!

Let's float!

          #navigation {
            float: left;
            width: 20%;
          }

          #content {
            float: right; 
            width: 70%;
          }

Add this CSS to your style.css document and save! Take a look at what changed and make your own changes!

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.
 p { clear: right; }
 p { clear: left; }
 p { 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

Questions?

?
HTML/CSS ~ Girl Develop It ~