Web topic 15 1 basic css layout

Web Authoring

Topic 15 –
Basic CSS Layout
Part 1

Objectives
Students should able to:
1 Explain Cascading Style Sheet
Class and ID Selector.

2 Identify internal and external
Cascading Style Sheets.

3 Cascading Style Sheets
background.

DIV-based Layout
- Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<title>How to Build a Basic CSS Layout</title>
</head>
<body>
<h1>How To Build a Basic CSS Layout</h1>
<div id="main"></div>
<div id="footer"></div>
</body>
</html>

Class Selector
In the CSS, a class selector is a name
preceded by a full stop (.)
Example:
.intro {
color: red;
font-weight: bold;
}

ID Selector
In the CSS, an ID selector is a name preceded
by a hash character (#).
Example:
#top {
background-color: #ccc;
padding: 1em
}
- Database

ID and Class Selector
CSS by using the attributes id and class could
look something like this:
Example:
<div id="top">
<h1>Chocolate curry</h1>
<p class="intro">This is my recipe for making
curry purely with chocolate</p>
<p class="intro">Mmm mm mmmmm</p>
</div>

ID and Class
The difference between an ID and a class is
that an ID can be used to identify one
element, whereas a class can be used to
identify more than one.

Universal Selector
The universal selector is an asterisk.
When used alone, the universal selector tells
the CSS interpreter to apply the CSS rule to all
elements in the document.
*{
border: 1 px solid black;
}

SPAN AND DIV
The difference between span and div is that a
span element is in-line and usually used for a
small chunk of in-line HTML .
Whereas a div (division) element is block-line
(which is basically equivalent to having a line-
break before and after it) and used to group
larger chunks of code.

STYLES in CSS
There are 3 ways to use styles in CSS:
• internal (or embedded)
• External
• Inline

STYLES in CSS
• Internal
The following CSS STYLE declaration puts a
border around every H1 element in the
document and centers it on the page.
<HEAD>
<STYLE type="text/css"> H1 {border-width: 1;
border: solid; text-align: center}
</STYLE>
</HEAD>

STYLES in CSS
• External
In this example, we first specify a
persistent style sheet located in the file
mystyle.css:
<LINK href="mystyle.css" rel="stylesheet"
type="text/css">
For optimal flexibility, authors should
define styles in external style sheets.

STYLES in CSS
• Inline
This CSS example sets colour and font
size information for the text in a specific
paragraph.
<P style="font-size: 12pt; color: fuchsia">
Aren't style sheets wonderful?
In CSS, property declarations have the form
"name : value" and are separated by a
semi-colon.

CSS Background
CSS backgrounds are an important part of
web design. The property is where you add
the colours and images that sit behind your
content, which controls much of the
aesthetics of your site.
Remove CSS backgrounds and your site will
probably be text on a white background.

CSS Background
There are 4 background properties you can
apply to a CSS selector:
background-colour
background-image
background-repeat
background-position

Background-colour
background-colour — sets the background
colour of an element. The colour can be
specified as a hex value, an rgb value, or by
one of the limited colour names. The
background-colour can also be set as
transparent or it can be set to inherit the
background-colour of its parent element

Background-image
background-image — sets an image as the
background of an element and it’s value will
look like url(“path-to-an-image”). The
background-image property can also have
values of none and inherit.

Background-repeat
background-repeat — sets how a
background-image is repeated. Values are
repeat, no-repeat, repeat-x, repeat-y, and
inherit.

Background-position
background-position — sets the starting
position of the background image within the
element. Images can be set to start
vertically at the top, center, or bottom and
horizontally at the left, center, or right. The
background position can also be set to start
a fixed amount or a % from the top left
corner of the element.

Web topic 15 1 basic css layout

Recommended

More Related Content

What's hot (19)

Viewers also liked (20)

Similar to Web topic 15 1 basic css layout (20)

More from CK Yang (10)

Recently uploaded (20)

Web topic 15 1 basic css layout