Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
5 views

CH-3[Web Design & Dev't I]

web

Uploaded by

Umer Hassanur
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

CH-3[Web Design & Dev't I]

web

Uploaded by

Umer Hassanur
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

CHAPTER THREE

Cascading Style Sheet

(CSS)
Eyasu D.

1
Cascading Style Sheets(CSS)
• 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
Cascading Style Sheets
• Cascading Style Sheet?
• a style language that defines layout of HTML documents
• supported by all browsers today.
• Difference between CSS and HTML
❖ HTML
• designed to specify the content and structure of web pages
❖ CSS:
• CSS defines how HTMLelements are to be displayed
(formatting structured content)
• used to specify the presentation, or styling, of elements on a
web page (e.g., fonts, spacing, sizes, colors, positioning).
• style portable web pages independently of their content &
structure
3
Cascading Style Sheets
• Benefits
• Web sites designed in CSS are faster to change and
update.
• speeds the time it takes to develop and update site layouts.
• Typography and page layout can be better controlled
• Style is separable & stored from structure
• document are potentially smaller
• this makes site maintenance easier.

4
Cascading Style Sheets
• 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)

• Cascading Order:
• Inline styles
• Internal styles
• External styles
• Browser default
• From highest to lowest
5
Cascading Style Sheets
• CSS Syntax
• Consists of :
• Aselector
• A property
• A value

• Format: selector { property : value }


• selector – tells the browser which part of the document is
affected
• property – specifies what aspect of layout is being set
• value – which gives the value for the style property
• Selectors can be grouped (separated by comma)
Ex. p, div, table { align: center }
• CSS declaration always ends with a semicolon 6
Cascading Style Sheets
• Types of Selectors
• HTML tag names or Element name selectors
• Class selectors
• Id selectors

• HTML tag names or Element name as selectors


• selects elements based on the element name.
• used to override the default attributes of HTML tags
Format: tag_name {property : value}
Ex. a { color: red;
text-decoration: overline;
}
7
• 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 clas =“color”>some text</p>
2. Styles for all elements
.style_name { property: value }
Ex. .color { color: blue; }
→ <div clas =“color”>some text</div>
<table clas =“color”>…</table> 8
• The Id selector
• unlike the class selector, the Id selector always applies to
only one element and defined with “#”
• uses the id attribute of an HTML element to select a specific
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 ??? 9
Cascading Style Sheets
Grouping Selectors
• If you have elements with the same style definitions, like this:
h1 {
text-align: center; • It will be better to group the selectors, to
color: red;
} minimize the code.
• To group selectors, separate each
h2 { selector with a comma.
text-align: center;
color: red;
} h1, h2, p {
p{ text-align: center;
text-align: center; color: red;
color: red; }
}

10
Cascading Style Sheets
CSS comments
• are used to explain the code, and may help when you edit the
source code at a later date.
• Comments are ignored by browsers.
• Format:
/* comment text */
• Example:
p{
color: red;
/* This is a single-line comment */
text-align: center;
}
11
Cascading Style Sheets
• Inserting CSS
Can be done in three ways:
1. Inline
• used to apply a unique style for a single element.
• using a style attribute in HTML element
• Format:
<tag_name style=“property:value; property: value;”>…
</tag_name>
• Example:
<h1 style="color:blue;margin-left:30px;">This is a
heading.</h1>
<table style=“background-color: yellow”>… </table> 12
Cascading Style Sheets
2. Internal
• using <style> element defined in the <head> element
• Format:
<head>
<style type=“text/css”>
property:value; ...
</style>
</head>
Example:

13
Cascading Style Sheets
3. External
• defined in a separate CSS file
• linked to an HTML document using the <link> tag :
<head>
<link rel=“stylesheet” type=“text/css” href=“url”>
</head>
• changes to the styles in the external CSS file will be
automatically reflected in all the HTML document in which
the style is attached

14
Cascading Style Sheets
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}
• text-indent: value
15
Cascading Style Sheets
• 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
16
CSS Fonts
• color property defines text color to be used for HTMLelement
• font-family property defines font to be used for HTML element
• font-size property defines text size to be used for HTML element
<head>
<style>
h1 {
color:blue;
font-family:verdana;
font-size:300%;
}
p {
color:red;
font-family:courier;
font-size:160%;
}
</style>
</head> 17
CSS Box Model
• Every HTML element has a box around it, even if you cannot
see it
• CSS border property defines a visible border around an HTML
element:
• Example p{
border:1px solid black;
}
• CSS padding property defines a padding (space) inside the
border:
Example
p{
border:1px solid black;
padding:10px;
}
18
Examples:
Inline Example
• Add <h1> and <p> with some text to demonstrate the style attribute
Internal Example
• Add <h1>,<h1> and <p>,<p> with some text to demonstrate the
<style> element in side the <head> element using the 3 types of
selectors
• Tag-name/element name
• Class selector(.)
• Id selector(#)
External Example
• Add <h1> and <p> with some text to demonstrate with <link>
element
<link rel="stylesheet" type="text/css" href=“filename.css"> 19
Example1:

20
Example2:

21
END OF CHAPTERTHREE
Next: Chapter Four

22

You might also like