html / css – basics ii

HTML / CSS – Basics II

You have the content.Now make it look nice.

Remember the Division?

HTML CSS

Content Presentation

Structure Layout / Design

Back to the HTML-Structure

<html><head><title>Some Title</title>

</head><body><p>Some <em>content</em></p>

</body></html>

Cascade down

<html>

<head>

<title>

<body>

<h1> <p>

<em>


Cascade down

Syntax

h1 { font-size: 16pt; color: green;}


SyntaxSelector

Declaration

Syntax


Selector Property Value and Unit

Property Value

Declaration

html body p em { font-size: inherit; font-style: italic;}

<html> <body> <p> <em>

Why “Cascade”?

Include Styles

<link href="styles.css" rel="stylesheet" type="text/css" />

3 Ways of Inclusion

1. Inline Style2. Embedded Style Sheets3. External Style Sheets

1. Inline Style

<p style="color:red;">I’m red!</p>

Very specific, only this very element

dw

2. Embedded Style Sheet

<style type="text/css"></style>

Only this documentdw

3. External Style Sheet

<link href="styles.css" rel="stylesheet" type="text/css" />

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

dw

3 Ways of Selection

1. Type Selectors2. Class and ID Selectors3. Special Seletion

1. Type Selectors

p {color:red;

}

Triggers the style of an HTML tag

dw

2. 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 wishdw

2. Class and ID Selectors

#menu {margin:0px;

}

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

Appears only oncedw

3. Special Selection

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

Short Hand#content, #footer

{ width:750px; }

Pseudoselectorsa:hover { color:green; }

The Box Model

Contentpaddingbordermargin

margin edgeborder edge

padding edgecontent edge

Documents