Cascading: Style

Cascading Style Sheet
CSS
CSS is an acronym for Cascading Style Sheets.
CSS is a style language that defines layout of
HTML documents
CSS covers fonts, colours, margins, lines,
height, width, background images, advanced
positions
control the style and layout of multiple Web
pages all at once.
2
CSS
HTML can be (mis-)used to add layout to
websites.
But CSS offers more options and is more
accurate and sophisticated.
CSS is supported by all browsers today.
CSS and HTML

HTML is used to structure content.
CSS is used for formatting structured content.
Many new layout tags such as <blink> were
only supported by one type of browser.
"You need browser X to view this page"
became a common disclaimer on web sites.
CSS and HTML

CSS was invented to remedy this situation by
providing web designers with sophisticated
layout opportunities
Separation of the presentation style of
documents from the content of documents,
makes site maintenance a lot easier. ported by
all browsers.
CSS and HTML
CSS format
CSS how to
There are three ways of inserting a style sheet:
Inline style sheet
Internal style sheet
External style
CSS to HTML: Attribute Style
Called inline CSS.

9
CSS to HTML: Tag Style
Called internal CSS.

10
CSS to HTML: Link Style
Called External CSS.
rel = relation= Specifies

the relationship between
the current document
and the linked document
11
Benefit
12
Try it yourself
13
Try it yourself
.css file
body{
background-color:#d0e4fe;
}
h1{
color:orange;
text-align:center;
}
p{
font-family:"Times New Roman";
font-size:20px;
}
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
14
CSS ID
CSS allows you to specify
your own selectors called
"id" and "class".
The id Selector
The id selector is used to
specify a style for a single,
unique element.
The id selector uses the id
attribute of the HTML
element, and is defined
with a "#".
<html>
<head>
<style type="text/css">
#para1
{text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected
by the style.</p>
</body>
</html>
Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.
15
CSS Class
The class Selector
The class selector is used

to specify a style for a
group of elements. Unlike
the id selector, the class
selector is most often used
on several elements.
This allows you to set a
particular style for many
HTML elements with the
same class.
The class selector uses the
HTML class attribute, and
is defined with a ".
<html>
<head>
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">Center-aligned
heading</h1>
<p class="center">Center-aligned
paragraph.</p>
</body>
</html>
16
CSS Class
The class Selector
You can also specify
that only specific
HTML elements should
be affected by a class.
<html>
<head>
p.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">This heading
will not be affected</h1>
<p class="center">This paragraph
will be center-aligned.</p>
</body>
</html>
17
Background and Image

Example done
18
CSS Text
Text Color
With CSS, a color is most often specified by:

a HEX value - like "#ff0000"
an RGB value - like "rgb(255,0,0)"
a color name - like "red"
19
CSS Text
<!DOCTYPE html>
<html>
<head>
<style>
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<p>This is an ordinary paragraph. Notice that this text is red. The default text-color
for a page is defined in the body selector.</p>
<p class="ex">This is a paragraph with class="ex". This text is blue.</p>
</body>
</html>
20
CSS Text
Text Alignment
The text-align property is used to set the horizontal
alignment of a text.
<html>
<head>
<style>
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
</style>
</head>
<body>
<h1>CSS text-align Example</h1>
<p class="date">May, 2009</p>
<p class="main">Bangladesh is identified as a Next Eleven economy. According to the United Nations in
2010, the country is making major strides in human development, including significant progress in
the areas of gender equity, universal primary education, women empowerment, reducing population
growth, food production, health and renewable energy.</p>
</body>
</html>
21
CSS Text
Text Decoration
The text-decoration property is used to set or remove
decorations from text.
<html>
<head>
<style>
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:none;}
</style>
</head>
<body>
<h1>This is heading 1</h1><h2>This is heading 2</h2>
<h3>This is heading 3</h3> <h4>This is heading 4</h4>
</body>
</html>
22
CSS Text
Text Transformation
The text-transform property is used to specify
uppercase and lowercase letters in a text.
<html>
<head>
<style>
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
</style>
</head>
<body>
<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>
</body>
</html>
23
CSS Text
Text Indentation
The text-indent property is used to specify the
indentation of the first line of a text.
<html>
<head>
<style>
p {text-indent:50px;}
</style>
</head>
<body>
<p> Bangladesh is identified as a Next Eleven economy. According to
the United Nations in 2010, the country is making major strides in human
development, including significant progress in the areas of gender equity,
universal primary education, women empowerment, reducing population
growth, food production, health and renewable energy
</p>
</body>
</html>
24
CSS Font
25
Positioning of elements
Absolute positioning
Relative positioning
To position an element relatively, the
property position is set as relative. The difference
between absolute and relative positioning is how the
position is being calculated.
The position for an element which is relatively
positioned is calculated from the original position in
the document. That means that you move the element
to the right, to the left, up or down.
26
Example
#Pic1 { position:relative; left: 350px; bottom:
150px; }
#Pic2 { position:relative; left: 150px; bottom:
500px; }
#box1 { position:absolute; top: 50px; left:
50px; }
#box2 { position:absolute; top: 50px; right:
50px; }
27
Meet the Units

Ems (em): The em is a scalable unit that is used in web document
media. An em is equal to the current font-size, for instance, if the
font-size of the document is 12pt, 1em is equal to 12pt. Ems are
scalable in nature, so 2em would equal 24pt, .5em would equal 6pt,
etc. Ems are becoming increasingly popular in web documents due
to scalability and their mobile-device-friendly nature.
Pixels (px): Pixels are fixed-size units that are used in screen media
(i.e. to be read on the computer screen). One pixel is equal to one
dot on the computer screen (the smallest division of your screens
resolution). Many web designers use pixel units in web documents
in order to produce a pixel-perfect representation of their site as it
is rendered in the browser. One problem with the pixel unit is that it
does not scale upward for visually-impaired readers or downward
to fit mobile devices.
28
Meet the Units

Points (pt): Points are traditionally used in print media
(anything that is to be printed on paper, etc.). One
point is equal to 1/72 of an inch. Points are much like
pixels, in that they are fixed-size units and cannot scale
in size.
Percent (%): The percent unit is much like the em
unit, save for a few fundamental differences. First and
foremost, the current font-size is equal to 100% (i.e.
12pt = 100%). While using the percent unit, your text
remains fully scalable for mobile devices and for
accessibility.
29
Whats the Difference?

Its easy to understand the difference between
font-size units when you see them in action.
Generally,1em = 12pt = 16px = 100%.
30
Whats the Difference?
31
CSS Links
Styling Links
Links can be styled with any CSS property (e.g.
color, font-family, background, etc.).
In addition, links can be styled differently
depending on what state they are in.
The four links states are:
a:link - a normal, unvisited link

a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked
32
CSS Lists
The CSS list properties allow you to:
Set different list item markers for ordered lists
Set different list item markers for unordered lists
Set an image as the list item marker
33
Box Model
All HTML elements can be considered as boxes. In CSS, the
term "box model" is used when talking about design and
layout.
The CSS box model is essentially a box that wraps around
HTML elements, and it consists of: margins, borders, padding,
and the actual content.
The box model allows us to place a border around elements
and space elements in relation to other elements.
34
Box Model
35
Box Model
Explanation of the different parts:
Margin - Clears an area around the border. The margin
does not have a background color, it is completely
transparent
Border - A border that goes around the padding and
content. The border is affected by the background
color of the box
Padding - Clears an area around the content. The
padding is affected by the background color of the box
Content - The content of the box, where text and
images appear
36
Box Model
Margin is on the outside of block elements
while padding is on the inside.
Use margin to separate the block from things
outside it
Use padding to move the contents away from the
edges of the block.
37
Box Model
The total width of an element should be calculated like this:
Total element width = width + left padding + right padding + left
border + right border + left margin + right margin
The total height of an element should be calculated like

this:
Total element height = height + top padding + bottom padding +
top border + bottom border + top margin + bottom margin
38
Box Model
Border
Border Style
Border Width
Border Color
Border - Individual sides
Border - Shorthand property
39
Box Model
Margin
The margin clears an area around an element (outside the
border). The margin does not have a background color, and is
completely transparent.
The top, right, bottom, and left margin can be changed
independently using separate properties. A shorthand margin
property can also be used, to change all margins at once.
40
Box Model
Margin
41
Box Model
Padding
The padding clears an area around the content (inside the
border) of an element. The padding is affected by the
background color of the element.
The top, right, bottom, and left padding can be changed
independently using separate properties. A shorthand
padding property can also be used, to change all paddings at
once.
42
Box Model
Padding
The padding clears an area around the content (inside the
border) of an element. The padding is affected by the
background color of the element.
The top, right, bottom, and left padding can be changed
independently using separate properties. A shorthand
padding property can also be used, to change all paddings at
once.
43
Example
Body
{
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}
body { margin: 100px 40px 10px 70px; }
44
Example
p { margin: 5px 50px 5px 50px; }
H1
{ background: yellow; padding: 20px 20px
20px 80px; }
h2
{ background: orange; padding-left:120px; }
45
Float
An element can be floated to the right or to
left by using the property float. That is to say
that the box with its contents either floats to
the right or to the left in a document (or the
containing box)
46
Example
#column1 { float:left; width: 33%; }
47
clear
The clear property is used to control how the
subsequent elements of floated elements in a
document shall behave.
By default, the subsequent elements are
moved up to fill the available space which will
be freed when a box is floated to a side.
The property clear can assume the
values left, right, both or none.
48
Example
To avoid the text from floating up next to the
element, we can add the following to our CSS:
#picture { float:left; width: 100px; }
. stopfloat { clear:both; }
49
CSS layout Manipulation

Reference: w3schools
http://www.w3schools.com/cssref/
http://www.csstutorial.net/part-2/layoutpage-part1.php
http://css.maxdesign.com.au/floatutorial/
50

Cascading: Style

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Cascading: Style

Caricato da

Copyright:

Formati disponibili

Cascading Style Sheet

CSS and HTML

CSS and HTML

CSS and HTML

CSS to HTML: Attribute Style

Called inline CSS.

CSS to HTML: Tag Style

Called internal CSS.

CSS to HTML: Link Style

Called External CSS.

rel = relation= Specifies

Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.

The class selector is used

Background and Image

With CSS, a color is most often specified by:

Meet the Units

Meet the Units

Whats the Difference?

Whats the Difference?

a:link - a normal, unvisited link

The total height of an element should be calculated like

CSS layout Manipulation

Potrebbero piacerti anche