Scribd
Upload
32 views68 pages

Lesson 12 Css

Uploaded by

alanibjessica5
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
32 views68 pages

Lesson 12 Css

Uploaded by

alanibjessica5
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 68

Selectors,

Div, Span
and Link
LESSON 12
Objectives
• Identify the kinds of elements in CSS
• Understand class, id and multiple selectors
and grouping selectors
• Use display property, div tag, span tag, class,
id selector, pseudo-classes and links
DISPLAY PROPERTY
• CSS display property allows you to
control how an element is diplayed.
• Block level element is laid out vertically.
The new paragraph starts 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.
TYPES OF ELEMENTS IN CSS

TYPES DESCRIPTION EXAMPLE

Block level <p> block


Laid out vertically
elements
<p> block

Inline level
Laid out horizontally <em> element <b> element
elements
<html>
<head>
<title>Jemma Inc</title>
<style type="text/css">
<!--
p.blue { color : blue}
h1#red { color: red ; }
-->
</style>
</head>

<body>
<h1 id="red"> Visual Guide Series </h1>
<p class="blue">Creative Design CS5</p>
<p class="blue">Web Design</p>
<p>Animation and Multimedia</p>
</body>
</html>
PROPERTY FOR DISPLAY
PROPERT KEYWORD DESCRIPTION
Y
display: inli Inline display or horizontal
ne lay out
display: bloc Block display or vertical
k lay out
display: list- Display as a list item
item <li>
No box or the element has
display: no
no effect on the layout
ne
display: inher inherit value from
<html
<head>
<title>Jemma Inc</title>
<style type="text/css">
<!--
p.blue { color : blue;}
h1#red { color: red ; }
Inline display p { display: inline; }
-->
</style>
</head>
<body>
<h1 id="red"> Visual Guide Series </h1>
Paragraphs will <p class="blue">Creative Design CS5</p>
aligned <p class="blue">Web Design</p>
<p>Animation and Multimedia</p>
vertically
</body>
</html>
Div Tag
• Div divides the contents of a web page
into individual sections. It also allows you
to apply styles to different sections of
• your
It is apages.
generic way adding structure in
HTML Document.
• Div tag is a block level and will provide
line spacing and after a block element.
Atttributes for <Span></span>and
<div></div>
Attributes Definition Values
Indicates the CSS style to be
Class applied CSS class
name
ex: <div class="style1"></div>
<html
<head>
<title>Jemma Inc</title>
<style type="text/css">
<!--
p.blue { color : blue;}
h1#red { color: red ; }
. background {
Div class background-color : #cccccc;
font-weight : bold;
}
-->
</style>
</head>
<body>
<h1 id="red"> Visual Guide Series </h1>
Div class
<div class="background">
<p class="blue">Creative Design CS5</p>
<p class="blue">Web Design</p>
</div>
<p>Animation and Multimedia</p>
</body>
</html>
Span Tag
• Span tag is a generic way of adding
structure to an HTML document.
• It is also applied to an inline element
and used to emphasize words or
sentences within a paragraph.
<html>
<head>
<title>Jemma Inc</title>
<style type="text/css">
<!--
p.blue { color : blue; }
h1#red { color: red ; }
. backgnd {
background-color : #ccc;
font-weight: bold;
}
Span . txtcol { color: blue ;}
-->
class </style>
</head>
<body>
<h1 id="red"> Visual Guide Series </h1>
<div class="backgnd">
<p class="blue">Creative Design CS5</p>
<p class="blue">Web Design</p>
</div>
Span class <p>Animation <span class="txtcol">and</span>
Multimedia</p>
</body>
</html>
Span Tag and
Div
• Span and Div tags do not styling
information.
• Span and Div usually used to
format a part of the content by
using CSS.
• The general difference between
the Span and Div;
• Div is has a line breaks before
and after it.
• Span is used for small chunk of
code while Div is for larger ones.
<html
<head>
<title>Jemma Inc</title>
<link rel="stylesheet"
href="jemmainc.css" link.css>
</head>
Div <body>
<div class="Style1">
Class <p><font size="4"> Creative Design CS5 contains Adobe Photoshop,
Illustrator, InDesign and Acrobat. The book aims to educate the
students in creating, designing and editing graphics using the different
software that may work relatively.
<span class="style2"> Creative </span> Design
Span <span class="style2"> CS5</span> targets both knowledge and

class application toward specific output that would basically develop skills
towards a career. </font></p>
</div>
</body>
</html>
.style1 {
boarder: dotted blue;
font-family: Verdana;
font-size: 14px;
width: 400px;
}
.style2 {
font-family: Courier New;
font-size: 14px;
font-weight: bold;
color: red;
What are classes
• Class is a user-defined selector. You can create a
class to apply a style rule to specific HTML tags.
• Classes are defined dot (.).
• Two methods of writing class: First, by
indicating the HTML element to followed
by a dot and followed by the class name.
Second, by writing the class name
p. blueFont {
color: blue }
.redFont {
color: red
}
<html>
<head>
<title>Jemma Inc</title>
<style type="text/css">
<!--
p.blue { color: blue; }
-->
</style>
</head>
<body>
<h1> Visual Guide Series </h1>
<p class="blue">Creative Design CS5</p>
<p class="blue">Web Design</p>
<p>Animation and Multimedia</p>
</body>
</html>
ID Selector
• Id selector is applied to one element in a
page. It is normally used once, usually in
a page title or the navigation part of the
page.
• ID selector defined "#" and uses the id
attributed of the HTML element.
<html>
<head>
<title>Jemma Inc</title>
<style type="text/css">
<!--
p.blue { color : blue; }
h1#red { color: red ; }
-->
</style>
</head>
<body>
<h1 id="red"> Visual Guide Series </h1>
<p class="blue">Creative Design CS5</p>
<p class="blue">Web Design </p>
<p class="blue">Animation and Multimedia</p>
<p>Visual Basic and Access</p>
<p>Spreadsheets and Database</p>
<p>Office Productivity MS Office 2010</p>
</body>
</htm>
Multiple Selectors
• When two or more selectors
have the same properties and
values, a comma is used to
separate the selectors and use
only one set of properties and
values.
<html>
<head>
<title>Jemma Inc</title>
<link rel="stylesheet">
href="jemmainc.css" type="text/css">
</head>
<body>
<h1> Visual Guide Series </h1>
<p>Creative Design CS5</p>
<p>Web Design </p>
<p>Animation and Multimedia</p>
<p>Visual Basic and Access</p>
</body>
</html>
p, h1 {
font-family: Arial;
color: green;
}
Grouping Selectors
• You can group selectors and
combines it in one CSS file.
• Each selector should be
separated with a comma.
h1 { color: blue;
}
p { color: blue;
}
p { background-color:
black;
}
h1, p { color: blue;
}
p { background-color:
black;
}
Nesting Selectors

• You can apply a style for


a selector within a
selector.
p { color: red;
text-align: center;
}
. style {background-color: green;
}
. style p { color: white;
}
Setting
Dimension
• CSS used to managed dimension such
as visibility, width or height of HTML
elements.
PROPERTY FOR DIMENTIONS

PROPERTY DEFINITION EXAMPLE

Visibility indicates if an element is visible or visibility: visible


hidden
width indicates the width width: 200px

height indicates the height


height: auto

line-height indicates the line spacing line-height:11 px

max-height max-height: 12 px
indicates the maximum height
min-height indicates the minimum min-height :12

height px

max-width Indicates the maximum width max-width:


12px

min-width Indicates the minimum width min-width:


12px
<html>
<head>
<title>CSS Dimension</title>
<link rel="stylesheet"
href="jemmainc.css" type="text/css">
</head>
<body>
<p class="NoDimensions" >
This is a paragraph. </p>
<p class="Hidden">
There's still a paragraph here. </p>
<p class="HasDimensions">
Another paragraph here. </p>
</body>
</html>
.NoDimensions {
font-family: Times, Georgia;
font-size: 30px;
}
.HasDimensions {
font-family: Arial, Verdana;
width: 50%;
}
.Hidden {
font-family: Arial, Verdana;
font-size: 12px;
visibility: hidden;
}
p
<html>
<head>
<style type="text/css">
<! --
h1 { height: 100px; }
p { width: 300px; }
-->
</style>
</head>
<body>
<h1>Cascading Style Sheets</h1>
<p> External Style Sheets allow you to change the layout of your entire Website
by simply changing the external style sheet and every page is instantly
updated.</p>
<p>Embedded Style Sheets are used when you have a page that you want to
present in a different style from other pages. Embedded style sheets override
external style sheets.</p>
</body>
</html>
Pseudo- classes and Links
• Pseudo-classes are defined by a colon and are not
user-define. It can be used on specific HTML
elements only.
• Four (4) element of anchor: Link, visited, hover and
active.
• Be reminded that the hover property should be placed
after link property for it to function properly.
PSEUDO-CLASSES AND LINKS PROPERTY AND SYNTAX

PROPERT VALUE DESCRIPTION


Y
:link a: link {... }Sets unvisited link characteristic.
:visited a: visited Sets visited link
{... } characteristic or edit
:active a: active Sets the character of an active
{... } link element as when the
usersclick the mouse on the link
Sets the character of a
a: hover link element as when
:hover
{... } the user hovers or
moves the mouse over
the link.

:focus a:focus Sets the character of an


active link element as
{...}
when the user clicks
and moves the mouse
<html>
<head>
<style type="text/css">
a. one : link (color : #ff0000; }
a. one : visited {color: #0000ff; }
a. one : hover {color:#ffcc00; }
a. two: link {color: #ff0000; }
a. two: visited {color:#0000ff; }
a. two: hover {font-size: 150%; }
a. three : link [color: #ff0000; }
a. three : visited {color: #0000ff;}
a. three : hover {background : # 66ff66; }
a. four : link {color: #ff0000; }
a. three : visited {color: #0000ff;}

a. three : hover {background : # 66ff66; }

a. four : link {color: #ff0000; }

a. four: visited {color: #0000ff; }

a. four : hover {font-family: monospace; }

a. five : link {color:#ff0000; text-decoration:


none; }
<body>
<h3>Jemma Inc</h3>
<p><b><a class="one" href="default.asp" target="
blank">Books</a></b></p> <p><b><a class="two"
href="default.asp" target="
blank">Software</a></b></p> <p><b><a
class="three" href="default.asp" target="
blank">Hardware</a></b></p> <p><b><a
class="four" href="default.asp" target="
blank">Training</a></b></p> <p><b><a class="five"
href="default.asp" target="
blank">Events</a></b></p>
</body>
<html>
<head>
<title> My Pseudo-class</title>
<link rel="stylesheet"
href="pseudo.css" type="text/css">
</head>
<body>
<a class="one"
href="https://www.facebook.com">FACEBOOK</a></p>
<a class="two" href="https://www.youtube.com">YOUTUBE</a></p>
<a class="three"
href="https://www.messenger.com">MESSENGER</a></p>
a.one:link { color: aquamarine;}
a.one:visited { color: deeppink;}
a.one:hover { color: lightblue;}
a.one:active { color: blueviolet;}
a.two:link { color: grey;}
a.two:visited { color: yellowgreen;}
a.two:hover { color: lightyellow;}
a.two:active { color: lightgrey;}
a.three:link { color: indianred;}
a.three:visited { color: black;}
a.three:hover { color: slategray;}
a.three:active { color: orangered;}
Quiz #2
Part 1.
Identify the correct answers to the following questions.
1. These classes are defined by a colon.
2-5. What are the four pseudo classes of anchor element.
6. It is for hyperlinks that have not yet been visited.
7. It is for hyperlinks when they have the mouse stay
close over them.
8. Sets the character of an active link
element as when the user clicks and moves
the mouse on the link.

9-10. The_____property should be placed


after the_____property for it to function
properly.
Part II.
Write T if the statement is true and F if not.
1. A code is a user-defined selector.
2. Classes are defined by a dots.
3. One way to write a class is by writing the class name as
precede by a dot.
4. There are three ways to write a class.
5. Class selector is applied to a particular set of elements.
6. Multiple selector is a style applied to one element of a
page.
7. You can write a class by indicating the header element
followed by a dot.
8. You may always run the case where two or more
selectors might just have the same properties and
values.

9. With the use of classes, you can control individual


HTML element formatting.

10. You can call a class by putting the selector


attribute in the tag you want.
Identify the following.
Part III.
1-
2.
3-
4.
5
.
ACTIVITY
Direction: Copy the codes below. Make
your own link and color. Screenshot the
code and the output.
<html>
<head>
<title> My Pseudo-class</title>
<link rel="stylesheet"
href="pseudo.css" type="text/css">
</head>
<body>
<a class="one"
href="https://www.facebook.com">FACEBOOK</a></p>
<a class="two" href="https://www.youtube.com">YOUTUBE</a></p>
<a class="three"
href="https://www.messenger.com">MESSENGER</a></p>
a.one:link { color: aquamarine;}
a.one:visited { color: deeppink;}
a.one:hover { color: lightblue;}
a.one:active { color: blueviolet;}
a.two:link { color: grey;}
a.two:visited { color: yellowgreen;}
a.two:hover { color: lightyellow;}
a.two:active { color: lightgrey;}
a.three:link { color: indianred;}
a.three:visited { color: black;}
a.three:hover { color: slategray;}
a.three:active { color: orangered;}
Thank You

You might also like