Introduction of HTML
Cascading Style Sheets
↘ ↓ ↙
C S S
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.
How to
write CSS?
Selector
◦
HTML
element tags
(examples: p, h2, body, img, table)
(examples: p, h2, body, img, table)
◦
class
and ID names
Property
(examples: color, font-size)
Value
(examples: red, 14pt)
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!
Three ways
to include CSS:
- Local (Inline)
- Global (Embedded, or Internal)
- Linked (External)
1. 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.
color, and typeface and to define margins, etc.
Use
to override an external or embedded style specification.
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>
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>).
which is placed in the header of the html file (i.e.,
within <head> and </head>).
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.
multiple pages.
Linked
(External)
In TextPad,Notepad, etc.…
p
{font-family: verdana, sans-serif; font-size: 12pt; color: red}
h1
{font-family: serif; font-size: 14pt; color: green}
h2 {font-family: serif; font-size: 11pt; color: blue}
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“ >
font-family: Arial, Helvetica, sans-serif“ >
Write whatever you want here </p>
Grouping
properties
Separate
properties with a semi-colon
◦
Example:
p
{text-align:center;color:red; font- family:Arial;
font-style:italic}
Grouping
selectors
Separate
selectors with a comma
◦ Example:
◦ Example:
h1,h2,h3,h4,h5,h6
{ color: green }
(each header will
be green)
Separate
selectors with a space
◦ Example:
◦ Example:
p li { color: red
}
(only items within
a list and paragraph tag
will be red)
The class Selector
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>
The class
Selector
You can also omit the tag name in the selector
define a style that will be used by all HTML
that have this class.
Example:
.poem {text-align: center; font-style:italic}
Any HTML element with class=“poem"
will be center-aligned and
italic.
The class
Selector
Example (continued)
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>
Class
Example
<style>
p {font-family: sans-serif; font-size: 10pt}
h2 {font-family: serif; font-size: 24pt}
.boldred {color: red; font-weight: bold}
.green {color: green}
.tinyblue {color: blue; font-size: 8pt}
can be expressed in:
</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>
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).
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
Properties –
Text
text-decoration
◦
underline,
line-through
text-transform
◦
capitalize,
uppercase, lowercase, none
text-align
◦
left,
right, center, justify
text-indent
◦
<length>,
<percentage>
Properties –
Position
position
◦
absolute,
relative
top
◦
<length>,
<percentage>, auto
left
◦
<length>,
<percentage>, auto
Z-index
◦
<number>,
auto
A few more
details about positioning
Positioning
Upper left corner corresponds to (0,0)
The
value of top, bottom, right, left
◦
Length
(measured in px, em, etc…)
◦
Percentage of
the parent’s width
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}
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
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.
Border values
Examples
Border
values
img {
border-style: ridge;
border-width: 20px;
border-color:red green
blue purple}
h1
{background-color: #CC66FF;
width: 50%;
padding:
20px}
Backgrounds
background-color
◦ Hex
◦ Hex
background-image
◦
URL(image.jpg)
background-repeat
◦
No-repeat,
repeat-x, repeat-y
background-attachment
◦
Fixed,scroll
background-position
◦
Top,
lef
◦
p
{ background-position: 70px 10px; background-repeat: repeat-y;
background-image: url(background.gif) }
Background
repeat examples:
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>
Link Style
a:link
{color: #FFFFFF; text-decoration: none}
a:visited
{color: #808080; text-decoration: none}
a:hover
{color: red; text-decoration: none}
Cursor
The
cursor property specifies the type of cursor to be displayed when pointing on
an element.
◦
Crosshair,
hand, move, text, wait, etc.
Complete
demo (cursor styles): http://www.w3schools.com/css/tryit.asp?filename=trycss_cursor
0 Comments