Pres

Building and Marketing Websites

Every element in a document, both
block-level and inline, generates a
rectangular element box
Box Model

Block Elements
vs
Inline Elements

Block Elements
• Paragrahs <p> … </p>
• Headings <h1> … </h2>
• Lists <ol> … </ol>
• Block-level element begins on a new line, and
some space is also usually added above and
below the entire element by default.

Inline Elements
• <em> … </em>
• <strong> … </strong>
• <img src=“test” />
• Go with the flow

Block vs Inline
• Block elements are the major building blocks
of your Web page
• Inline elements for small pieces of content

Class Identifier
Used to classify elements into a
conceptual group.

<html>
<head>
<title>Simple Website</title>
</head>
<body>
<h1>Welcome</h1>
<p class=“green”>This is a demonstration.</p>
<p>Business as usual</p>
</body>
</html>

p.green {
color: green;
}
1. Select <p> elements that belong to a certain class.
2. Make them green.
The CSS Rule

If you want all elements that are in the
green class to have a style, then you can
just write your rule like this:
.green {
color: green;
}

Id Identifier
Used to identify a unique element in
the document.

<html>
<head>
<title>Simple Website</title>
</head>
<body>
<h1>Welcome</h1>
<p id=“startline”>This is a demonstration.</p>
<p>Business as usual</p>
</body>
</html>

Id Identifier
• Giving an element an id is similar to
adding an element to a class.
• Differences:
–attribute is called “id”, not “class”,
–an element can’t have multiple ids
–can not have more than one element on a
page with the same id.

#start {
color: green;
}
The CSS Rule

Generic block-level element
Generic inline element
<div> … </div>
<span> … </span>

Generic Elements
• No inherent presentation qualities of
their own
• You can use style sheets to format the
content however you like.

div element
• Short for “division”
• A container around a logical grouping of
elements on the page
• Used for structure

span element
• Same benefits as the div element
• Used for inline elements that do not introduce
line breaks

Pres

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to Pres

Similar to Pres (20)

Recently uploaded

Recently uploaded (20)

Pres

Editor's Notes