html / css – basics ii
Post on 24-Feb-2016
35 Views
Preview:
DESCRIPTION
TRANSCRIPT
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>
Back to the HTML-Structure
<html> <body> <p> <em>
Cascade down
<html>
<head>
<title>
<body>
<h1> <p>
<em>
Back to the HTML-Structure
Cascade down
Syntax
h1 { font-size: 16pt; color: green;}
h1 { font-size: 16pt; color: green;}
SyntaxSelector
Declaration
Syntax
h1 { font-size: 16pt; color: green;}
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"><!--
p { font-size: 9pt; }--></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
top related