Presentation on CSS, Style Sheet, Types of Styles, Types of Text Formatting, Fonts

Introduction
CSS stands for Cascading Style Sheet
A Style Sheet language used for describing the
presentation of a document written in HTML.
It separates the formatting and Content of a
website.
Formatting is done by writing different types
styles to HTML element.
Formatting is defined by Styles.
Styles can be cascaded. That means formats
override any which were defined in included
earlier in the document.

Rules
Style rule has two parts : a selector
and a declaration. The declaration has
two parts: a property and a value
 a Selector,
 a Property, and
 a Value
Syntax
Selector
{
property:value;
property:value;
property:value;
}
Example
body
{
color:green
}

h1 {color:blue; font-size:12px;}
Selecto
r
Declaratio
n
Declaratio
n
Propert
y
Value Propert
y
Value
Syntax of CSS
The Selector is normally the HTML
element/tag.
The property is the attribute to change and
each property can take a value.
The property and value are separated by a
colon , and surrounded by curly braces.

Syntax of CSS
 If the value is multiple words, quotes (“) around
the value is used.
 To specify more than one property, each property
is separated with semicolon(;).
 In defining styles if declaration colon (:), or
semicolon (;) are missing styles cannot be
processed.
Example1
p
{
font-family: ”Sans
serif”
}
Example
p
{
text-align:center;
color:black;
font-family:arial
}

Classes
Defining a style to a specific tag applies to
entire document, but if a style defined has
to be applied only to some places of the
document, then class of specific tag has to
be defined.
Defining class for a tag
selector.classname
{ property: value; property:value;}
Applying style class to a tag
<selector class=classname>

Class example
Defining class for a tag
h1.fred {
color:#EEEBD2;
background-color: #d8a29b;
font-family:”Book Antiqua”,
Times,serif;
border: thin groove #9baab2;
Applying style class to a tag
<h1 class= “fred”>
A Simple Heading
</h1>

Types of Style Sheet
 Styles can be applied to Web page in three ways
 Inline Style
 Internal Style
 External Style

Inline Style
 Instead of using style sheet for whole page the style
can be defined within the basic HTML tag.
 HTML should be Presentation free document, and so
in-line styles should be avoided wherever possible.
Usage :
<HTMLtag style=“rules”>… </HTMLtag>
Example:
<p style=“color: blue”>
Sample Text Inline Style
</p>

InternalStyle
 Styles can be defined in the <head> section and
applied to the whole document.
 Usage
<head>
<style type=“text/css”>
Rules
</style>
</head>

InternalStyle
 Example :
<style type="text/css">
hr {
color:green;
}
p {
margin-left: 50px;
text-align: justify;
font-family: Times;
color: gold;
}
</style>

InternalStyle
 Example :
<head>
<style type="text/css" media="all">
a:link {color: blue; text-decoration: none;}
a:active {color: red; background-color: #FFC;}
a:visited {color:purple;text-decoration:none;}
a:hover{color:red;text-decoration: underline;}
a:focus {border-style:dashed;border-width:1px;
background-color: #FFA500;}
</style>
</head>

External Style
 The styles can defined in external files called stylesheets which
can then be used in any document by including the stylesheet via
a URL.
 The following tag is used to link the stylesheet to HTML document.
Usage :
<link rel=“type”
href=“URI”
type=“string”
media=“string”>
Example:
<link rel=“StyleSheet”
href=“css/Styles1.css”
type=“text/css”
media=“screen”>

External Style
 Example:
<head>
<title>External Style Sheet</title>
<link rel="stylesheet"
type="text/css"
href="css/Styles1.css" />
</head>
css/style1.css has the following
<link rel=“StyleSheet”
href=“css/Styles1.css”
type=“text/css”
media=“screen”>

External Style
 css/style1.css has the following
body {
background-color: lightblue;
}
h2 {
text-align: center;
color: blue;
font-family: "verdana"
}
p {
font-family: "sans serif";
color: yellow;
}

Properties and Values - Fonts
 Font of text can be changed using Style sheet.
 Always use TrueType fonts or generic font like serif(times),
sans-serif(arial), cursive, fantasy, monospaced(courier).
 font-family: <family name>
[<generic family>]
p {
font-family: “Bookman old style”,
“Times New Roman”, Times, serif;
}
 font-style: normal | italic |oblique
 font-weight: normal | bold | bolder | lighter |
100 | 200 | 300 | 400 | 500 | 600 |700 | 800 |
900
 The weight of any font can be changed. The first four options
are relative while numbered values gives absolute weights.

Backgrounds and Colors
 color: <value>
 background-color: <value> | transparent
 Background-image: URL | none
 The color of any attribute can be changed.
Values should be given in Hexadecimal values.
 Backgrounds for the whole page or individual
elements can have their color set from
stylesheet.
 Elements can have transparent background.
 Instead of color image can be used identified by
its URL.
 If background-color is set then background-
image cannot be set.

Text
 text-decoration: none | underline | overline |
line-through
 Any piece of text can be decorated.
 To remove underline the following can be used.
A:link, A:visited,
A:active{text-decoration: none}
 text-transformation: none | capitalize |
uppercase | lowercase
 Allows to set the case of text.
 text-align: left | right | center | justify
 One of the most useful text style. Allows to fully
justify text in a paragraph

Text
 text-indentation: length | percentage
 To give indentation to paragraph. It can be
given in percentage or length.

Boxes
 Many elements can be placed in boxes
margin: length | percentage |auto {1, 4}
Border-width: thin|thick|
meidum|length{1,4}
Padding: margin: length | percentage |auto {1, 4}
 Margins can be changed.
 Margins can be specified in lengths, instead if specified
in percentage resized window will not be adjusted in a
proper way.
 If all margins specified in order then it will take in order
top, right, bottom, left.
 If 2 values are specified the first value will be taken as
top and bottom, second value will be taken for left and
right margins
 Same Rules are applied as margin

Boxes
border-color: value{1, 4}
border-style: none|dotted|dashed |solid|
double|groove | ridge{1, 4}
 This sets the colour of the border around the element.
Upto 4 different colours can be specified. They are
applied in the same borders in the same order as
margins.
 Each edge of the border can have a different style.
width: length|percentage|auto
Height: length|auto
 Any block-level can be given a specific width or height.
 It is better to specify the width in percentage to allow
for resizing of the browser window.
 The height must be specified as an absolute size.

Units
 Lengths can be wither absolute or relative. A relative length
can be either positive or negative, which is indicated by
preceding the value with an optional + or -.
Relative units that can be used are:
 em: the height of the font for this element
 ex: the height of the letter “x” in the current font
 px: pixels
Allowable absolute units are:
 in: size in inches
 cm: size in centimeters
 mm: size in millimeters
 pt: points where 1 pt equals 1/72 inch
 pc: picas where 1 pc = 12 pt

URLs
 URLs can be used in stylesheets just as they
can in HTML documents. The format of the
URL reference is :
URL(location)
 URL can optionally be quoted.
 URL may be either absolute or relative.
 If a URL is partial it is considered to be
relative to the location of the stylesheet
source, not the HTML document source.

Cascading order
 Styles can be cascaded into a new virtual style
sheet by the following rules, where the
number four has the highest priority:
1. Browser default
2. External style sheet
3. Internal style sheet (in the head section)
4. Inline style sheet (inside an HTML
element)
 An inline style has the highest priority

Position
 Position can take values
• Static
• Relative
• Absolute
• Fixed

Position
 Static : The value static is the default value for
elements and renders the position in the normal
order of things as they appear in the html.
 Relative : It is much like static, but the element
can be offset from its original position with the
properties top, right, bottom and left .
 Absolute : The absolute element can be placed
anywhere on the page using top, right, bottom
and left .
 Fixed : It behaves like absolute, but fixed
elements should stay exactly where they are on
the screen even when the page is scrolled.

Floating
 Floating an element will shift it to the right
or left of a line, with surrounding content
flowing around it.
 Floating is normally used to position smaller
elements within a page
 Example :
img {
float: left;
}

Presentation on CSS, Style Sheet, Types of Styles, Types of Text Formatting, Fonts

Recommended

More Related Content

Similar to Presentation on CSS, Style Sheet, Types of Styles, Types of Text Formatting, Fonts (20)

Recently uploaded (20)

Presentation on CSS, Style Sheet, Types of Styles, Types of Text Formatting, Fonts