Scribd
Upload
51 views48 pages

IP - Lecture 6, 7 Chapter-3

Uploaded by

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

IP - Lecture 6, 7 Chapter-3

Uploaded by

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

Chapter 3

Cascading Style
Sheets

1
CASCADING STYLE SHEETS
Objectives:

 To take control of the appearance of a Web


site by creating style sheets.
 To use a style sheet to give all the pages of a Web
site the same look and feel.
 To use the class attribute in order to apply
styles for different elements at a time
 To understand the box model and how to
control the margins, borders and padding.
 To use style sheets to separate presentation
from content.
2
CSS

 Style sheets in HTML allows us to specify typography


styles and spacing instructions for elements on a page.
 One of its major strengths is that a web developer can
create a stylesheet (filename.css) , link it with html
and then he can update or change one stylesheet and
thereby alter the presentation of all the web pages on a
web site.
 Each style has a unique name: a selector.
 The selectors and their styles are defined in one place.
 CSS has limitations, the first is that not all browsers
support all the features.
 CSS do not give you full control on the layout with
vertical placement as it does for the horizontal placing3
of elements on a website.
WHY WE USE STYLE SHEETS?

 Separate structure from appearance


 Create consistent appearance

 Ease of maintenance

 Increase accessibility- accessible by most users

 Apply additional effects (E.g. add hover effect to links


and Remove underlines on links)
 Reduce use of non-standard tags: some tags and
attributes have been depreciated from HTML5 so use of
style is a choice to include those attributes.
 Reduce web page file size- all styling properties are
mentioned in one file
4
HTML VS CSS

 HTML- focuses on marking up information


 CSS- focuses on formatting and presenting
information.
 CSS are a series of instructions that specify how
markup elements should appear on a Web
page.
 This separation of structure from presentation
simplifies maintaining and modifying a
document’s layout.

5
COMPARE CLASSIC HTML WITH CSS
<body>
<table>
<tr><td bgcolor="#FFCC00" align="left"><font
face="arial" size=“2" color="red"><b>this is line
1</b></font></td></tr>
<tr><td bgcolor="#FFCC00" align="left"><font
face="arial" size=“2" ><b>this is line
2</b></font></td></tr>
<tr><td bgcolor="#FFCC00" align="left"><font
face="arial" size=“2" color="red"><b>this is line
3</b></font></td></tr>
</table>
6
</body>
HERE IN CSS FORMAT
<head>
<style type=”text/css”>
.subtext { font-family: arial;
font-size: 10px;
color: red;
background-color:#FFCC00;
}
</style>
</head>
<body>
<table>
<tr><td class="subtext">this is line 1</td></tr>
<tr><td class="subtext">this is line 2</td></tr>
<tr><td class="subtext">this is line 3</td></tr>
</table>
</body> 7
ANATOMY OF A CSS RULE

selector - which part of the


document does this rule apply to
( HTML tag at which style will be
applied)

body{
font-family: arial, sans-serif;
font-size: 100%; }

value - What are we


property - which
setting the property
aspect of CSS are we
to.( values assigned to
changing ( type of 8
property)
attribute of HTML tag)
HOW TO SPECIFY A RULE?

Some examples:
H2 {color: blue;}
P{
font-size: 12pt;
font-family: Verdana, sans-serif;
}
h1, h2, h3 {
color: yellow;
background-color: black;
} 9
CSS STRUCTURE
HTML Selector { property: value;
property2: value2; etc }
p { font-family: times; …}
Note: The property is followed by a colon (:) and
the value is followed by a semicolon(;)
 Selector- HTML elements you wish to style
 tells a browser which elements in a page will be
affected by the rule.
 Property- attribute you wish to change
 Value-the value that the property takes
10
Types of Selectors

 Element selector-select elements based on the


element name.
e.g.
p { color: blue }- element selector
h1, h2, h3, h4 { font-style: italic; }- grouping selector
 Contextual selectors-used when tags are nested
ul li { font-weight: bold; }
#main img { border: solid black 5px; }
p.intro { font-family: verdana, sans-serif;}

11
 Class selectors-uses the HTML class attribute
which find elements with the specific class.
 used to apply the same style to many different
HTML tags on the same class
.ClassSelector { Property: Value; }
 Class selectors are preceded by dot followed by
a name and then a series of property: values.
 Class selectors can have almost any name, usually
you should pick a name that describes it function.
 e.g.

.redBold { color: red;


font-weight: bold;
}
12
 This class function can then be used to apply this style
to several different HTML tags in the body of your web
page
e.g.
<p class=”redBold”>this text will be red and bold </p>
<h2 class=”redBold”>This text will also be red and bold
</p>
 You can also specify the rule to affect only specific
HTML elements with that class.
 p.center {
text-align: center;
color: red;
}
 all p elements with class="center" will be center-
13
aligned
<html>
<head>
<title>Classes</title>
<style type="text/css">
.redBold { color: red }
b.navy {color: navy}
</style>
</head>
<body>
<p class="redBold"> This text should be red and bold</p>
<h2 class="redBold"> This should also be red and bold</h2>
<p><b class="navy">This should be navy in color</b></p>
<p class="navy">This should not be affected</p>
<p>This is ordinary text</p>
</body>
</html> 14
When referring to a Class selector you simply add the class to an HTML
tag like in the above example (class="classname") do not include the
period before the name. 15
SPAN AND DIV AS CARRIERS
 Two tags are particularly useful in combination with class
selectors: <SPAN> and <DIV>
 Both are "dummy" tags that don't do anything in themselves.
Therefore, they are excellent for carrying CSS styles.
 <SPAN> is an "inline-tag" in HTML, meaning that no line
breaks are inserted before or after the use of it.
 When used together with CSS, the <span> element can be used to
style parts of the text
 Eg.
<h1>My <span style="color:red">Important</span>Heading</h1>
 <DIV> is a "block tag", meaning that line breaks are
automatically inserted to distance the block from the
surrounding content (like <P> or <TABLE> tags).
 block level element that can be used as a container for other
HTML elements
 E.g. <div align="justify">
 HTML5 defines 8 new semantic HTML elements. All 16
these are block level elements (Reading assignment)
ID SELECTORS
 ID selectors are used to define unique parts of
a web page e.g. footer, header, table or other
unique element.
 Each Id element is unique and can only be
used once.
 The general syntax for an ID selector is:
#IDSelector {Property:Value;}
 Id selectors are preceded with the # hash symbol
and are unique-in other words you can only have
one specific id selector on a web page.
 They are used to define specific “boxes” on the
page or layers. 17
<HTML>
<HEAD>
<style type="text/css">
#layer1 {position:absolute; left:100; top:100; z-index:1;}
#layer2 {position:absolute; left:140;top:140; z-index:2;}
</style>
</HEAD>
<BODY>
<div ID="layer1">
<table border="1" bgcolor="#FFCC00"><tr><td>THIS IS LAYER
1<br>POSITIONED AT 100,100</td></tr></table>
</div>
<div ID="layer2">
<table border="1" bgcolor="#00CCFF"><tr><td>THIS IS LAYER
2<br>POSITIONED AT 140,140</td></tr></table>
</div>
</BODY>
</HTML>
 <!-- The z-index property specifies the stack order of an element.18
An element with greater stack order is always in front of an element
with a lower stack order -- >
ID selectors are used when you want to define a style relating to
an object with a unique ID. 19
LINKING HTML AND CSS

Inline Styles

 Add style information to a tag (useful for applying a


unique style to a single HTML element)
 declare an individual element’s format using style
attribute.
 The following examples applies inline styles to

elements to alter their font size and color.


<H2 style = “color: blue”> This will appear as blue. </H2>
<P style = “font-size: 12pt; font-family:Verdana, sans-serif”>
This paragraph will be set as per the specified Style. </P>

20
<html >
<head>
<title>Inline Styles</title>
</head>
<body>
<p>This text does not have any style applied to it.</p>
<!-- The style attribute allows you to declare -->
<!-- inline styles. Separate multiple styles -->
<!-- with a semicolon. -->
<p style = "font-size: 20pt">This text has the <em>font-
size</em> style applied to it, making it 20pt.
</p>
<p style = "font-size: 20pt; color: #0000ff">
This text has the <em>font-size</em> and <em>color</em>
styles applied to it, making it 20pt. and blue.</p>
</body>
</html> 21
22
EMBEDDED STYLE SHEETS

 Add style information to the document at the


beginning (used to define a common style
for all HTML elements on a page)
 Enable a Web-page author to embed an entire
CSS document in an HTML document’s head
section.
 Styles placed in the head apply to matching
elements in the entire document, not just to
a single element.
<head>
<style>P{color:blue;} </style>
} 23
<html>
<head>
<style type = “text/css”>
<H2 {color: blue}
P { font-size: 12pt; font-family: Verdana, sans-serif; }
</style>
<title> Example of using style sheets </title>
</head>
…….
…….
</html>
24
<html >
<head>
<title>Style Sheets</title>
<!-- this begins the style sheet section -->
<style type = "text/css">
em { background-color: #8000ff; color: white }
h1 { font-family: arial, sans-serif }
p { font-size: 14pt }
.special { color: blue }
</style>
</head>
<body>
25
<!-- this class attribute applies the .blue style -->
<h1 class = "special">Deitel & Associates, Inc.</h1>
<p>Deitel & Associates, Inc. is an internationally recognized
corporate training and publishing organization specializing in
programming languages, Internet/World Wide Web technology
and object technology education. Deitel & Associates, Inc. is a
member of the World Wide Web Consortium. The company
provides courses on Java, C++, Visual Basic, C, Internet and
World Wide Web programming, and Object Technology.</p>
<h1>Clients</h1>
<p class = "special"> The company's clients include many
<em>Fortune 1000 companies</em>, government agencies,
branches of the military and business organizations. Through
its publishing partnership with Prentice Hall, Deitel &
Associates, Inc. publishes leading-edge programming textbooks,
professional books, interactive CD-ROM-based multimedia
Cyber Classrooms, satellite courses and World Wide Web
courses.</p> 26
</body>
</html>
27
EXTERNAL STYLE SHEETS
 The most powerful way and a convenient way to create a
document with a uniform theme.
 Put all of your style in an external file
◦ Preferred - because two people can work independently
 With external style sheets (i.e., separate documents that
contain only CSS rules), Web-page authors can provide a
uniform look and feel to an entire Web site.
 Different pages on a site can all use the same style
sheet. Then, when changes to the style are required, the
Web-page author needs to modify only a single CSS
file to make style changes across the entire Website.
 Collect all styles in a separate text document.
 Creates links to that document.
<head>
<link rel = “STYLESHEET”
href = “/pathname/mystyle.css”
type = “text/css”> 28
</head>
The most popular method is the external style sheet:
<link rel="stylesheet" href="style.css“
type="text/css" media="screen" />
href:
◦ Tells the browser where to locate the style sheet, with either a
relative or absolute URL (Specifies the location of the linked
document)
rel:
◦ Tells the browser what to expect (specifies the relationship
between the current document and the linked document)
 stylesheet
 alternate stylesheet
 type:
◦ Tells the browser the type of document linked
◦ Common values:
 text/css 29
 text/javascript
 media:
◦ Tells the browser the type of device the style sheet is
for:
 screen: Computer display

 print: Printer

 projection: Projector

 aural: Speech synthetizer

 braille: Braille line

 tty: Console (text) display

 tv: Television

 all: All devices (default value)

30
/* An external stylesheet */

a { text-decoration: none }
a:hover { text-decoration: underline; color: red;
background-color: #ccffcc }
li em { color: red; font-weight: bold; background-
color: #ffffff }
ul { margin-left: 2cm }
ul ul { text-decoration: underline; margin-left: .5cm
}
 Once we wrote the style we need to save it with
filename.css format E.g styles.css 31
<!-- Linking external style sheets -->
<html >
<head>
<title>Linking External Style Sheets</title>
<link rel = "stylesheet" type = "text/css"
href = "styles.css" />
</head>
<body>
<h1>Shopping list for <em>Monday</em>:</h1>
<ul>
<li>Milk</li>
<li>Bread

32
<ul>
<li>White bread</li>
<li>Rye bread</li>
<li>Whole wheat bread</li>
</ul>
</li>
<li>Rice</li>
<li>Potatoes</li>
<li>Pizza <em>with mushrooms</em></li>
</ul>
<p>
<a href = "http://www.food.com">Go to the Grocery
store</a>
</p>
</body>
33
</html>
34
THE CSS BOX MODEL
 AllHTML elements can be considered as
boxes. In CSS, the term "box model" is
used when talking about design and
layout.
 The CSS box model is essentially a box
that wraps around HTML elements, and it
consists of: margins, borders, padding, and
the actual content.
 The box model allows us to place a border
around elements and to define space
between elements.
35
 The image below illustrates the box model:

 Margin - Clears an area around the border. The


margin does not have a background color, it is
completely transparent

36
 Border - A border that goes around the padding and
content.
 Padding - Clears an area around the content. The
padding is affected by the background color of the box
 Content - The content of the box, where text and
images appear
 In order to set the width and height of an element
correctly in all browsers, you need to know how the box
model works.

37
 Important: When you specify the width and height
properties of an element with CSS, you are just
setting the width and height of the content area.
 To know the full size of the element, you must also
add the padding, border and margin.
 The total width of the element in the example below
is 300px:
 width:250px;
padding:10px;
border:5px solid gray;
margin:10px;
 Let's do the math:
250px (width)
+ 20px (left and right padding)
+ 10px (left and right border)
+ 20px (left and right margin) 38

= 300px
 Thetotal width of an element should
always be calculated like this:
 Total element width = width + left padding + right
padding + left border + right border + left margin +
right margin
 Thetotal height of an element should
always be calculated like this:
 Total element height = height + top padding + bottom
padding + top border + bottom border + top margin +
bottom margin

39
 <html>
<head>
<style type="text/css">
div.ex
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>

40
CSS BORDER PROPERTIES
 The CSS border properties allow you to specify
the style and color of an element's border.
 Border-style
 Border-color
 Border-width

 Border Style
 The border-style property specifies what kind of
border to display.
 None of the border properties will have ANY effect
unless the border-style property is set!
 border-style values:
 none: Defines no border
 dotted: Defines a dotted border
 dashed: Defines a dashed border 41

 solid: Defines a solid border


 double: Defines two borders. The width of the two
borders are the same as the border-width value
 groove: Defines a 3D grooved border. The effect
depends on the border-color value
 ridge: Defines a 3D ridged border. The effect
depends on the border-color value
 inset: Defines a 3D inset border. The effect
depends on the border-color value
 outset: Defines a 3D outset border. The effect
depends on the border-color value

42
<!DOCTYPE html>
<html>
<head><style>
p.none {border-style: none;border-color: Green;}
p.dotted {border-style: dotted;border-color: Green;}
p.dashed {border-style: dashed;border-color: Green;}
p.solid {border-style: solid;border-color: Green;}
p.double {border-style: double;border-color: Green;}
p.groove {border-style: groove; border-color: Green;}
p.ridge {border-style: ridge; border-color: Green;}
p.inset {border-style: inset; border-color: Green;}
p.outset {border-style: outset;border-color: Green;}
p.hidden {border-style: hidden;border-color: Green;}
</style>
43
</head>
<body>
<p class="none">No border.</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="hidden">A hidden border.</p>
</body>
</html>
44
45
 Border Width
 The border-width property is used to set the width of the
border.
 The width is set in pixels, or by using one of the three pre-
defined values: thin, medium, or thick.
 Note: The "border-width" property does not work if it is
used alone. Use the "border-style" property to set the
borders first.
p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid; 46

border-width:medium;
}
 Imagine that you only had 250px of space. Let's
make an element with a total width of 250px:
 Example
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;

47
READING ASSIGNMENT- READ ABOUT THE
FOLLOWING HTML5 ELEMENTS AND INCLUDE THEM IN
YOUR PROJECT IMPLEMENTATION

 <article>  <main>
 <aside>  <mark>

 <details>  <nav>

 <figcaption>  <section>

 <figure>  <summary>

 <footer>  <time>

 <header>

 <video>

 <audio>
48

You might also like