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

chapter three (1)

Chapter Three covers Cascading Style Sheets (CSS), explaining its purpose in web design, syntax, and how to link it with HTML. It details various style properties, including text, backgrounds, borders, and layout techniques, as well as the benefits of using CSS for improved accessibility and maintainability. The chapter also includes examples of inline, embedded, and external CSS styles, along with practical applications like navigation bars.

Uploaded by

yefeco6136
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

chapter three (1)

Chapter Three covers Cascading Style Sheets (CSS), explaining its purpose in web design, syntax, and how to link it with HTML. It details various style properties, including text, backgrounds, borders, and layout techniques, as well as the benefits of using CSS for improved accessibility and maintainability. The chapter also includes examples of inline, embedded, and external CSS styles, along with practical applications like navigation bars.

Uploaded by

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

CHAPTER THREE

Cascading Style Sheets (CSS)


Outline
CSS Basics
Style Properties
 Introduction to CSS
 Foreground and Background
 CSS Syntax (CSS Selectors and Properties
Declarations)
 Font and Text Properties
 Attaching CSS with HTML (External ,
 Table Styling Properties
Embedded and Inline)
 More On Styling List (Creating
Style Sheet Rules
Navigation bars)
 Style Rules Precedence
 Layout and Positioning Properties
What is CSS
It is a simple design language intended to simplify the
process of making web pages presentable.

CSS handles the look and feel part of a web page.

CSS is easy to learn and understand but it provides powerful


control over the presentation of an HTML document.

Most commonly, CSS is combined with the markup languages


HTML or XHTML.
3
What is CSS
Cascading Style Sheets (CSS)
Used to describe the arrangement of documents
Define sizes, spacing, fonts, colors, layout, etc.
Improve content accessibility
Improve flexibility

4
CSS Syntax
Some CSS styles are inherited and some not
Text-related properties are inherited font-size, font-
family, line-height, text-align, list-style, etc
Box-related and positioning styles are not inherited -
width, height, border, margin, padding, position,
float, etc.> elements do not inherit color and text-
decoration

5
CSS Syntax
/* These properties are inherited */
p{
color: blue;
font-size: 18px;
}

div {
color: red;
font-size: 14px;
}

section {
font-family: Arial, sans-serif;
}

/* The paragraph will inherit color and font-size from div and font-family: Arial
from section */If a p is inside the div
Properties that are commonly inherited:
 color
 font-family
 font-size
 line-height
 text-align
 visibility

Non-Inherited Properties:
•margin, padding, border, background, width, height, etc., are not inherited by default.
Style Sheets Syntax
Stylesheets consist of rules, selectors, declarations, properties and
values

Selectors are separated by comma


Declarations are separated by semicolons
Properties and values are separated by colons
h1,h2,h3 { color: green; font-weight: bold; }

8
Selectors
Selectors used to determine on which element the rule will be
applied:

All elements of specific type (tag)

Those that Mach a specific attribute (id, class, tr,td etc.)

9
Linking HTML and CSS
HTML (content) and CSS (presentation) can be linked in three
ways:
Inline: the CSS rules in the style attribute
No selectors are needed
Embedded: in the <head> in a <style> tag
External: CSS rules in separate file (best)
Usually a file with .css extension
Linked via <link rel="stylesheet" href=…>
10
Inline Styles: Example
inline-styles.html
<!DOCTYPE html">
<head>
<title>Inline Styles</title>
</head>
<body>
<p>Here is some text</p>
<!--Separate multiple styles with a semicolon-->
<p style="font-size: 30pt">Here is some
more text</p>
<p style="font-size: 20pt;color:
#0000FF" >Even more text</p>
</body>
</html>

11
Embedded Styles
• Embedded in the HTML in the <style> tag:
• The <style> tag is placed in the <head> section of the
document

• Used for document-specific styles


<style>
...
<.style

12
Embedded Styles: Example
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
13
External CSS Styles
External linking
• Separate pages can all use a shared style sheet
• Only modify a single file to change the styles across
your entire Web site (see http://www.csszengarden.com/)
link tag (with a rel attribute)
• Specifies a relationship between current document
and another document
<link rel="stylesheet" type="text/css" href="styles.css">

link elements should be in the <head>


14
External Styles: Example (2)
external-styles.html styles.css

<!DOCTYPE html>
body
<html>
{
<head>
background-color: pink;
<link rel="stylesheet" href="styles.css">
}
</head>
h1 {
<body>
color: blue;
<h1>This is a heading</h1>
}
<p>This is a paragraph.</p>
p {
</body>
color: red;
</html>
}

15
Text-related CSS Properties
color – specifies the color of the text
font-size – size of font: xx-small, x-small, small,
medium, large, x-large, xx-large, smaller, larger or
numeric value
font-family – comma separated font names
• Example: verdana, sans-serif, etc.
• There should always be at least one generic font
font-weight can be normal, bold, bolder, lighter or a
number in range [100 … 900]

16
CSS Rules for Fonts (2)
• font-style
• Values: normal, italic, oblique

• text-decoration
• Values: none, underline, line-trough, overline,
blink

• text-align
• Values: left, right, center, justify
17
Shorthand Font Property
• font
• Shorthand rule for setting multiple font properties at
the same time
font:italic normal bold
12px/16px verdana
• is equal to writing this:
font-style: italic;
font-variant: normal;
font-weight: bold;
font-size: 12px;
line-height: 16px;
font-family: verdana;
18
Backgrounds
• background-image
• URL of image to be used as background, e.g.:
background-image:url("back.gif");

• background-color
• Using color
• background-repeat
• repeat-x, repeat-y, repeat, no-repeat
• background-attachment
• fixed / scroll
19
Backgrounds (2)
Background-position: specifies vertical and horizontal
position of the background image

• Vertical position: top, center, bottom

• Horizontal position: left, center, right

• Both can be specified in percentage or other numerical


values

• Examples:
background-position: top left;

background-position: -5px 50%;


20
Borders
Border-width: thin, medium, thick or numerical value (e.g. 10px)

border-color: color alias or RGB value

border-style: none, hidden, dotted, dashed, solid, double,


groove, ridge, inset, outset

Each property can be defined separately for left, top, bottom and
right
• border-top-style, border-left-color, …
21
Width and Height
width – defines numerical value for the width of element,
e.g. 200px

height – defines numerical value for the height of element,


e.g. 100px
• By default the height of an element is defined by its
content
• Inline elements do not apply height, unless you change
their display style.
22
Margin and Padding
margin and padding define the spacing around the
element
margin is the spacing outside of the border
padding is the spacing between the border and the
content
Numerical value, e.g. 10px or -5px
Can be defined for each of the four sides separately -
margin-top, padding-left, …
23
Margin and Padding: Short Rules
• margin: 5px;
Sets all four sides to have margin of 5 px;
• margin: 10px 20px;
top and bottom to 10px, left and right to 20px;
• margin: 5px 3px 8px;
top 5px, left/right 3px, bottom 8px
• margin: 1px 3px 5px 7px;
top, right, bottom, left (clockwise from top)
• Same for padding
24
The Box Model

25
Positioning
position: defines the positioning of the element in the page
content flow
 The value is one of:
• static (default)
• relative – relative position according to where the element
would appear with static position
• absolute – position according to the innermost positioned
parent element
• fixed – same as absolute, but ignores page scrolling
26
Float
• float: the element “floats” to one side
• left: places the element on the left and following content
on the right
• right: places the element on the right and following
content on the left
• margins of floated elements do not collapse
• floated inline elements can apply height
27
Clear
• clear

Sets the sides of the element where other floating


elements are NOT allowed

Used to "drop" elements below floated ones or expand a


container, which contains only floated children

Possible values: left, right, both

• Clearing floats

additional element (<div>) with a clear style


28
Opacity
• opacity: specifies the opacity of the element
• Floating point number from 0 to 1
• For old Mozilla browsers use –moz-opacity
• For IE use filter:alpha(opacity=value) where value is
from 0 to 100; also,

29
Visibility
• visibility
• Determines whether the element is visible
• hidden: element is not rendered, but still occupies
place on the page (similar to opacity:0)
• visible: element is rendered normally

30
Display
• display: controls the display of the element and the way it is
rendered and if breaks should be placed before and after the element

• inline: no breaks are placed before and after (<span> is an inline


element)

• block: breaks are placed before AND after the element (<div> is
a block element)

• none: element is hidden and its dimensions are not used to


calculate the surrounding elements rendering (differs from
visibility: hidden!)

31
Overflow
• overflow: defines the behavior of element when content
needs more space than you have specified by the size
properties or for other reasons. Values:
visible (default) – content spills out of the element
auto - show scrollbars if needed
scroll – always show scrollbars
hidden – any content that cannot fit is clipped
32
Other CSS Properties
• cursor: specifies the look of the mouse cursor
when placed over the element
• Values: crosshair, help, pointer, progress,
move, hair, col-resize, row-resize, text,
wait, copy, drop, and others
• white-space – controls the line breaking of text.
Value is one of:
• nowrap – keeps the text on one line
• normal (default) – browser decides whether to
brake the lines if needed

33
Table Styling Properties

• Table Borders

table, th, td {
border: 1px solid;
}
• Table widith thight
• table {
width: 100%;
height:40%;
}
Cont.
• CSS Table Alignment
td {
text-align: center;
vertical-align: bottom;

}
CSS: Creating Navigation Bars

<ul id="navbar">
<li><a href="/tests">Home</a></li>
<li><a href="/studyroom">About US</a></li>
<li><a href="/flashcards">contact US</a></li>
<li><a href="/library">help</a></li>
<li><a href="/testimonials">login</a></li>
</ul>
Cont..
#navbar {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #EEEEEE;
}
Cont..
ul#navbar li a {
display: block;
color: #000000;
font-weight:bold;
padding: 8px 16px;
text-decoration: none;
}
Cont..
ul#navbar li a:hover {
background-color: orange;
color: white;
}
Cont..
ul#navbar li {
display: inline;
CSS Measuring Units
• CSS Units
• CSS has several different
units for expressing a
length.

• Many CSS properties take


"length" values, such as
width, margin, padding,
font-size, etc.
Benefits of using CSS
• More powerful formatting than using presentation
tags
• Your pages load faster, because browsers cache
the .css files
• Increased accessibility, because rules can be
defined according given media
• Pages are easier to maintain and update

42

You might also like