Scribd
Upload
117 views

Lesson 2 CSS Selectors Div Span and Link

CSS works by applying rules to HTML elements using selectors to style their appearance, with rules containing declarations made of properties and values that determine things like color, size and layout; elements are treated as boxes that CSS can style through properties like display that control whether they are block or inline; common elements to style include div and span tags that divide content into sections or emphasize text.

Uploaded by

Helen Asuncion
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
117 views

Lesson 2 CSS Selectors Div Span and Link

CSS works by applying rules to HTML elements using selectors to style their appearance, with rules containing declarations made of properties and values that determine things like color, size and layout; elements are treated as boxes that CSS can style through properties like display that control whether they are block or inline; common elements to style include div and span tags that divide content into sections or emphasize text.

Uploaded by

Helen Asuncion
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 29

UNDERSTANDING CSS:

Thinking Inside the Box


Selectors, Div, Span, Link
The key to understanding how CSS works
is to imagine that there is an invisible box
around every HTML element.
In this example, block level elements are
shown with red borders, and inline elements
have green borders.
The <body> element creates the first box,
then the <h1>, <h2>, <p>, <i>, and <a>
elements each create their own boxes
within it.
• Using CSS, you could add a
border around any of the
boxes, specify its width and
height, or add a background
color. You could also control
text inside a box — for
example, its color, size, and
the typeface used.
CSS works by associating rules
with HTML elements. These rules
govern how the content of
specified elements should be
displayed. A CSS rule contains
two parts: a selector and a
declaration.
CSS Structure
Curly Braces

Colon

Selector p { Semi Colon

color: red;
} Value

Property

Declaration
Block
CSS Structure
Selectors indicate which element the rule
applies to. The same rule can apply to more
than one element if you separate the element
names with commas.

Declarations indicate how the elements


referred to in the selector should be styled.
Declarations are split into two
parts (a property and a value), and are
separated by a colon.
CSS Structure
CSS declarations sit inside curly brackets and
each is made up of two parts: a property and a
value, separated by a colon. You can specify
several properties in one declaration, each
separated by a semi-colon.
Display Property
• CSS display property allows you to
control how an element is displayed.
Block level element is laid out vertically.
As you can see, a new paragraph begins
with a new line after the end of another
paragraph.
• Inline level element is laid out horizontally
and will only proceed to the next line
when the end of the line is reached.
Display Property
Kind Description Example
Block Level Laid out vertically <p> block
Elements <p> block
Inline Level Laid out <em> element <b> element
Elements Horizontally
The following code, without the display
property, will give the result as shown below.
<html>
<head>
<title>Display Property</title>
<style type=“text/css”>
<!--
p.blue { color: blue; }
h1#red { color: red; }
-->
</style>
</head>
<h1 id=“red”> Visual Guide Series</h1>
<p class=“blue”>Cretive Design CS5</p>
<p class=“blue”>Web Design</p>
<p>Animation and Multimedia</p>
</body>
</html>
The following code, without the display property, will give the
result as shown below.
Property for Display
Property Keyword Description
display: Inline Inline display or horizontal layout
display: block Block display or vertical layout
display: list-item Display as a list item <li>
display: none No box or the element has no effect
on the layout
display: inherit Inherit value from parent
Adding the inline display attribute inside the
CSS style results in a browser output as shown.
<html>
<head>
<title>Display Property</title>
<style type=“text/css”>
<!--
p.blue { color: blue; }
h1#red { color: red; }
p {display: inline; }
-->
</style>
</head>
<h1 id=“red”> Visual Guide Series</h1>
<p class=“blue”>Cretive Design CS5</p>
<p class=“blue”>Web Design</p>
<p>Animation and Multimedia</p>
</body></html>
Result:
Div Tag
• Div divides the contents of a web page
into individual sections. This allows you to
apply styles to different sections of your
Web Page. It is a generic way of adding
structure to an HTML document.
• Div tag is a block level element and is,
therefore usually is applied to block HTML
and should not be used within a
paragraph. In most browsers, a div tag
will provide line spacing before and after
a block element.
Example of Div Tag
Output
Span Tag
• Span Tag is a generic way of adding
structure to an HTML Document. Span is
applied to an inline element. It is used to
emphasize words or sentences within a
paragraph.
Example of Span tag
Output
Example of Div and Span
Output
Assignment:
1. What are Classes and Class
Selector? Give some example
2. What are ID selector? Give an
example
3. What is Pseudo-Classes for
Links?
Transitional Page
www.animationfactory.com

Backdrops:
- These are full sized
backdrops, just scale them up!
- Can be Copy-Pasted out of
Templates for use anywhere!

You might also like