Chapter Two

HTML Styles – CSS

Outlines:-
 Introduction to CSS  CSS Styling • Styling Colors
 CSS Syntax Properties:  CSS Box Model
 Ways to link style • Styling Background • margins,
sheets to HTML • Styling Texts • borders,
______________________________________________________________________________________
______________________________________________________________________________________
 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.

Fundamentals Of Internet Programing

➢ 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.
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 {text-align: center; color:red; }
2

Fundamentals Of Internet Programing

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

Fundamentals Of Internet Programing

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

Fundamentals Of Internet Programing

 ➢ They are defined in an external CSS file
➢ They linked to in the <head> section of an HTML page.
<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).

Fundamentals Of Internet Programing

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).
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:#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;}

HTML link
An HTML link is the “address” to a document (or a resource) located on the World Wide Web.
 Hyperlink-is a reference(address) to a resource on the web. ➢An HTML anchor is a term used to define a
hyperlink destination inside a document.
<p> <a href="http://www.microsoft.com/" target=”_blank”>
This text</a> is a link to a page on the World Wide Web.</p> a:link {color:#000000; background-color:blue;
text-decoration:none}
a:visited {color:#000000; background-color:green; text-decoration:none}
a:hover {color:#ff0000; background-color:yellow; text-decoration:underline}
a:active {color:#ff0000; background-color:blue; text-decoration:underline}
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);" >
6
Fundamentals Of Internet Programing
<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.
</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

7
Fundamentals Of Internet Programing
  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>
 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>

The End!!!
Thanks for Attending!!!
8
Fundamentals Of Internet Programing