6. HTML
HyperText Markup Language
Describes the semantics and structure
of content on a web page.
7. CSS
Cascading Style Sheets
Describes the presentation of content
on a web page by defining design elements
such as layout, fonts, and colors.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19. How do they work together?
CSS lets you define visual styling by
targeting rules to individual HTML elements.
20. <html>
<body>
<h1>This is a header</h1>
<p>
Here is a block of
paragraph text, blah
blah blah etc.
HTML </p>
<h2>Another header</h2>
<p>
And yet another paragraph
with a block of text.
</p>
</body>
</html>
24. body {
font-family: "trebuchet ms", sans-serif;
<body> background-color: #ddeedd;
padding: 20px 100px 0px 100px;
<h1>This is a header</h1> }
<p> h1, h2 {
Here is a block of font-size: 1.8em;
paragraph text, blah color: #88aa44;
blah blah etc. margin: 0px;
</p> }
h2 {
<h2>Another header</h2> font-size: 1.4em;
background-color: #ffffff;
<p> padding: 0px 30px 0px 30px;
And yet another paragraph }
with a block of text.
</p> p {
background-color: #ffffff;
</body> padding: 30px;
margin: 0px;
}
HTML CSS
25. CSS Syntax
A stylesheet lists rules for presentation.
Each rule consists of a selector and a
declaration block.
27. The Type Selector
p {
color: #1662d8;
background-color: #ffffff;
padding: 10px;
border: 5px solid #1bc8fe;
}
28. Here is an example paragraph with a
styled font, color, padding and border.
p {
color: #1662d8;
background-color: #ffffff;
padding: 10px;
border: 5px solid #1bc8fe;
}
29. The Class Selector
<p>
This is a normal paragraph, nothing
exciting going on here.
</p>
<p class=”alert”>
But this is a really important
paragraph - pay attention!
</p>
31. This is a normal paragraph, nothing
exciting going on here.
But this is a really important
paragraph - pay attention!
32. The ID Selector
HTML <ul id=”contents”>
<li>Chapter 1</li>
<li>Chapter 2</li>
<li>Chapter 3</li>
</ul>
CSS #contents {
font-weight: bold;
font-size: 18px;
}
33. Descendant Selectors
<p>
This is a stand-alone paragraph.
</p>
<blockquote>
<p>
A paragraph inside our blockquote.
</p>
<p>
And another blockquoted paragraph.
</p>
</blockquote>
81. Resources and Next Steps
Selectutorial
http://css.maxdesign.com.au/selectutorial/
W3Schools CSS Tutorial
http://www.w3schools.com/css/
CSS Zen Garden
http://www.csszengarden.com/
