3. Agenda
CSS3
● What it is, how it works & how to use
● IDs vs. Classes
● Inline and Block Elements
● Shorthand
● FLOATS
● Comments
● Intro to CSS3 Properties (if time permits)
4. Agenda
Putting it all together
● Project Structure
● Website Layouts
● Tools to Improve Workflow
5. What is HTML?
Wikipedia:
is the main markup language for creating web pages and other
information that can be displayed in a web browser.
6. Setting the standards
World Wide Web Consortium (W3C)
The Web Hypertext Application Technology Working Group
(WHATWG) i
7. Document Object Model (DOM)
The HTML DOM defines a standard way for
accessing and manipulating HTML documents.
17. HTML5 Semantic Elements
Semantic = Meaning
Semantic Elements = Elements with meaning
Examples of non-semantic elements: <div> and <span> -
Tells nothing about its content.
Examples of semantic elements: <form>, <table>,
and <img> - Clearly defines its content.
18. HTML5 Semantic Elements
New HTML5 Semantic Elements Include:
<header>
<nav>
<section>
<article>
<hgroup>
<canvas>
<video>
<audio>
<aside>
<figcaption>
<figure>
<footer>
23. What is CSS?
Wikipedia:
Cascading Style Sheets (CSS) is a style sheet language used for
describing the look and formatting of a document written in a markup
language. Its most common application is to style web pages written
in HTML and XHTML.
25. How to use
● External Style Sheet
● Internal Style Sheet
● Inline Style
26. How to use
External Stylesheet
<head>
<link rel="stylesheet" type="text/css" href="styles.
css">
</head>
You can use one or multiple stylesheets
27. How to use
Internal Stylesheet
<head>
<style type="text/css">
body {color: black; font-family: Helvetica, Verdana,
san-serif;}
p {line-height: 1.5;font-size:14px;}
</style>
</head>
28. How to use
Inline Style
<div style="background: black; color: white">
...
</div>
29. Cascading
● Browser default
● External style sheet
● Internal style sheet (in the head section)
● Inline style (inside an HTML element)
Rules are applied from top to bottom. Last rule will
overwrite previous rules.
30. IDs vs. Classes
IDs are prefixed with #
Classes are prefixed with a period (.)
Example: #myID
Example: .myClass
31. IDs vs. Classes
<div id="myID">This is a container</div>
<div class="myClass">This is a
container</div>
IDs or Classes can use UPPER and lower case. They can
also use numeric values as well as non-alpha-numeric
values
Examples: MYID, myclass, my-id
32. Inline & Block Elements
Inline elements are those that on their own have no effect in
the structure or layout of a page.
Example: <span>, <em>, <a>, <strong>
33. Inline & Block Elements
Inline elements are those that on their own have no effect in
the structure or layout of a page.
Example: <span>, <em>, <a>, <strong>
Block level elements are those that affect the structure and
layout of a page.
Example: <div>, <p>, h1-h6
34. Inline & Block Elements
Inline elements are those that on their own have no effect in
the structure or layout of a page.
Example: <span>, <em>, <a>, <strong>
Block level elements are those that affect the structure and
layout of a page.
Example: <div>, <p>, h1-h6
Block level elements generate a line break and can have
dimensions.