Scribd
Upload
39 views

Chapter 3

The document discusses Cascading Style Sheets (CSS) and provides an introduction and overview. CSS is used to style and lay out web pages, and it allows separation of document content from document presentation. CSS handles visual elements like colors, fonts, spacing, and layout. It can be linked to HTML documents in three ways: inline, embedded in <style> tags, or through an external .css file. The document outlines CSS syntax, selectors, properties and values for styling text, backgrounds, borders, dimensions, and spacing.

Uploaded by

Roza Muluken
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
39 views

Chapter 3

The document discusses Cascading Style Sheets (CSS) and provides an introduction and overview. CSS is used to style and lay out web pages, and it allows separation of document content from document presentation. CSS handles visual elements like colors, fonts, spacing, and layout. It can be linked to HTML documents in three ways: inline, embedded in <style> tags, or through an external .css file. The document outlines CSS syntax, selectors, properties and values for styling text, backgrounds, borders, dimensions, and spacing.

Uploaded by

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

Web Design and Programming

Chapter Three
Cascading Style sheet (CSS)

By Tesfahun N.
Outline

❖Introduce Cascaded Style Sheets (CSS)

❖ Why use style sheets?

❖Linking HTML and CSS


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 but it provides powerful control

over the presentation of an HTML document.

❖ CSS is combined with the markup languages HTML or

XHTML.
Why css

❖ Used to describe the arrangement of documents

❖ Define sizes, spacing, fonts, colors, layout, etc.

❖ Improve content accessibility

❖ Improve flexibility
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.>
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; } 6
Selectors
❖Selectors used to determine on which
element the rule will be applied:

✓All elements of specific type (tag)

✓Those that much a specific attribute (id,


class)

7
Selectors (2)
❖ Three primary kinds of selectors:
➢ By tag (type selector):
h1 { font-family: verdana,sans-serif; }
➢ By element id:
#idname{….
➢ By element class name (only for HTML):
.clasname {border: 1px solid red}
❖ Selectors can be combined with commas:
h1, .link, #top-link {font-weight: bold}

8
Values in the CSS Rules
❖ Colors are set in RGB format (decimal or hex):

➢ Example: #a0a6aa = rgb(160, 166, 170)

➢ Predefined color : black, blue, etc.

❖ Numeric values are specified in:

➢ Pixels, e.g. 12px ,

➢ Points, inches, centimeters, millimeters

➢E.g. 10pt , 1in, 1cm, 1mm

➢ Percentages, e.g. 50% 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
• <body>
• <p>Here is some text</p>
• <p style="font-size: 30pt,bgcolor=“cayn">Here
is some more text</p>
• <p style="font-size: 20pt;color:
• #0000FF" >Even more text</p>
• </body>
•

11
Embedded Styles

❖Embedded in the HTML in the <style>


tag:
✓ The <style> tag is placed in the <head> section of the
document
– <style>
...
</style>

• Used for document-specific styles


12
Embedded Styles: Example
<html>
<head>
<style>
body {background-color: blue;}
h1 {color: yellow;}
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

❖ link tag (with a rel attribute)

➢ Specifies a relationship between current document


and another document
<link rel="stylesheet" type="text/css" href="styles.css">
14
➢ link elements should be in the <head>
External Styles: Example (2)
external-styles.html
styles.css
<!DOCTYPE html>
<html> body
{
<head> background-color: pink;
<link rel="stylesheet" }
href="styles.css"> h1 {
color: blue;
</head> }
<body> p {
<h1>This is a heading</h1> color: red;
}
<p>This is a paragraph.</p>
</body>
</html>
15
Introduction to CSS Inheritance
❖ Inheritance is one feature that leverages the ability
to use a styling feature of the parent entity in a child
entity.

❖ This gives ease to the coding, as a common property


need not be styled twice or multiple times.

❖ The use of ‘inherit’ keyword makes sure that the


property is adopted from the parent entity to the
child entity.
The syntax :
.Parent
{
property1: value1;
property2:value2;
}
.child
{
property1: inherit;
propert2:value3;
}
Style Rules Precedence

❖ Every CSS selector has its place in the specificity


hierarchy.
❖ There are four categories which define the specificity
level of a selector:
1.Inline styles - Example: <h1 style="color: pink;">
2.IDs - Example: #navbar
3.Classes, pseudo-classes, attribute selectors -
Example: .test, :hover, [href]
4.Elements and pseudo-elements - Example: h1,
:before
How to Calculate Specificity?
❖ Start at 0,
✓ add 100 for each ID value,
✓ add 10 for each class value (or pseudo-class or
attribute selector), add
✓ 1 for each element selector or pseudo-element.
❖ Note: Inline style gets a specificity value of 1000,
and is always given the highest priority!
❖ Note 2: There is one exception to this rule: if you
use the !important rule, it will even override inline
styles!
Examples on how to calculate specificity values:
Cont..
• Example
A: h1
B: h1#content
C: <h1 id="content" style="color: pink;">Heading</h1>
❖ The specificity of A is 1 (one element selector)
❖ The specificity of B is 101 (one ID reference + one
element selector)
❖ The specificity of C is 1000 (inline styling)
❖ Since the third rule (C) has the highest specificity value
(1000), this style declaration will be applied.
!important?
<style?
#myid { background-color: blue;}
.myclass { background-color: gray;}
p { background-color: pink !important;}
</style>
<body>
<p>This is some text in a paragraph.</p>
<p class="myclass">This is some text in a
paragraph.</p>
<p id="myid">This is some text in a
paragraph.</p>
</body>
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.

❖ font-weight can be normal, bold, bolder, lighter or a


number in range [100 … 900]
23
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

24
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;
25
Part II
.
.
.
.
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
27
✓ fixed / scroll
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%;
28
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, …
29
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. 30
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, …
31
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)


32
❖ Same for padding
The Box Model

33
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


34
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

35
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


36
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,

37
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

38
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!)
39
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

40
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. values

➢ nowrap – keeps the text on one line

➢ normal (default) – browser decides whether to brake


the lines if needed 41
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


50
Thanks
?

You might also like