This document provides an introduction to CSS (Cascading Style Sheets). It discusses key CSS concepts like selectors, properties, values and syntax. It also covers different ways to apply CSS like inline, internal and external stylesheets. Common CSS properties for formatting text like font, color, text-decoration are described. The document also discusses CSS box model and different units of measurement in CSS.
2. CASCADING STYLE SHEET
• This is the language to add presentation styling to HTML documents.
• CSS is a powerful and flexible way to add format to web page for resentation.
• Through CSS it is relatively easy to take simple page of text and images,
formatted to present as fully professional webpage.
• CSS has a simple syntax, consist of selectors, properties and values it together
make a style rules.
• It gives developer find ways to control over how each element of page is
formatted.
• CSS styles can apply on HTML documents through several different ways.
– Create an external CSS file.
– Embed CSS code in HTML document.
2
3. CSS Syntax
• A style rule is made of three parts:
• Selector: A selector is an HTML tag at which style will be applied. This could be
any tag like <h1> or <table> etc.
• Property: A property is a type of attribute of HTML tag. Put simply, all the HTML
attributes are converted into CSS properties. They could be color or border etc.
• Value: Values are assigned to properties. For example color property can have
value either red or #F1F1F1 etc.
• You can put CSS Style Rule Syntax as follows:
selector { property: value; }
• Example: You can define a table border as follows:
table {
border: 1px solid #C00FDF;
}
3
4. Applying CSS
• There are three ways through which you apply
CSS on your HTML doc.
Inline
Internal
External
4
5. Inline CSS
• You can also embed your CSS code in
HTML document.
• Example: <p style=“font-family: monospace;”>
5
INTERNAL CSS
• <style></style> always placed between <head></head> tags.
• Example: <style>
p { line-height: 120%; }
</style>
EXTERNAL CSS FILE
External CSS file will always place between <HEAD></HEAD>
tags.
<link rel=“stylesheet” type=“text/css” href=“main.css” />
6. SELECTORS
• There are three types of selectors:
Tag selectors
ID selectors
Class selectors
6
8. Example Class Selector
<style>
.foo {
font-family: sans-serif;
font-size: 15pt;
line-height: 150%;
}
</style>
<p class=“foo”> Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Pellentesque sit amet lorem ligula. Nam pulvinar
nunc ac magna aliquam quis sodales dui elementum. Fusce a
lacus leo. Maecenas ut dui eu quam condimentum sagittis.
</p>
8
class selector
9. Example Class Selector
<style>
p.foo {
font-family: sans-serif;
font-size: 15pt;
line-height: 150%;
}
</style>
<body>
<h1 class=“foo”></h1>
<p class=“foo”></p>
</body>
9
class
selector
10. Example ID Selector
<style>
#p1 {
font-family: sans-serif;
font-size: 15pt;
line-height: 150%;
}
</style>
<p id=“p1”> Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Pellentesque sit amet lorem ligula. Nam pulvinar
nunc ac magna aliquam quis sodales dui elementum. Fusce a
lacus leo. Maecenas ut dui eu quam condimentum sagittis.
</p>
10
ID selector
11. RULE for ID selector
• There is only be one element in a
document with a particular ID selector.
• ID selector can only be used once in
one element/tag.
11
12. Descendant Selector
<style>
p a {
font-family: sans-serif;
font-size: 15pt;
line-height: 150%;
}
</style>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit..
Nam pulvinar nunc ac magna aliquam quis sodales dui nunc
sit elementum. <a href=“page1.html”>Donec eu nisi turpis,</a>
sit amet rutrum leo.
</p>
Click <a href=“page2.html”>here</a>
12
13. Grouping Selector
• you can apply style to many selectors.
• <style>
h1, p, section {
color: #35c;
font-weight: bold;
letter-spacing: .4em;
}
</style>
13
14. Grouping Class & ID Selectors
• you can apply style to many selectors.
<style>
#content, #footer, .supplement {
position: absolute;
left: 510px;
width: 200px;
}
</style>
14
17. CSS UNITS - Sizes
• Relative length measurements:
– px (pixels – size varies depending on screen resolution)
– em (usually the height of a font’s uppercase M)
– ex (usually the height of a font’s lowercase x)
– Percentages (of the font’s default size)
• Absolute-length measurements (units that do not vary in size):
– in (inches)
– cm (centimeters)
– mm (millimeters)
– pt (points; 1 pt = 1/72 in)
– pc (picas; 1 pc = 12 pt)
• Generally 1em = 12pt = 16px = 100%
17
18. Unit Description Example
%
Defines a measurement as a percentage
relative to another value, typically an
enclosing element.
p {
font-size: 16pt;
line-height: 125%;
}
cm Defines a measurement in centimeters. div {margin-bottom: 2cm;}
em
A relative measurement for height of a font
in em spaces. Because an em unit is
equivalent to the size of a given font, if you
assign a font to 12pt, each “em” unit would
be 12pt; thus 2em = 24pt.
p {
letter spacing: 7em;
}
ex
This value defines a measurement relative to
a font’s x-height. The x-height is determined
by the height of the font’s lowercase letter x.
p {
font-size: 24pt;
line-height: 3ex;
}
in Defines a measurement in inches. p { word-spacing: .15in;}
mm Defines a measure in millimeters. p { word-spacing: 15mm;}
pc
Defines a measurement in picas. A pica is
equivalent to 12 points. Thus, there are 6
picas per inch.
p { font-size: 20pc;}
18
19. 19
Unit Description Example
pt
Defines a measurement in points. A point is
defined as 1/72nd of an inch.
body {font-size: 18pt;}
px Defines a measurement in screen pixels. p {padding: 25px;}
20. CSS – Colors
• You can specify your color values in various
formats.
20
Format Syntax Example
Hex Code #RRGGBB p {color: #FF0000; }
Short Hex Code #RGB p {color: #6A7;}
RGB % rgb(rrr%, ggg%, bbb%)
p {
color: rgb(50%, 50%, 50%);
}
RGB Absolute rgb(rrr, ggg, bbb)
p {
color: rgb(0, 0, 255);
}
keyword aqua, black etc. p { color: teal;}
21. CSS Box Model
• A set of rules collectively known as CSS Box Model
describes the rectangular region occupied with
HTML elements.
• The main idea is that every element’s layout is
composed of:
the actual element’s content area.
a border around the element.
a padding between the content and the border (inside the border)
a margin between the border and other content (outside the border)
21
23. Block-Level Elements
• A block level element in HTML create a
“block” or “box”.
• Browsers typically display the block-level
element with a new line.
• Block level elements may contain inline
elements and other block-level elements.
• The block level elements create “larger”
structure than inline elements.
24. List of Block-Level Elements
<address>
Contact information
<figcaption> (HTML5)
Figure caption
<ol>
Ordered list
<article>(HTML5)
Article content
<figure>(HTML5)
Groups media content with a
caption
<output>(HTML5)
Form output
<aside>(HTML5)
Aside content
<footer>(HTML5)
Section or page footer
<p>
Paragraph
<audio>(HTML5)
Audio player
<form>
Input form
<pre>
Preformatted text
<blockquote>
Long (“block”) quotation
<h1><h2><h3><h4><h5><h6>
Heading levels 1 - 6
<section>(HTML5)
Section of the page
<canvas>(HTML5)
Drawing canvas
<header>(HTML5)
Section or page header.
<table>
Table.
<dd>
Definition description
<hgroup>(HTML5)
Groups header information
<tfoot>
Table footer
<div>
Document division
<hr>
Horizontal rule (dividing line)
<ul>
Unordered list
<dl>
Definition list
<fieldset>
Field set label
<video>(HTML5)
Video player
25. Inline Elements
• An Inline element in HTML occupies only
the space bounded by the tags that define
the inline element.
• Generally, inline elements may contain
only data and other inline elements.
• By default, inline elements do not begin
with new line.
26. The <span> & <div> Tags
• A <span> ... </span> element defines an
“inline” structure, i.e. it simply defines a
stretch of text. Thus it can be used within
a paragraph or table element without
affecting the flow of the text.
• A <div> ... </div> element defines a
“block” structure. Usually the browser will
place line breaks before and after this
element, but otherwise it has no effect
itself.
27. CSS Font Properties
• You can set following font properties of an
element:
The font-family property is used to change the
face of a font.
The font-style property is used to make a font
italic or oblique.
The font-variant property is used to create a
small-caps effect.
The font-weight property is used to increase or
decrease how bold or light a font appears.
The font-size property is used to increase or
decrease the size of a font.
28. font-family
• <p style="font-family: georgia, garamond,
serif;">
This text is rendered in either georgia,
garamond, or the default serif font
depending on which font you have at your
system. </p>
• Output:
This text is rendered in either georgia,
garamond, or the default serif font
depending on which font you have at your
system.
29. Generic Font Family
• These are the generic name values for the
font-family property, followed by an example
of each that the browser might select from
the user’s system fonts:
29
Generic font-family Names Example
serif Times New Roman
sans-serif Arial
cursive Zapf-Chancery
fantasy Western
monospace Courier
30. font-style
• <p style="font-style: italic;">
This text will be rendered in italic style. </p>
• Output:
This text will be rendered in italic style.
• Possible Values:
normal, italic, oblique(more slanted than
normal)
30
31. font-size
• <p style="font-size: 20pt;">
This font size is 20 pixels.
</p>
• Output:
This font size is 20 points.
• Possible values:
px, small, xx-small, x-small, medium, large,31
32. font-weight
• <p style="font-weight: bold;">
This font is bold.
</p>
• Output:
This font is bold.
• Possible values:
normal, bold, bolder, lighter, 100, 200, 300,
400, 500, 600, 700, 800, 900 32
33. font-variant
• <p style="font-variant: small-caps;">
This text will be rendered in small caps.
</p>
• Output:
THIS TEXT WILL BE RENEDERED AS
SMALL CAPS.
• Possible values:
normal, small-caps 33
34. line-height
• The line-height property is used to set the
vertical distance between the baselines of
adjacent lines of text.
• You can use only this property with block-
level elements.
34
35. CSS Text Formatting
• You can set following text properties of an
element:
The color property is used to set the color of a
text.
The letter-spacing property is used to add or
subtract space between the letters.
The word-spacing property is used to add or
subtract space between the words.
The text-indent property is used to indent the
text of a paragraph.
The text-align property is used to align the text
of a document.
36. The text-decoration property is used to
underline, overline and strikethrough text.
The text-transform property is used to
capitalize text or convert text to uppercase or
lowercase letters.
The text-shadow property is used to set the
text shadow around a text.
The white-space property is used to control
the flow and formatting of text.
36
37. color
• <p style=“color: red;” >
This text will be written in red.
</p>
• Output:
This text will be written in red.
• Possible values:
any color name in any valid format. 37
38. letter-spacing
• <p style=“letter-spacing: 5px;” >
This text is having space between letters.
</p>
• Output:
T h i s t e x t i s h a v i n g s p a c e
b e t w e e n l e t t e r s.
• Possible values:
38
39. word-spacing
• <p style=“word-spacing: 5px;” >
This text is having space between words.
</p>
• Output:
This text is having space between
words.
• Possible values:
39
40. text-indent
• The text-indent property is used to indent
only the first line of text within an element.
• The default value for this property is 0.
• It only applies to block-level elements.
40
41. text-indent
• <p style=“text-indent: 1cm;” >
This text will have first line indent by 1cm.
and this line will remain at its actual
position.
</p>
• Output:
This text will have first line indent
by 1cm.
and this line will remain at its actual
position. 41
42. text-decoration
• <p style=“text-decoration: underline;” >
This will be underline.
</p>
• Output:
This will be underline.
• Possible values:
none, underline, overline, line-through,
blink 42
43. text-transform
• <p style=“text-transform: uppercase;” >
This will be in uppercase.
</p>
• Output:
THIS WILL BE IN UPPERCASE.
• Possible values:
none, capitalize, uppercase, lowercase
43
44. white-space
• The white-space property is used to specify
whether the blank space between words
both horizontally and vertically is collapsed
to a single character space or is retained
and preserved as is.
• The white space property is used with
block-level elements.
44
45. white-space
• <p style=“white-space: pre;” >
This text has a line break
and the white-space pre setting tells the
browser.
</p>
• Output:
This text has a line break
and the white-space pre setting tells the
browser.
45
46. text-shadow
• <p style=“text-shadow: 4px 4px 8px blue;”
>
If your browser supports the css text-
shadow property, this text will have a blue
shadow.
</p>
• Output:
• Possible values:
46