HTML / CSS – Basics II

Download HTML / CSS – Basics II

Post on 24-Feb-2016

26 views

Category:

Documents

0 download

Embed Size (px)

DESCRIPTION

HTML / CSS Basics II. You have the content . Now make it look nice . Remember the Division?. Content. Presentation. Structure. Layout / Design. Back to the HTML- Structure. < html >< head > Some Title < body > Some < em > content - PowerPoint PPT Presentation

TRANSCRIPT

HTML / CSS - Basics

HTML / CSS Basics IIYou have the content.Now make it look nice.Remember the Division?HTMLCSSContentPresentationStructureLayout / DesignBack to the HTML-StructureSome TitleSome contentThe way in which head and body are included in html is called nesting.

Open notepad.exe and let them copy it.3Back to the HTML-Structure 4

Cascade downBack to the HTML-StructureCascade downSyntax

h1 { font-size: 16pt; color: green;}Why is that? If you know something about the underlying structure of a piece of information, you already know a great deal about the piece of information. HTML helps you with that.8h1 { font-size: 16pt; color: green;}Syntax

SelectorDeclarationWhy is that? If you know something about the underlying structure of a piece of information, you already know a great deal about the piece of information. HTML helps you with that.9Syntax

h1 { font-size: 16pt; color: green;}SelectorPropertyValue and UnitPropertyValueDeclarationWhy is that? If you know something about the underlying structure of a piece of information, you already know a great deal about the piece of information. HTML helps you with that.10html body p em { font-size: inherit; font-style: italic;} Why Cascade?

Include Styles

3 Ways of Inclusion

Inline StyleEmbedded Style SheetsExternal Style Sheets

1. Inline Style

Im red!

Very specific, only this very element

dw2. Embedded Style Sheet

Only this document

dw3. External Style Sheet

All the documents;Change once, apply to all (Hooray!)

dw3 Ways of Selection

Type SelectorsClass and ID SelectorsSpecial Seletion

1. Type Selectors

p {color:red;}

Triggers the style of an HTML tag

dw2. Class and ID Selectors

.red {color:red;}

Triggers the style of an HTML tag that has the attribute class="red"Appears as often as you wish

dw2. Class and ID Selectors

#menu {margin:0px;}

Triggers the style of an HTML tag that has the attribute id="menu"Appears only once

dw3. Special Selection

Contextual#menu ul { list-style:none; }

Short Hand#content, #footer { width:750px; }

Pseudoselectorsa:hover { color:green; }

The Box Model

Contentpaddingbordermarginmargin edgeborder edgepadding edgecontent edge