Intro to HTML Elements and CSS Declarations

HTML Elements and CSS DeclarationsAn Introduction

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Bruce Clary, McPherson College, McPherson, Kansas

HTMLHyperText Markup Language

The code or rules that browsers read that define the structure Web pages

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Purpose of HTML

Define the structure of the Web page and its content

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

<div class=“branding”>

<h1>Branding text.</h1></div><img src=“pic.jpg” alt=“ ” />

The HTML Element

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

<div class=“branding”>

<h1>Branding text.</h1></div><img src=“pic.jpg” alt=“ ” />

The HTML ElementOpening Tag

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

<div class=“branding”>

<h1>Branding text.</h1></div><img src=“pic.jpg” alt=“ ” />

The HTML ElementAttributeOpening Tag

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

<div class=“branding”>

<h1>Branding text.</h1></div><img src=“pic.jpg” alt=“ ” />

The HTML ElementAttribute ValueOpening Tag

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

<div class=“branding”>

<h1>Branding text.</h1></div><img src=“pic.jpg” alt=“ ” />

The HTML ElementAttribute ValueOpening Tag

End Tag

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

<div class=“branding”>

<h1>Branding text.</h1></div><img src=“pic.jpg” alt=“ ” />

Nonreplaceable Element

The HTML ElementAttribute ValueOpening Tag

End Tag

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

<div class=“branding”>

<h1>Branding text.</h1></div><img src=“pic.jpg” alt=“ ” />

Nonreplaceable Element

The HTML ElementAttribute ValueOpening Tag

End Tag

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

<div class=“branding”>

<h1>Branding text.</h1></div><img src=“pic.jpg” alt=“ ” />

Nonreplaceable Element

The HTML ElementAttribute ValueOpening Tag

End Tag

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

<div class=“branding”>

<h1>Branding text.</h1></div><img src=“pic.jpg” alt=“ ” />

Nonreplaceable Element

The HTML ElementAttribute ValueOpening Tag

End Tag

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Replaceable Element

<div class=“branding”>

<h1>Branding text.</h1></div><img src=“pic.jpg” alt=“ ” />

Nonreplaceable Element

The HTML ElementAttribute ValueOpening Tag

End Tag

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

CSSCascading Stylesheets

The code or rules that browsers read to render and display Web pages

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Purpose of CSS

Control the appearance or presentation of Web pages

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

The CSS Declaration

h1 { font-size: 2em; color: #66666; }

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

The CSS Declaration

h1 { font-size: 2em; color: #66666; }

Selector

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

The CSS Declaration

h1 { font-size: 2em; color: #66666; }

Selector

Property Property

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

The CSS Declaration

h1 { font-size: 2em; color: #66666; }

Selector

Property PropertyValue Value

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

The CSS Declaration

Declaration Declaration

h1 { font-size: 2em; color: #66666; }

Selector

Property PropertyValue Value

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

The CSS Declaration

Declaration block

Declaration Declaration

h1 { font-size: 2em; color: #66666; }

Selector

Property PropertyValue Value

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

The CSS Declaration

Rule

Declaration block

Declaration Declaration

h1 { font-size: 2em; color: #66666; }

Selector

Property PropertyValue Value

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Advantages of HTML and CSS

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Advantages of HTML and CSS

• Separates structure and content from presentation

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Advantages of HTML and CSS

• Separates structure and content from presentation

• Simplifies and speeds revisions and redesign

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION