Scribd
Upload
15 views

Ascading Tyle Heets: Innovation To Societal

CSS (Cascading Style Sheets) allows separation of document content from page layout and visual design. It controls the style and formatting of elements on a web page, including fonts, colors, spacing and positioning. There are three main ways to apply CSS - inline within HTML tags, internally within <style> tags in the head, or externally in a .css file linked via <link>. CSS rules use selectors to target elements and properties to set values like font-size or color. Class and ID selectors allow styling of specific elements. CSS follows a cascading order of precedence so more specific styles override general ones.

Uploaded by

computerengineering39
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
15 views

Ascading Tyle Heets: Innovation To Societal

CSS (Cascading Style Sheets) allows separation of document content from page layout and visual design. It controls the style and formatting of elements on a web page, including fonts, colors, spacing and positioning. There are three main ways to apply CSS - inline within HTML tags, internally within <style> tags in the head, or externally in a .css file linked via <link>. CSS rules use selectors to target elements and properties to set values like font-size or color. Class and ID selectors allow styling of specific elements. CSS follows a cascading order of precedence so more specific styles override general ones.

Uploaded by

computerengineering39
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/ 41

Cascading Style Sheets

CSS

ProAzure Software
Solutions Pvt. Ltd. Pune
1
Innovation to Societal
What is CSS?
• A simple mechanism for controlling the style
of a Web document without compromising its
structure.

• It allows you to separate visual design


elements (layout, fonts, colors, margins, and
so on) from the contents of a Web page.

• Allows for faster downloads, streamlined site


maintenance, and global control of design
attributes across multiple pages.

Innovation to Societal 2
CSS vs. just HTML
• What can we do with CSS that we can’t do
with HTML?
– Control of backgrounds.
– Set font size to the exact height you want.
– Highlight words, entire paragraphs, headings
or even individual letters with background
colors.
– Overlap words and make logo-type headers
without making images.
– Precise positioning.
– Linked style sheets to control the look of a
whole website from one single location.
– And more.

Innovation to Societal 3
How to write CSS?

• Selector
– HTML element tags
(examples: p, h2, body, img, table)
– class and ID names
• Property (examples: color, font-size)
• Value (examples: red, 14pt)

Innovation to Societal 4
How to write CSS:

• The basic syntax of a CSS rule:


selector {property 1: value 1; property 2:
value 2}

Example:
p {font-size: 8pt; color: red}

Notice the { } around the rule and the : before


each value!
Innovation to Societal 5
Three ways to include CSS:
1. Local (Inline)
2. Global (Embedded, or Internal)
3. Linked (External)

Innovation to Societal 6
1. Local
• Inline style sheet.
• Placed inside tags.
• Specific to a single instance of an html
tag on a page.
• Must be used instead of <font> tags to
specify font size, color, and typeface
and to define margins, etc.
• Use to override an external or
embedded style specification.
Innovation to Societal 7
Local (inline)
• Example
<p style="font-size: 10pt; color: red; font-weight:
bold; font-family: Arial, Helvetica, sans-serif">
This is a local stylesheet declaration. </p>

On the browser:

Innovation to Societal 8
2. Global
• Embedded or internal style sheet
• Applicable to an entire document
• Styles are defined within the <style>
</style> tag, which is placed in the
header of the html file (i.e., within
<head> and </head>).

Innovation to Societal 9
Global (Internal)
• Example:

<html>
<head>
<title>Title</title>
<style type="text/css">
<!--[STYLE INFORMATION GOES HERE] -->
</style>
</head>
<body>
[DOCUMENT BODY GOES HERE]
</body>
</html>

Innovation to Societal 10
3. Linked
• External style sheet
• Styles are saved in a separate file, with
the extension .css
• This single stylesheet can be used to
define the look of multiple pages.

Innovation to Societal 11
Linked (External)
• Example
Save this text
In TextPad,Notepad, etc.…
file as
p {font-family: verdana, sans- whatever.css
serif; font-size: 12pt; color: red}

h1 {font-family: serif; font-size:


14pt; color: green}

h2 {font-family: serif; font-size:


11pt; color: blue}

Innovation to Societal 12
Linked (External)
• Example (continued)

To apply the stylesheet “whatever.css“ to


an HTML document, call it in from the
header:
<head>
<link rel="stylesheet"
href=“whatever.css" type="text/css">
</head>

Innovation to Societal 13
Inheritance: which style prevails
when several are present?
• Inline (local) overrides internal (global)
• Internal (global) overrides external (linked).

Innovation to Societal 14
Cascading
The way styles will be used when there is more than one
style specified for an HTML element:

1. Browser default
2. External Style Sheet (Linked) (in an external .css file)
3. Internal Style Sheet (Global, or embedded) (inside the <head>
tag)
4. Inline Style (Local) (inside HTML element)

• An inline style (inside an HTML element) has the highest


priority, which means that it will override every style declared
inside the <head> tag, in an external style sheet, and in the
browser (default value).

Innovation to Societal 15
Let’s try this now!

<h1 style=“text-align: center; font-


weight:bold; color: blue”> Styling with CSS!
</h1>

<p style="font-size: 10pt; color: red; font-


weight: bold; font-family: Arial, Helvetica,
sans-serif“ >
Write whatever you want here </p>

Innovation to Societal 16
Grouping properties
• Separate properties with a semi-colon
– Example:
p {text-align:center;color:red; font-
family:Arial; font-style:italic}

Innovation to Societal 17
Grouping selectors
• Separate selectors with a comma
– Example:
h1,h2,h3,h4,h5,h6 { color: green }
(each header will be green)
• Separate selectors with a space
– Example:
p li { color: red }
(only items within a list and a
paragraph tag will be red)
Innovation to Societal 18
The class Selector
• With a class selector you can define different
styles for the same type of HTML element
• Examples:
First define the class:
p.right {text-align: right; color: red; font-style: italic}
p.blue {text-align: center; color:blue}
Then use the class in your HTML code :
<p class="right"> This paragraph will be right-
aligned, italic, and red. </p>
<p class=“blue"> This paragraph will be center-
aligned and blue. </p>
Innovation to Societal 19
The class Selector
• You can also omit the tag name in the
selector to define a style that will be used by
all HTML elements that have this class.

• Example:
.poem {text-align: center; font-style:italic}

Any HTML element with class=“poem" will be


center-aligned and italic.

Innovation to Societal 20
The class Selector
• Example (continued)
Both elements below will follow the
rules in the ".poem“ class:

<h1 class=“poem"> This heading will be


center-aligned and italic </h1>

<p class=“poem"> This paragraph will also


be center-aligned and italic. </p>

Innovation to Societal 21
Class Example
<style>
p {font-family: sans-serif; font-size: 10pt}
h1 {font-family: serif; font-size: 30pt}
h2 {font-family: serif; font-size: 24pt}
.boldred {color: red; font-weight: bold}
.green {color: green}
.tinyblue {color: blue; font-size: 8pt}
</style>

The tags and classes can then be used in combination:

<h1 class=“boldred">This is rendered as 30-point red serif bold


text.</h1>
<p class=“boldred">This is rendered as 10-point red sans-serif bold
text.</p>

Innovation to Societal 22
Applying styles to portions of
a document:
• <div>
– A division tag: to “package” a block of
document into one unit. It defines a block
element.
– Causes a line break, like <br> and <p>.
• <span>
– “Wraps” a portion of text into a unit, but
doesn't cause a line break. Allows styles to
be applied to an 'elemental' region (such
as a portion of a paragraph).
Innovation to Societal 23
Example

<p><span class="foo">This text is rendered


as foo-style</span> and this is not. </p>

<div class="foo">
<p>The "foo" style will be applied to this text,
and to <a href="page.html">this text</a> as
well.
</div>

Innovation to Societal 24
Properties - Font
• font-family
– Name, or serif, sans-serif, cursive, monospace
• font-style
– normal, italic
• font-weight
– normal, bold, 100, 200, 300, 400, 500, 600, 700,
800, 900
• font-size
– absolute-size, relative-size, length, percentage
• font-variant
– small-caps

Innovation to Societal 25
Properties - Text
• text-decoration
– underline, line-through
• text-transform
– capitalize, uppercase, lowercase, none
• text-align
– left, right, center, justify
• text-indent
– <length>, <percentage>

Innovation to Societal 26
Properties - Position
• position
– absolute, relative
• top
– <length>, <percentage>, auto
• left
– <length>, <percentage>, auto
• Z-index
– <number>, auto

Innovation to Societal 27
A few more details
about positioning

Innovation to Societal 28
(0,0) X
Positioning
• Upper left corner corresponds to (0,0)
• The value of top, bottom, right, left
can be expressed in:
– Length (measured in px, em, etc…)
– Percentage of the parent’s width

Y Innovation to Societal 29
The z-index

• stacking order is called the z-index.


• If elements overlap each other, the one
with the higher z-index appears on top.
• Example:
.topElement {position: absolute; z-index=2;
top:0px; left:0px; font-size:36pt; color:red}

Innovation to Societal 30
(0,0) X

CSS Examples:

• <h1 style="color: white; position:


absolute; bottom: 50px; left: 50px; z-
index: 2"> Text in front.</h1>

– Positioning: Example
– Stacking: Example
– Shadowing: Example

Y Innovation to Societal 31
Using Boxes and Positioning for
layout

Innovation to Societal 32
In a box:
• Margins are always transparent.
• Borders come in various styles.
• Background settings:
– the area just inside the borders
– includes both the padding and content
areas.

Innovation to Societal 33
Examples
img { border-style: ridge;
border-width: 20px;
border-color:red green
blue purple}

h1 {background-color: #CC66FF;
width: 50%;
padding: 20px} H1,50% ,purple background
Innovation to Societal 34
Border values

Innovation to Societal 35
More fun stuff with CSS

Innovation to Societal 36
Backgrounds
• background-color
– Hex
• background-image
Example
– URL(image.jpg)
• background-repeat
– No-repeat, repeat-x, repeat-y
• background-attachment
– Fixed, scroll
• background-position
– Top, left
• p { background-position: 70px 10px; background-repeat:
repeat-y; background-image: url(background.gif) }

Innovation to Societal 37
Background repeat examples:

Innovation to Societal 38
Scroll Bar Color
• Example:
<style>
body { color:black;
background-color:#a0a0a0;
scrollbar-face-color:#903030;
scrollbar-arrow-color:#FFFFFF;
scrollbar-track-color:#C0B0B0;
scrollbar-shadow-color:rgb(0,0,0)}
</style>
• CSS generator for scrollbars:
http://www.spectrum-
research.com/V2/generators/scrollbar.asp
Innovation to Societal 39
Link Style
• a:link {color: #FFFFFF; text-decoration: none}
• a:visited {color: #808080; text-decoration:
none}
• a:hover {color: red; text-decoration: none}

Innovation to Societal 40
Thank You
ProAzure Software Solutions
Pvt. Ltd. Pune.
www.proazuresoftware.com
9096880864

41

You might also like