Chapter Three

HTML Styles – CSS

Outlines:-
 Introduction to CSS CSS Styling Properties: CSS Box Model
 CSS Syntax Styling Background margins,
 Ways to link style sheets to Styling Texts borders,
HTML Styling Colors
_____________________________________________________________________________________
_
_____________________________________________________________________________________
_
 Introduction to CSS
 CSS stands for Cascading Style Sheets
 CSS defines how HTML elements are to be displayed
 Used to control the style and layout of multiple pages all at once.
 CSS saves a lot of work.
 External Style Sheets are stored in separate CSS files.
 The Cascading Style Sheets is a simple design language intended to simplify the process of making
web pages presentable. CSS handles the look and feel part of a web page. Using CSS, the color of the
text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what
background images or colors are used, as well as a variety of other effects can be controlled.
 CSS provide easy and effective alternatives to specify various attributes for the HTML tags.
 It is a style sheet language used for describing the look and formatting of a document written in
a markup language.
Style Sheets solves a Big Problem
➢ HTML was never intended to contain tags for formatting a document.
➢ HTML was intended to define the content of a document, like:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
➢ When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a
worrisome for web developers.
➢ Development of large web sites, where fonts and color information were added to every single page,
became a time consuming and expensive process. To solve this problem, the World Wide Web
Consortium (W3C) created CSS.
CSS Saves a Lot of Work(Less work)!
➢ CSS defines HOW HTML elements are to be displayed.
➢ Style Sheets are normally saved in external files as .css file extensions.
➢ You can change the appearance of an entire site by editing one style sheet.
➢ Making small touches and even entire site redesigns with style sheets is much easier than when
presentation instructions are mixed in with the mark-up.
1
Advantages of CSS
 CSS saves time - You can write CSS once and then reuse same sheet in multiple HTML pages.
 Pages load faster - If you are using CSS, you do not need to write HTML tag attributes every
time. Just write one CSS rule of a tag and apply to all the occurrences of that tag. So less code
means faster download times.
 Easy maintenance - To make a global change, simply change the style, and all elements in all the web
pages will be updated automatically.
 Multiple Device Compatibility- By using the same HTML document, different versions of a website
can be presented for handheld devices such as PDAs and cell phones or for printing.
 Global web standards - Now HTML attributes are being deprecated and it is being recommended to
use CSS. So its a good idea to start using CSS in all the HTML pages to make them compatible to
future browsers.
CSS Syntax:
CSS Syntax:A CSS rule set consists of a selector and a declaration block:
 The selector points to the HTML element you want to style.
 A selector is an HTML tag at which style will be applied. This could be any tag like <h1> or
<table> etc.
 The declaration block contains one or more declarations separated by semicolons.
 Each declaration includes a property name and a value, separated by a colon.

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

CSS Comments:
 Comments are used to explain your code, and may help you when you edit the source code at a later
date.
 Comments are ignored by browsers.
 A CSS comment starts with /* and ends with */.
 Comments can also span multiple lines:

CSS Selectors
➢ CSS selectors allow you to select and manipulate HTML elements.
➢CSS selectors are used to "find" or select HTML elements based on their id, class and type.
➢The element Selector
➢The element selector selects elements based on the element name (Tag name).
p{

2
 text-align: center; color:red;
}
The Universal Selector
Rather than selecting elements of a specific type, the universal selector quite simply matches the name of
any element type:
*{
color: #000000;
}
The id Selector
 The id selector uses the id attribute of an HTML element to select a specific element.
 An id should be unique within a page
 id selector is used if you want to select a single, unique element, so the id selector is used if you want
to select a single, unique element.
 Uses a hash character + id of the element.
Example:
#para1{
text-align: center; h1#black {
color: red; color: #000000;
}
Do NOT start an ID and Class name with a number!
The class Selector
 You can define style rules based on the class attribute of the elements. All the elements having that
class will be formatted according to the defined rule.
 Selects elements with a specific class attribute.
 Uses a period character, followed by the name of the class.
 Example:
.para2
{ text-align: center;color: red;}
 You can also specify that only specific HTML elements should be affected by a class.
p. para2
{ text-align: center; color: red;}
CSS Selector/Grouping Selectors
 Grouping Selectors: If you have elements with the same style definitions, like this:
P{
h1 { h2 {
text-align: center; text-align: center; text-align: center;
color: red; color: red; color: red;
} } }
 you can group the selectors, to minimize the code.
 To group selectors, separate each selector with a comma.

h1,h2,p {
text-align: center;
color: red;
}
3
Styling HTML with CSS:
When a browser reads a style sheet, it will format the document according to the information in the style
sheet.
 Styling can be added to HTML elements in 3 ways:
 Inline - using a style attribute in HTML elements
 Internal - using a <style> element in the HTML <head> section
 External - using one or more external CSS files
Inline Styling (Inline CSS)

 Inline styling is useful for applying a unique style to a single HTML element:
 Inline styling uses the style attribute.
 This inline styling changes the text color of a single heading:
 Style sheet rules can be applied directly to any HTML element using style attribute of the tag.
 This should be done when there is a need to change the style of a particular HTML element.
 Rules define in line with the element overrides the rules define in an external CSS file as well
as the rules defined in <style> element.
Example:<h1 style="color:blue">This is a Blue Heading</h1>
Internal Styling

➢Used to define a common style for all HTML elements on a page.

➢Internal styling is defined in the <head> section of an HTML page, using a <style> element.
Example: <head> <style>
body {background-color:lightgrey;}
h1 {color:blue;} p {color:green;}
</style>
</head>
External Styling

It is recommended to define a common style sheet in a separate file from the html file if the style sheet is
needed to use to various pages. An external style sheet is simply a text file containing a list of CSS
rules sets. The file is saved with a .css extension and saved to any directory that can be accessed by the
web pages using it. A cascading style sheet file will have extension as .css and it will be including in
HTML files using <link> tag. The link element can be used to specify that a web page should use an
external style sheet. The link element only requires a start tag <link> and is inserted in between the
<head>…</head> tags of our web page document. It can be used as many times as we like. The link
element employs three important attributes:
rel: the value of this attribute is always stylesheet
type: the value of this attribute is always text/css.
href: the value of this attribute will be changed according to .css file to be referring to. This value can be
any relative or absolute path.
➢ You can be applied in to many pages.
➢ You can change the look of an entire web site by changing one file.
➢ They are defined in an external CSS file
➢ They linked to in the <head> section of an HTML page.
4
<head>
<link rel="stylesheet" href="styles.css"> </head>
Example
Consider we define a style sheet file style.css which has following rules:
.red{
color: red;
}
.thick{
font-size:20px;
}
.green{
color:green;
}
Here we defined three CSS rules which will be applicable to three different classes defined for the HTML
tags. Now let's make use of the above external CSS file in our following HTML document:
<!DOCTYPE html>
<html><head>
<title>HTML External CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head><body>
<p class="red">This is red</p>

<p class="thick">This is thick</p>

<p class="green">This is green</p>

<p class="thick green">This is thick and green</p>

</body></html>
The produced result will be:

➢Multiple Styles Will Cascade into One:

➢Cascading order: Generally speaking we can say that all the styles will "cascade" into
a new "virtual" style sheet by the following rules, where number three has the highest
priority:
1. Browser default
2. External and internal style sheets (in the head section)
3. Inline style (inside an HTML element).
Multiple Style Sheets
So, an inline style (inside an HTML element) has the highest priority, which means that it
will override a style defined inside the <head> tag, or in an external style sheet, or in
a browser (a default value).
5
N.B: If the link to the external style sheet is placed below the internal style sheet in
HTML <head>, the external style sheet will override the internal style sheet!
CSS – Colors

CSS uses color values to specify a color. Typically, these are used to set a color either for
the foreground of an element (i.e., its text) or else for the background of the element.
They can also be used to affect the color of borders and other decorative effects. You
can specify your color values in various formats. Following table tells you all
possible formats:
Format Syntax Example
Hex Code #RRGGBB p{color:#FF000
Short Hex Code #RGB p{color:#6A7;}
RGB % rgb(rrr%,ggg%,bbb%) p{color:rgb(50%
RGB Absolute rgb(rrr,ggg,bbb) p{color:rgb(0,0,
keyword aqua, black, etc. p{color:teal;}

CSS Background
➢CSS background properties are used to define the background effects of an element.
➢CSS properties used for
background effects:
 background-color:
#6495ed;
o Specifies the background color of an element.
 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"
Example: <p style="background-color:yellow;">
This text has a yellow background color.</p>
 background-image
 -specifies an image to use as the background of an element.
 -background-image:url("paper.gif");
Example: <table style="background-image:url(/images/ uoglogy.gif);" >
<tr><td>This table has background image set.</td></tr></table>
 background-repeat- By default, the background-image property repeats an image
both horizontally and vertically.
 Some images should be repeated only horizontally or vertically
 repeat-x-Repeat The image Horizontally
 repeat-y-Repeat the image vertically
 no-repeat
Example: <table style="background-image:url(/images/uoglogo.gif);
background-repeat: repeat;">
<tr><td>This table has background image which repeats multiple times.
6
 </td></tr></table>

 background-attachment-The background-attachment property sets whether a

background image is fixed or scrolls with the rest of the page.
Example: background-attachment:scroll|fixed|local|initial|;
<p style="background-image:url(/images/uoglogy.gif);
background-attachment:fixed;">
This paragraph has fixed background image.</p>
 background-position: Specifies the position of the image.
Example: background-position: right top;
<table style="background-image:url(/images/uoglogy.gif);
background-position:100px;">
<tr><td>Background image positioned 100 pixels away from the
left.</td></tr></table>

 CSS Text
➢Text Color-The color property is used to set the color of the text.
Example: <p style="color:red;">
This text will be written in red.</p>
 Text Alignment-The text-align property is used to set the horizontal alignment of a
text.
 Text can be center, left, right, or justify.
 When text-align is set to "justify", each line is stretched so that every line has equal
width, and the left and right margins are straight (like in magazines and newspapers).
 Set the text direction: Following is the example which demonstrates how to set the
direction of a text. Possible values are ltr or rtl. Example
<p style="direction:rtl;">
This text will be renedered from right to left </p>
 Text Decoration-The text-decoration property is used to set or remove decorations
from text.
 The text-decoration property is mostly used to remove underlines from links for
design purposes.
 It takes values none, overline ,line-through, underline.
 Text Transformation-The text-transform property is used to specify
➢ uppercase-To Change all texts to Uppercase.
➢ lowercase letters in a text p {text-indent: 50px;
➢ capitalize the first letter of each word. text-tramsform:capitalize}
 Text Indentation: The text-indent property is used to specify the indentation of the
first line of a text
 Set the space between characters: Following is the example which demonstrates
how to set the space between characters. Possible values are normal or a number
specifying space.
Example:
<p style="letter-spacing:5px;">
This text is having space between letters.</p>

7
  Set the space between words: Following is the example which demonstrates how to
set the space between words. Possible values are normal or a number specifying
space. <p style="word-spacing:5px;"> </p>
 Font Family:
 The font-family property is used to change the face of a font.
 The font family of a text is set with the font-family property.
 The font-family property should hold several font names. If the browser does
not support the first font, it tries the next font.
 Note: If the name of a font family is more than one word, it must be in quotation
marks, like: "Times New Roman".
 More than one font family is specified in a comma-separated list.
 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.
 The font property is used as shorthand to specify a number of other font properties.

p { font-family: "Times New Roman", Times, serif; }

 CSS Font
➢CSS font properties define the font family, boldness, size, and the style of a text.
➢Font Style and Font Size:
➢The font-style property is mostly used to specify italic text.
➢ This property has three values:
➢ normal - The text is shown normally
➢ italic - The text is shown in italics
➢ oblique - The text is "leaning" (oblique is very similar to italic, but less supported)
Example:
<p style="font-weight:bold;">
This font is bold.
</p>
<p style="font-weight:bolder;">
This font is bolder.
</p>
<p style="font-weight:900;">
This font is 900 weight.
</p>
<p style="font-style:italic;">
This text will be rendered in italic style
</p>