This document provides an introduction to HTML elements and CSS declarations for web design. It defines HTML as the code that defines the structure of web pages, and CSS as the code that controls the appearance of web pages. Key aspects of HTML elements like opening tags, attributes, values, and end tags are explained. The structure of CSS declarations is also outlined, including selectors, properties, values, and rules. Finally, the advantages of using HTML to define structure and CSS for presentation are summarized as separating structure from design and simplifying revisions.

1. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
HTML Elements and
CSS Declarations
An Introduction
Bruce Clary, McPherson College, McPherson, Kansas

2. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
HTML
HyperText Markup Language
The code or rules that browsers read that define the
structure Web pages

3. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Purpose of HTML
Define the structure of the Web page and its content

4. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
The HTML Element
<div class=“branding”>
<h1>Branding text.</h1>
</div>
<img src=“pic.jpg” alt=“ ” />

5. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
The HTML Element
Opening Tag
<div class=“branding”>
<h1>Branding text.</h1>
</div>
<img src=“pic.jpg” alt=“ ” />

6. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
The HTML Element
Opening Tag
Attribute
<div class=“branding”>
<h1>Branding text.</h1>
</div>
<img src=“pic.jpg” alt=“ ” />

7. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
The HTML Element
Opening Tag
Attribute
Value
<div class=“branding”>
<h1>Branding text.</h1>
</div>
<img src=“pic.jpg” alt=“ ” />

8. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
The HTML Element
Opening Tag
Attribute
Value
<div class=“branding”>
<h1>Branding text.</h1>
</div>
End Tag
<img src=“pic.jpg” alt=“ ” />

9. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
The HTML Element
Opening Tag
Attribute
Value
<div class=“branding”>
Nonreplaceable Element
<h1>Branding text.</h1>
</div>
End Tag
<img src=“pic.jpg” alt=“ ” />

10. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
The HTML Element
Opening Tag
Attribute
Value
<div class=“branding”>
Nonreplaceable Element
<h1>Branding text.</h1>
</div>
End Tag
<img src=“pic.jpg” alt=“ ” />

11. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
The HTML Element
Opening Tag
Attribute
Value
<div class=“branding”>
Nonreplaceable Element
<h1>Branding text.</h1>
</div>
End Tag
<img src=“pic.jpg” alt=“ ” />

12. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
The HTML Element
Opening Tag
Attribute
Value
<div class=“branding”>
Nonreplaceable Element
<h1>Branding text.</h1>
</div>
End Tag
<img src=“pic.jpg” alt=“ ” />

13. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
The HTML Element
Opening Tag
Attribute
Value
<div class=“branding”>
<h1>Branding text.</h1>
</div>
End Tag
Nonreplaceable Element
Replaceable Element
<img src=“pic.jpg” alt=“ ” />

14. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
CSS
Cascading Stylesheets
The code or rules that browsers read to render and
display Web pages

15. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Purpose of CSS
Control the appearance or presentation of Web
pages

16. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
The CSS Declaration
h1 { font-size: 2em; color: #66666; }

17. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
The CSS Declaration
Selector
h1 { font-size: 2em; color: #66666; }

18. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
The CSS Declaration
Selector
h1 { font-size: 2em; color: #66666; }
Property
Property

19. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
The CSS Declaration
Selector
h1 { font-size: 2em; color: #66666; }
Property
Value
Property
Value

20. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
The CSS Declaration
Selector
Declaration
Declaration
h1 { font-size: 2em; color: #66666; }
Property
Value
Property
Value

21. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
The CSS Declaration
Declaration block
Selector
Declaration
Declaration
h1 { font-size: 2em; color: #66666; }
Property
Value
Property
Value

22. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
The CSS Declaration
Declaration block
Selector
Declaration
Declaration
h1 { font-size: 2em; color: #66666; }
Property
Rule
Value
Property
Value

23. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Advantages of HTML and CSS

24. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Advantages of HTML and CSS
•
Separates structure and content from
presentation

25. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Advantages of HTML and CSS
•
Separates structure and content from
presentation
•
Simplifies and speeds revisions and redesign