HTML & CSS WORKSHOP 

 

WEEK 1

 

Before we start

 

GOAL

 

content

 

  • HTML

  • CSS Basics

  • CSS Layouts

  • CSS Classical Layouts

 

Hyper Text Mark-up Language

 
  • html>head^body
  • title
  • script
  • link
  • div
  • ul, ol>li
  • table>thead>tr>th^^tbody>tr>td
  • span
  • a
  • p
  • img
  • form
  • label
  • input
  • button
  • select>option
  • ......
 

HTML5 ELEMENTS

 

  • HEADER

  • NAV

  • ASIDE

  • MAIN

  • SECTION

  • ARTICLE

  • FOOTER

 

MAIN

HEADER

SECTION/ARTICle

SECTION/ARTICle

ASIDE

FOOTER

NAV

NAV

IT'S ALL ABOUT SEMANTICS

 

CSS BASICS

 

cascading  style  sheets

 

CSS Syntax

 
div {
    width: 700px;
    height: 30px;
    line-height: 30px;
    padding: 15px;
    margin-bottom: 20px;
    text-align: center;
    color: #3c763d;
    background-color: #dff0d8;
    border: 1px solid #d6e9c6;
    border-radius: 4px;
    font-size: 20px;
}
<div>
    Hello!  Hope you enjoy this workshop!
</div>
Selector Example Example description
.class .info Select all elements with class="intro"
#id #firstname Select all elements with id="firstname"
* * Select all elements
element p Select all <p> elements
element,element div, p Select all <div> and <p> elements
element element div p Select all <p> elements inside <div> elements
element > element div > p Select all <p> elements where the parent is a <div> element
element + element div + p Select all <p> elements that are right after <div> elements
element1~element2 p ~ ul Select <ul> elements that are preceded by a <p> element
[attribute] [target] Select all elements with a target attribute
[attribute=value] [target=_blank] Select all elements with target="_blank"

CSS SELECTORS

 

http://www.w3schools.com/cssref/css_selectors.asp

http://www.w3schools.com/cssref/trysel.asp?selector=.intro

 
  • Color
  • Background and Borders
  • Basic Box
  • Flexible Box
  • Text
  • Text Decoration
  • Fonts
  • Writing Modes
  • Table
  • Lists and Counters
  • Animation

 

5
  • Transform
  • Transition
  • Basic User Interface
  • Multi-column
  • Paged Media
  • Generated Content
  • Filter Effects
  • Image/Replaced Content
  • Masking
  • Speech
  • Marquee
5

CSS PROPERTY GROUPS

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<head>
  <style>
    h1 {
      color: maroon;
    }
  </style>
</head>
<h1 style="color:blue;">This is a heading.</h1>

  • External style sheet

 

  • Internal style sheet

 

  • Inline style

 

HOW TO INSERT CSS

CSS LAYOUTS

 

block

 
<div>
<h1> - <h6>
<p>
<form>
<header>
<footer>
<section>
<span>
<a>
<img>

Inline

 

BOX MODEL

 
div {
    width: 320px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0; 
}

POSITION

 

  • static

  • relative

  • absolute

  • fixed

 

FLOAT

 
img {
  float: right;
}

clear

 
<div class="div1">
    div 1
</div>
<div class="div2">
    div 2, div 2, div 2, div 2, div 2, div 2, div 2, div 2
</div>
.div1 {
    float: left;
}
.div1 {
    float: left;
}

.div2 {
    clear: left;
}

overflow: auto

 
<div class="no-overflow">
    <img class="img1" src="../images/w3css.gif">
    I am the container box, and I do not have overflow: auto!
</div>

<div class="overflow">
    <img class="img2" src="../images/w3css.gif">
    I am the container box, and I have overflow: auto!
</div>
img {
    width: 100px;
    height: 140px;
    float: right;
}

.overflow {
    overflow: auto;
}

Z-INDEX

 
<h1>This is a heading</h1>
<div></div>
<p>Because the image has a z-index of -1...</p>
 div {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100px;
    height: 100px;
    background: lightpink;
}
 div {
    z-index: -1;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100px;
    height: 100px;
    background: lightpink;
}

CSS CLASSICAL LAYOUTS

 

fixed width

 

Fixed width

 

Single column

 

fixed width

 

1-2-1 POSITION

 

fixed width

 

1-2-1 float

 

fixed width

 

1-3-1 float

 

find an agent

 

Step 1

 

Step 2

 

THE END

 
Made with Slides.com