Scribd
Upload
31 views

1 CSS

CSS styling program

Uploaded by

jeffishasdarwin
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
31 views

1 CSS

CSS styling program

Uploaded by

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

18CS602 – WEB TECHNOLOGY

UNIT – II Style Sheets and Client-side Programming


Topic:Cascading Style Sheets(CSS)

Presented
by

Dr.C.Rani
Assistant Professor
Department of Computer Science and Engineering
Government College of Engineering, Salem-11
1
Objectives and Outcomes

Session Objective
 To know the basic concepts of CSS

Session Outcomes
 Understand the basic concepts of CSS

2
Cascading Style Sheets (CSS)
Describes the appearance, layout, and
presentation of information on a web page
HTML describes the content of the page
Describes how information is to be
displayed, not what is being displayed
Can be embedded in HTML document or
placed into separate .css file
Basic CSS rule syntax
selector {
property: value;
property: value;
...
property: value;
}
CSS
p {
font-family: sans-serif;
color: red;
}
CSS
 A CSS file consists of one or more rules
 Each rule starts with a selector
 A selector specifies an HTML element(s) and then applies style
properties to them
 a selector of * selects all elements
Embedding style sheets:
<style>
<head>
<style type="text/css">
p { font-family: sans-serif; color: red; }
h2 { background-color: yellow; }
</style>
</head>

HTML

 CSS code can be embedded within the head of an


HTML page
CSS properties for colors
p {
color: red;
background-color: yellow;
}

CSS
This paragraph uses the style above
output

property description
color color of the element's text
color that will appear behind
background-color
the element
Specifying colors
p { color: red; }
h2 { color: rgb(128, 0, 196); }
h4 { color: #FF8800; }
CSS

This paragraph uses the first style above

This h2 uses the second style above.

This h4 uses the third style above.


output
Grouping styles
p, h1, h2 {
color: green;
}
h2 {
background-color: yellow;
} CSS

This paragraph uses the above style.


This h2 uses the above styles.

output
 A style can select multiple elements separated by
commas
 The individual elements can also have their own
styles
CSS comments /*…*/
/* This is a comment.
It can span many lines in the CSS file. */
p {
color: red; background-color: aqua;
} CSS

 CSS (like HTML) is usually not commented as rigorously as


programming languages such as Java
 The // single-line comment style is NOT supported in CSS
 The <!-- ... --> HTML comment style is also NOT supported in CSS
CSS properties for fonts
property description
font-family which font will be used
how large the letters will be
font-size
drawn
used to enable/disable italic
font-style
style
used to enable/disable bold
font-weight
style
font-family
p {
font-family: Georgia;
}
h2 {
font-family: "Courier New";
} CSS

This paragraph uses the first style above.

This h2 uses the second style above.


output
 Enclose multi-word font names in quotes
More about font-family
p {
font-family: Garamond, "Times New Roman", serif;
} CSS

This paragraph uses the above style.

output
 We can specify multiple fonts from highest to lowest priority
 Generic font names:
 serif, sans-serif, cursive, fantasy, monospace
 If the first font is not found on the user's computer, the next is tried
 Placing a generic font name at the end of your font-family value, ensures that every
computer will use a valid font
font-size
p {
font-size: 24pt;
} CSS

This paragraph uses the style above.


output
• units: pixels (px) vs. point (pt) vs. m-size (em)

16px, 16pt, 1.16em


• vague font sizes: xx-small , x-small , small , ,
medium large , x-large, xx-large, smaller, larger
• percentage font sizes, e.g.: 90%, 120%
font-size
p {
font-size: 24pt;
} CSS

This paragraph uses the style above.


output
 pt specifies number of point, where a point is 1/72 of an inch
onscreen
 px specifies a number of pixels on the screen
 em specifies number of m-widths, where 1 em is equal to the font's
current size
font-weight, font-style
p {
font-weight: bold;
font-style: italic;
} CSS

This paragraph uses the style above.

output
CSS properties for text
property description
alignment of text within its
text-align
element
decorations such as
text-decoration
underlining
line-height,
gaps between the various
word-spacing,
portions of the text
letter-spacing
indents the first letter of each
text-indent
paragraph
text-align
blockquote { text-align: justify; }
h2 { text-align: center; }
CSS

The Gollum’s Quote

We wants it, we needs it. Must have the precious. They stole it from us.
Sneaky little hobbitses. Wicked, tricksy, false!

output
 text-align can be left, right, center, or
justify
text-decoration
p {
text-decoration: underline;
}
CSS
This paragraph uses the style above.

output
• can also be overline, line-through, blink, or
none
• effects can be combined:
text-decoration: overline underline;
The list-style-type property
ol { list-style-type: lower-roman; }

• Possible values: CSS


i. none : No marker
ii. disc (default), circle, square
iii. Decimal: 1, 2, 3, etc.
iv. decimal-leading-zero : 01, 02, 03, etc.
v. lower-roman: i, ii, iii, iv, v, etc.
vi. upper-roman: I, II, III, IV, V, etc.
vii. lower-alpha: a, b, c, d, e, etc.
viii. upper-alpha: A, B, C, D, E, etc.
x. lower-greek: alpha, beta, gamma, etc.
others: hebrew, armenian, georgian, cjk-ideographic, hiragana…
Body styles
body {
font-size: 16px;
}

CSS

 Applies a style to the entire body of your page


 Saves you from manually applying a style to each
element
Inheriting styles
body { font-family: sans-serif; background-color:
yellow; }
p { color: red; background-color: aqua; }
a { text-decoration: underline; }
h2 { font-weight: bold; text-align: center; }

CSS
This is a heading
A styled paragraph. Previous slides are available on the website.

• A bulleted list
output
 when multiple styles apply to an element, they
are inherited
 a more tightly matching rule can override a more
general inherited rule
Styles that conflict
p, h1, h2 { color: blue; font-style: italic; }
h2 { color: red; background-color: yellow; }

CSS
This paragraph uses the first style above.
This heading uses both styles above.
output

 when two styles set conflicting values for the


same property, the latter style takes precedence
CSS properties for
backgrounds
property description
background-color color to fill background
background-image image to place in background
placement of bg image within
background-position
element
whether/how bg image should
background-repeat
be repeated
whether bg image scrolls with
background-attachment
page
shorthand to set all
background
background properties
background-image
body {
background-image: url("images/draft.jpg");
}
CSS

 background image/color fills the element's


content area
background-repeat
body {
background-image: url("images/draft.jpg");
background-repeat: repeat-x;
}
CSS

 can be repeat (default), repeat-x, repeat-y, or no-


repeat
background-position
body {
background-image: url("images/draft.jpg");
background-repeat: no-repeat;
background-position: 370px 20px;
} CSS

 value consists of two tokens, each of which can


be top, left, right, bottom, center, a percentage,
or a length value in px, pt, etc.
 value can be negative to shift left/up by a given
amount
CSS Introduction

link element associates style sheet with doc.


CSS Introduction

type attribute specifies style language used


CSS Introduction

href attribute provides style sheet URL


CSS Introduction

title attribute provides style sheet name


CSS Introduction

Alternative, user selectable style sheets


can be specified
CSS Introduction
A styled HTML document

produced by the style sheet style2.css:


CSS Syntax:
Selector Strings
Source anchor elements:

Element types that are descendents:

pseudo-classes
CSS Syntax:
Selector Strings
Source anchor elements:

Element types that are descendants:

rule applies to li element that is


CSS Syntax:
Selector Strings
Source anchor elements:

Element types that are descendants:

rule applies to li element that is


part of the content of an ol element
CSS Syntax:
Selector Strings
Source anchor elements:

Element types that are descendants:

rule applies to li element that is


part of the content of an ol element
that is part of the content of a ul element
Style Sheets and HTML
Style sheets referenced by link HTML
element are called external style sheets
Style sheets can be embedded directly in
HTML document using style element
64

You might also like