Scribd
Upload
11 views39 pages

Chapter 2 - Part 3 (1)

Uploaded by

Getachew Abera
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
11 views39 pages

Chapter 2 - Part 3 (1)

Uploaded by

Getachew Abera
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/ 39

Internet Programming I

(CoSc3121)
Chapter 2 (Part III)
Web Page Development Using HTML

Prepared By: Helawe Behailu April, 2022


Content
• Cascading Style Sheets (CSS)
• Types of CSS styles
Cascading Style Sheets (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/she can
update or change one stylesheet and thereby alter the presentation
of all the web pages on a web site.
• CSS has some limitations, the first is that not all browsers support all
the features.
• Each style has a unique name: a selector.
• The selectors and their styles are defined in one place.
Cascading Style Sheets (cont...)
Why we use style sheets?
• Separate structure from appearance
• Create consistent appearance
• Ease of maintenance
• Increase accessibility
• 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
Cascading Style Sheets (cont...)
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.
Cascading Style Sheets (cont...)
Compare Classic HTML with CSS
• Classic HTML
<body>
<table>
<tr>
<td bgcolor="#FFCC00" align="left"><font face="arial" size="10px" color="red"><b>this is line
1</b></font></td>
</tr>
<tr>
<td bgcolor="#FFCC00" align="left"><font face="arial" size="10px" color="red"><b>this is line
2</b></font></td>
</tr>
<tr>
<td bgcolor="#FFCC00" align="left"><font face="arial" size="10px" color="red"><b>this is line
3</b></font></td>
</tr>
</table>
</body>
Cascading Style Sheets (cont...)
Compare Classic HTML with CSS (cont...)
• 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>
Cascading Style Sheets (cont...)
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%; }

Property - which aspect of Value - What are we setting


CSS are we changing (type of the property to. (values assigned
attribute of HTML tag) to property)
Cascading Style Sheets (cont...)
Example
H2 {
color: blue
}
P{
font-size: 12pt;
font-family: Verdana, sans-serif;
}
h1, h2, h3 {
color: yellow;
background-color: black;
}
Cascading Style Sheets (cont...)
HTML Selector {property: value; property2: value2; etc...}
Example: p {font-family: times; …}
Note: The property is followed by a colon (:) and the value is followed by a
semicolon(;)
• Selector - on a simple level 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 - value the property takes.
Cascading Style Sheets (cont...)
Types of Selectors
1. Element Selector - selects elements based on the element name.
Example:
p { color: blue } - element selector
h1, h2, h3, h4 { font-style: italic; } - grouping selector
2. Contextual Selectors - used when tags are nested.
Example:
ul li { font-weight: bold; }
#main img { border: solid black 5px; }
p .intro { font-family: verdana, sans-serif;}
Cascading Style Sheets (cont...)
Types of Selectors (cont...)
3. Class Selectors - uses the HTML class attribute which finds 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.
Example:
.redBold { color: red;
font-weight: bold;
}
Cascading Style Sheets (cont...)
Types of Selectors (cont...)
4. 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.
Cascading Style Sheets (cont...)
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.
Cascading Style Sheets (cont...)
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>
Cascading Style Sheets (cont...)
Linking HTML and CSS (cont...)
• 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>
</head>
Cascading Style Sheets (cont...)
Linking HTML and CSS (cont...)
• 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.
Cascading Style Sheets (cont...)
Linking HTML and CSS (cont...)
• External Style Sheets (cont...)
• Example:
<head>
<link rel = “STYLESHEET”
href = “/pathname/mystyle.css”
type = “text/css”>
</head>
Cascading Style Sheets (cont...)
• The most popular method is the external style sheet:
<link rel="stylesheet" href="style.css“ type="text/css"/>
• 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

• type: Tells the browser the type of document linked. Common values:
• text/css
• text/javascript
/* 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; }
20
<!-- 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

21
<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>
</html>
22
Cascading Style Sheets (cont...)
The CSS Box Model
• All HTML 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.
Cascading Style Sheets (cont...)
The CSS Box Model (cont...)
• The image below illustrates the box model:
Cascading Style Sheets (cont...)
The CSS Box Model (cont...)
• Margin - Clears an area around the border. The margin does not have a
background color, it is completely transparent
• Border - A border that goes around the padding and content. The border is
affected by the background color of the box
• 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
(NB. In order to set the width and height of an element correctly in all browsers,
you need to know how the box model works.)
Cascading Style Sheets (cont...)
The CSS Box Model (cont...)
• NB: 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 300
___px:
width:250px;
padding:10px;
border:5px solid gray;
margin:10px;
Cascading Style Sheets (cont...)
The CSS Box Model (cont...)
• Let's do the math:
250px (width)
+ 20px (left and right padding)
+ 10px (left and right border)
+ 20px (left and right margin)
= 300px
Cascading Style Sheets (cont...)
The CSS Box Model (cont...)
• The total 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

• The total 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
Cascading Style Sheets (cont...)
The CSS Box Model (cont...)
• Example:
<html>
<head>
<style type="text/css">
div.ex {
width: 220px;
padding: 10px;
border: 5px solid gray;
margin: 0px;
}
</style>
</head>…………………………
Cascading Style Sheets (cont...)
CSS Border Properties
• The CSS border properties allow you to specify the style and color
of an element's border.
• 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!
Cascading Style Sheets (cont...)
CSS Border Properties (cont...)
• Border-style values:
• none: Defines no border
• dotted: Defines a dotted border
• dashed: Defines a dashed border
• 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.
<!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>
</head>

33
<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>

34
35
Cascading Style Sheets (cont...)
CSS Border Properties (cont...)
• 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;
border-width:medium;
}
Cascading Style Sheets (cont...)
• 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;
Reading Assignment
• Read about the following Html5 elements and include them in your
project implementation.
• <aside> • <main>
• <details> • <mark>
• <figcaption> • <nav>
• <figure> • <section>
• <footer> • <summary>
• <header> • <time>
• <video> • <article>
• <audio>
END

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy