Web Engineering - Introduction to CSS

Web Engineering
Lecture 05
Introduction to CSS
University of Lahore
Nosheen Qamar
1

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

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

Applying CSS
• There are three ways through which you apply
CSS on your HTML doc.
 Inline
 Internal
 External
4

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” />

SELECTORS
• There are three types of selectors:
 Tag selectors
 ID selectors
 Class selectors
6

Example Tag Selector
<style>
p {
font-family: sans-serif;
font-size: 15pt;
line-height: 150%;
}
</style>
7
Tag
selector

Example Class Selector
<style>
.foo {
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

Example Class Selector
<style>
p.foo {
font-size: 15pt;
line-height: 150%;
}
</style>
<body>
<h1 class=“foo”></h1>
<p class=“foo”></p>
</body>
9
class
selector

Example ID Selector
<style>
#p1 {
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

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

Descendant Selector
<style>
p a {
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

Grouping Selector
• you can apply style to many selectors.
• <style>
h1, p, section {
color: #35c;
font-weight: bold;
letter-spacing: .4em;
}
</style>
13

Grouping Class & ID Selectors
• you can apply style to many selectors.
<style>
#content, #footer, .supplement {
position: absolute;
left: 510px;
width: 200px;
}
</style>
14

PSEUDO SELECTOR
<style>
a:link {
color: #008080;
}
a:hover {
color: #FF0000;
}
</style>
15

COMMENTS IN CSS
<style>
/*
p {
font-size: 15pt;
}
*/
</style>
16

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

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
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;}

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;}

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

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.

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

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.

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.

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.

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.

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

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

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

font-weight
• <p style="font-weight: bold;">
This font is bold.
</p>
• Output:
This font is bold.
normal, bold, bolder, lighter, 100, 200, 300,
400, 500, 600, 700, 800, 900 32

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.
normal, small-caps 33

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

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.

 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

color
• <p style=“color: red;” >
This text will be written in red.
</p>
• Output:
This text will be written in red.
any color name in any valid format. 37

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.
38

word-spacing
• <p style=“word-spacing: 5px;” >
This text is having space between words.
</p>
• Output:
This text is having space between
words.
39

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

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

text-decoration
• <p style=“text-decoration: underline;” >
This will be underline.
</p>
• Output:
This will be underline.
none, underline, overline, line-through,
blink 42

text-transform
• <p style=“text-transform: uppercase;” >
This will be in uppercase.
</p>
• Output:
THIS WILL BE IN UPPERCASE.
none, capitalize, uppercase, lowercase
43

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

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

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:
46

Web Engineering - Introduction to CSS

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Web Engineering - Introduction to CSS (20)

Recently uploaded (20)

Web Engineering - Introduction to CSS