Scribd
Upload
26 views

Chapter Two Con't: Cascade Style Sheet (CSS)

The document discusses Cascading Style Sheets (CSS). CSS allows styling of web pages by separating presentation from content. There are three ways to attach CSS styles to HTML: inline within an element, internally within the <head> using <style>, or externally in a .css file linked via <link>. CSS rules use selectors, properties, and values to style elements. Common CSS properties discussed include background, text, fonts, borders, margins and padding. The document provides examples of CSS rules and selectors.

Uploaded by

Serkalem Negusse
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
26 views

Chapter Two Con't: Cascade Style Sheet (CSS)

The document discusses Cascading Style Sheets (CSS). CSS allows styling of web pages by separating presentation from content. There are three ways to attach CSS styles to HTML: inline within an element, internally within the <head> using <style>, or externally in a .css file linked via <link>. CSS rules use selectors, properties, and values to style elements. Common CSS properties discussed include background, text, fonts, borders, margins and padding. The document provides examples of CSS rules and selectors.

Uploaded by

Serkalem Negusse
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/ 16

Chapter Two…Con’t

Part II

Cascade Style Sheet(CSS)


1 By: Fiseha B.(MSc), Oct 2014,Dilla
University
Cascading Style Sheets (CSS)
 A style sheet is a set of rules that controls the
formatting of HTML elements on one or more Web
pages
 An extension (addition) to HTML which allows us to
style our web pages
 Provides more detailed attributes to elements than
the ones defined in standard HTML
 Styles are defined once and used any number of times
and in several contexts
 Clearly separates content from its presentation
Saves a lot of work
 Especially in website maintenance and upgrading

2 By: Fiseha B.(MSc), Oct 2014,Dilla


University
CSS (cont’d)
 CSS styles can be specified:
 Inside a single HTML element (inline)
 Inside the <head> element of an HTML document
(internal)
 In an external CSS file (external)
 Rules of precedence application:
 Inline styles
 Internal styles
 External styles
 Browser default
 From highest to lowest

3 By: Fiseha B.(MSc), Oct 2014,Dilla


University
CSS (cont’d)
 Rules
 The set of rules are contained between
 <style> and </style> for Internal CSS
 < html_Tag style=“CSS style”> for inline CSS
 Saved as .css for external CSS
 CSS rules syntax consists of :
 A selector
 A property
 A value
 Format:
selector { property : value }

4 By: Fiseha B.(MSc), Oct 2014,Dilla


University
CSS (cont’d)
 Types of selectors
 HTML tag names
 Class selectors
 Id selectors
 HTML tag names as selectors
 used to override the default attributes of HTML tags
Format: tag_name {property : value}
Ex. a { color: red;
text-decoration: overline
}
 Selectors can be grouped (separated by comma)
Ex. p, div, table { align: center }

5 By: Fiseha B.(MSc), Oct 2014,Dilla


University
CSS (cont’d)
 The class selector
 define generic styles that can be applied to different HTML
elements
 applied to the class attribute of HTML elements
Format:
1. Styles for a particular element
tag_name.style_name { property: value }
Ex. p.color { color: green }
 <p class=“color”>some text</p>
2. Styles for all elements
.style_name { property: value }
Ex. .color { color: blue }
 <div class=“color”>some text</div>
<table class=“color”>…</table>
6 By: Fiseha B.(MSc), Oct 2014,Dilla
University
CSS (cont’d)
 The Id selector
 unlike the class selector, the Id selector always applies to only
one element
Format:
1. Styles for a particular element
tag_name#style_name { property: value }
Ex. p#color { color: green }
 <p id=“color”>some text</p>
2. Styles for all elements
#style_name { property: value }
Ex. #color { color: blue }
 <div id=“color”>some text</div>
<table id=“color”>…</table> possible ???

7 By: Fiseha B.(MSc), Oct 2014,Dilla


University
CSS (cont’d)
 CSS comments
 Format:
/* comment text */
 Attaching a style definition
Can be done in three ways:
 inline
<tag_name style=“property:value; property: value;”> …
</tag_name>
Ex. <table style=“background-color: yellow”>… </table>

8 By: Fiseha B.(MSc), Oct 2014,Dilla


University
CSS (cont’d)
 internal
defined in the <head> element
<style type=“text/css”>
selector{property:value; ...}
</style>
 external
 defined in a separate CSS file
 linked to an HTML document using the <link> tag :
<link rel=“stylesheet” type=“text/css” href=“url” />
 changes to the styles in the external CSS file will be
automatically reflected in all the HTML document in which
the style is attached

9 By: Fiseha B.(MSc), Oct 2014,Dilla


University
CSS (cont’d)
 some common CSS properties
 Background
 background-color: color
 background-image: url(url)
 background-repeat: repeat_type {repeat, repeat-x, repeat-
y, no-repeat}
 background-attachment: attachment_type {scroll, fixed}
 Text
 color: color
 direction: direction {ltr, rtl} borwser issue??
 letter-spacing: value
 text-align: alignment {left, right, center, justify}
 text-decoration: decoration {none, underline, overline, line-
through, blink}
10
 text-indent: valueBy: Fiseha B.(MSc), Oct University
2014,Dilla
CSS (cont’d)
 text-transform: transform {none, capitalize, uppercase,
lowercase}
 word-spacing: value
 Fonts
 font-style: style {normal, italic, oblique}
 font-weight: weight {normal, bold, bolder, lighter, 100, 200,
…}
 font-size: size
 font-family: font_list (in order of precedence, separated by
comma)
 Borders
 Margins
 Padding
 List properties
11 By: Fiseha B.(MSc), Oct 2014,Dilla
University
Example
<style>
div.blue1
{width:100px;height:200px;background-color:blue; border-style:none;
position:relative;left:0%;top:0px;}
div.yellow1 {width:100px;height:150px;background-color:yellow; border-style:none;
position:relative;left:100px;top:-200px;}
div.red1
{width:100px;height:150px;background-color:red; border-style:none;
position:relative;left:200px;top:-350px;}
div.green1 {width:200px;height:50px;background-color:green; border-style:none;
position:relative;left:100px;top:-350px;}
</style>
[ ... ]
<div class = "blue1"></div>
<div class = "yellow1"></div>
<div class = "red1"></div>
<div class = "green1"></div>

12 By: Fiseha B.(MSc), Oct 2014,Dilla


University
Question?

Next: XML
13 By: Fiseha B.(MSc), Oct 2014,Dilla
University
Introduction to XML
 HTML describes presentation
 XML describes content
<bibliography>
<book> <title> Foundations of Databases </title>
<author> Abiteboul </author>
<author> Hull </author>
<author> Vianu </author>
<publisher> Addison Wesley </publisher>
<year> 1995 </year>
</book>
<book> <title> Data on the Web </title>
<author> Abiteboul </author>
<author> Buneman </author>
<author> Suciu </author>
<publisher> Morgan Kaufmann </publisher>
<year> 1999 </year>
</book>
</bibliography>
14 By: Fiseha B.(MSc), Oct 2014,Dilla
University
Difference between HTML & XML
 XML is not a replacement for HTML.
 Different goals:
 XML was designed to describe data and to focus on
what data is.
 HTML was designed to display data and to focus on
how data looks.
 HTML is about displaying information, XML is
about describing information.

15 By: Fiseha B.(MSc), Oct 2014,Dilla


University
Question?

16 By: Fiseha B.(MSc), Oct 2014,Dilla


University

You might also like