Syllabus
✔ Introduction to CSS
✔ CSS basics
✔ CSS Selectors( element, ID, class)
✔ Type of style sheets (inline styles, internal and external)
✔ CSS Font properties
✔ CSS text properties (Formatting text)
✔ CSS background properties
Learning Objectives
➢ After completing this chapter students will be able to--
➢ Learn how to include styles in an HTML document.
➢ Learn the basic syntax of the CSS style
➢ Get an idea about different CSS selectors
➢ Know about the different styles of elements.
➢ Know about different properties like text, font, border and background etc.
What is CSS?
✔ CSS stands for Cascading Style Sheets.
✔ CSS allows you to apply styles for web pages.
(OR)
It is a simple mechanism for adding style (example font, color, spacing
etc) to web documents.
✔ By using CSS we can make good looking, attractive, effective and beautiful
web pages. Without CSS, your website will appear as a plain HTML page.
What does adding styles mean?
✔ Applying colors to text/font/para/table/list etc.
✔ Applying font sizes for heading/sub-heading/title/sub-titles etc.
✔ Space between lines/paragraphs/tables/lists/heading & sub headings/table &
borders etc.
✔ Applying background colors/images to page.
body/tables/paragraphs/headings etc.
✔ Margins & borders to page/table/forms/frames etc.
✔ Positioning of elements( right, left, center etc.)
✔ Design, layout and variations in display for different browsers/screen
sizes/devices etc.
How does CSS relate to HTML?
➢ While HTML is used to structure a web page/document (defining things
like headlines and paragraphs, and allowing you to embed images, video,
and other media), whereas CSS is used to add styles (design, layout,
format etc) to web pages.
What is the need of style sheets?
While developing large websites using attributes to each and every single page
will become long and expensive process.
What is Cascading?
✔ Several style sheets can be blended to present a document on the
browsers screen.
✔ If a style is applied to parent element will also applied to all children
elements within the parent.
✔ Example: If you apply text color red to body text, all headings, paragraphs
and other text elements within the body will also get the same color.
What is a style sheet?
It is document that contains style information about one or more
documents written in markup language. It enables us to control rendering
of styles such as fonts, color, typeface, size, spacing, margins, and other
aspects of document style. It is composed of a set of style rules written in
a specific format.
Why CSS?
(OR)
What are the benefits/advantages with style sheets?
✔ Used for good looking, attractive, effective and beautiful pages.
✔ CSS saves a lot of Work & Time.(CSS code can be reusable)
✔ Global web standards.
✔ Easy to learn and understand.
✔ Multiple browser support. CSS is compatible with all web browsers.
✔ Using style sheets is better and using attributes.
✔ It can control the layout of multiple web pages all at once. (Similar look,
feel, layout, style, font size & design for all pages).
✔ Absolute positioning and printer friendly.
✔ Pages can be accessed quickly/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 it to all the occurrences of that tag. So less code
means faster download times.
✔ Multiple device compatibility It applies different layouts to different media-
types. Style sheets allow content to be optimized for more than one type
of device.
✔ Easy maintenance If we want to modify any style in all pages, simply edit
only CSS file. It controls layout of many documents from one single style
sheet.
✔ Style sheet writers can think about the visual presentations of these
documents without bothering about the document content.
✔ Search Engines CSS is considered a clean coding technique, which means
search engines won’t have to struggle to “read” its content.
Drawbacks/Disadvantages/Limitations CSS
Browser compatibility CSS works differently on different browsers (some styles
sheet are supported and some not). It displays web pages very differently in the
different browsers.
✔ Your web page looks perfect in Mozilla may look different in Internet
Explorer. Example IE and Opera supports CSS as different.
✔ Change of alignment.
✔ There are multiple levels of CSS such as CSS1, CSS 2, CSS 3. This can
create confusion for non-developers and beginners.
✔ Limited security.
✔ Document writers can not concentrate on developing the document
content.
Are there any versions of CSS?
Yes, they are
(1)CSS Level 1 (CSS1)
(2)CSS Level 2 (CSS2)
(3) CSS Level 3 (CSS3) (Latest version/standard)
** these versions differ in text effects, animations & user interface etc.
What are the ways to apply styles to HTML pages/document?
(OR)
How CSS code is applied to HTML pages/document?
(OR)
What are the methods to apply CSS to HTML pages/document?
(OR)
What are the ways to implement CSS?
There are 3 ways to add CSS code to our HTML pages
OR
Styles in HTML can be defined in 3 ways.
1) Inline Style/CSS
2) Internal/Embedded Style/CSS
3) External CSS
In-line CSS / inline Style
✔ It is used to apply styles for an individual elements/a single element/a
specific element.
✔ This kind of style is specified by adding “style attribute” within the HTML
tag.
✔ One way to apply CSS to HTML is by using the HTML attribute style.
✔ Style is an attribute that specifies the style of an element.
For example
font-family, font-size, color & background etc.
✔ Style attribute describes how the content will be displayed.
✔ Selectors will not be used here.( We will learn about selectors later).
✔ The style attribute can contain any CSS property.
Syntax for single declaration
<tag style=”property-name:value;” >content…..</tag>
Syntax for multiple declarations
<tag style= “P1:V1 ; P2: V2 : P3:V3…..> Content </tag>
✔ Example codes without output
<p style=”font-size:40px ; ”> This is sample paragraph </p>
<h1 style=”color:blue ; ” > This is title </h1>
<body style=”background-color:green ; font-style:italic ;”> Page content
</body>.
Example-1 with code and output.
<!DOCTYPE html>
<html>
<body style=background-color:pink>
<h1 style="color:blue">This is a heading</h1>
<p style="color:green;">This is a
paragraph.</p>
</body>
</html>
Example-2 with code and output.
<html>
<body>
<p style="font-weight:bold">This is a
paragraph.</p>
<p style="font-style:italic;
border-style:dotted">second line</p>
</body>
</html>
✔ Advantages with inline CSS
You can easily and quickly insert CSS rules to an HTML page.
Styles can be applied on the same page.
No need to create and link external style sheets.
✔ Disadvantages with Inline CSS
✗ Managing a website may difficult if we use only inline CSS
✗ makes your HTML structure messy
✗ Applying style to each and every element is time consuming, leads to huge
code.
✗ Styling multiple elements can affect your page’s size and download time.
CSS Comments
CSS comments are not displayed in the browser. Comments are ignored by browsers.
Comments are used to explain the code, and may help when you edit the source code
at a later date.
Syntax: /* This is comment */
Example-1
* This is a single-line comment */
p { color: red; }
Example-2
p { color: red; /* Set text color to red */ }
Example-3
/* This is a multi-line
comment */
p { color: red; }
** Before we discuss about Internal/Embedded CSS, we better learn CSS Selectors.
CSS Selectors
✔ To apply CSS to an element you need to select it. CSS provides you with
a number of different ways to do this.
✔ The basic building blocks of style rules are selectors.
✔ In CSS, selectors are used to target the HTML elements on our web pages that
we want to style.
✔ CSS selectors select or find the HTML elements according to their id, class,
type, attribute, etc.
✔ A CSS selector is the first part of a CSS Rule.
✔ The elements selected by selectors are called subjects of the selectors.
✔ To understand how selectors work and their role in CSS, it's important to know
the parts of a CSS rule. A CSS rule is a block of code, containing one or more
selectors and one or more declarations.
✔ Syntax: selector {property : value ;}
------------------------
Declaration
✔ example:
h1 {font-size : 10px ; color : red }
Selector property-name value property-name value
Declaration Declaration
✔ Declaration Block: The declaration block can contain one or more
declarations separated by a semicolon(;). In the above example we have
two declarations.
✔ Each declaration contains a property name and value, separated by a
colon(:).
We have few categories of CSS Selectors, here we will discuss only simple
selectors (Select elements based on name, id, class)
There are many basic different types of selectors.
✔ Element/Type Selector
✔ Id Selector
✔ Class Selector
✔ Universal Selector
✔ Group Selector
Element/type selector
✔ A type/element selector is a simple selector, which is the name of a
document element and it matches every single element of the document.
✔ For example the selector P selects every <p> element in the document.
Similarly the selector b selects every <b> element.
✔ The most basic CSS selectors are Element Type Selectors. That's a fancy
name for simply using an HTML tag, without the angle braces.
✔ The element selector selects HTML elements based on the element name.
✔ A type selector matches an HTML element directly.
Syntax: htmlelement { styles… }
Example: p {color : red ; font-size:10px ;}
Here, the text size of all <p> elements on the page will be 10 pixels, with a
red text color
Example: h1 { font-family: sans-serif }
The following rule matches all H1 elements in the document.
<html><head><style>
p {color: red; }
h2{ font-size:20px; color:green}
</style>
</head>
<body>
<h2>Example</h2>
<p>VZM and VSKP</br>
Twin cities</p>
</body></html>
Universal selector ( * )
✔ It matches/selects every element on the page.
✔ For example if we want every element should have red color text , we can
use universal selector.
Syntax * { styles… }
Example *{ color : red}
<html><head><style>
* { color: blue; }
</style></head><body><h1>Hello world!</h1>
<p>Department of IT</p>
<ul><li>P1</li>
<li>P2</li></ul>
</body></html>
The universal selector(*) is useful when element names are not known in
advance during the development of style sheet.
Grouping Selector
✔ When several selectors share the same declarations, they may be grouped
into a comma-separated list.
✔ The grouping selector selects all the HTML elements with the same style
definitions.
✔ A selector doesn't have to match only a single element. You can group
multiple selectors by separating them with commas
Syntax element1, element2, element3 { styles….}
Example h1, h2, h3 { font-size:20px ; color : red ; text-align:center }
From the above example all the heading elements share the common styles.
h1{ font-size:20px ; color : red ; text-align:center} h1, h2, h3
h2 { font-size:20px ; color : red ; text-align:center} { font-size:20px ; color :
h3 { font-size:20px ; color : red ; text-align:center} red ; text-align:center}
The above codes are same, produce same styles.
<html><head><style>
h2,h3, p,ol { color: red; font-size:19px }
</style></head><body>
<h2>Smaller heading!</h2>
<h3>Heading-3</h3><p>This is a paragraph.</p>
<ol><li>VZM</li>
<li>VSKP</li></ol>
</body></html>
Class Selector
✔ The class selector selects HTML elements with a specific class attribute.
✔ To select elements with a specific class, write a period (.) character,
followed by the class name.
✔ Match an element that has the specified class.
✔ To match a specific class attribute, we always start the selector with a
period, to signify that we are looking for a class value. The period is
followed by the attribute value we want to match.
✔ For example, if we wanted all elements with a class of "highlight" to have
a different background color, we would use the following CSS
rule:.highlight { background-color: #ffcccc; }
✔ A HTML element can have one or more items defined in their class
attribute. The class selector matches any element that has that class applied
to it.
✔ These selectors provide flexible way to apply styles to elements. Class
selectors deal with the elements having the attribute class.
✔ This way a set of related elements can be grouped and a common style
can be applied to every element in the group. An element may belong to
more than one group.
✔ CSS Selectors are useful to control elements that belong to a group as
well as to remove limitations of the selector.
✔ Normally used to group top level elements in a document.
✔ The excessive use of class selectors makes style files and documents
complicated.
✔ Class names are case-sensitive, for example class names .new, .New, .NEW
are different.
Syntax .classname { styles…}
Example .new{ color : red }
<html><head><style>
.center { color: red;
text-decoration:underline; font-style:italic }
</style></head>
<body> <h2 class="center">Heading</h2>
<p class="center">paragraph.</p>
</body></html>
You can also specify that only specific HTML elements should be affected by a
class.
<html><head>
<style> [Link] { color: red; }</style></head>
<body>
<h3 class="center">Heading not affected</h3>
<p class="center">Para with red color text</p>
</body> </html>
HTML elements can also refer to more than one class.
<html><head><style>
[Link] { color: red; }
[Link] { font-size: 130%; }
</style></head><body>
<h3 class="center">Not affected</h3>
<p class="center"> Para with ONLY red color
text</p>
<p class="center large">Para with TEXT SIZE
and COLOR</p>
</body></html>
Note: A class name cannot start with a number!
It must start with . (dot/period)
id selector
✔ An HTML element with an id attribute should be the only element on a
page with that ID value.
✔ What makes attributes of type ID special is that no two such attributes
can have the same value; whatever the document language, an ID
attribute can be used to uniquely identify its element. In HTML all ID
attributes are named "id";
✔ A CSS ID selector contains a "#" immediately followed by the ID value,
which must be an identifier.
✔ Match an element that has the specified id.
✔ To match a specific id attribute, we always start the selector with a hash
symbol (#), to signify that we are looking for an id value. The hash is
followed by the attribute value we want to match. Remember, we can only
use the same id attribute value once, so the id selector will always only
match one element in our document.
✔ The id selector uses the id attribute of an HTML element to select a
specific element.
✔ The id of an element is unique within a page, so the id selector is used to
select one unique element!
✔ To select an element with a specific id, write a hash (#) character,
followed by the id of the element.
✔ The attribute id of an element is a unique identifier in a web page.
✔ This means that not two id attributes can have the same value within the
document
Note: An id name cannot start with a number!
Syntax #anyname { styles…. }
example #new { color: red; text-align:right }
<html><head><style>
#para1 { color: red; }
#para2 { color: blue; }
</style></head><body>
<h2 id="para1">Hello World!</h2>
<p id="para2">This is paragraph</p>
</body></html>
** The difference between an ID and a class is that an ID can be used to
identify one element, whereas a class can be used to identify more than one.
In the CSS, a class selector is a name preceded by a full stop (“.”) and an ID
selector is a name preceded by a hash character (“#”).
Class ID
We can attach multiple class selectors We can attach only one ID selector to
to an element. an element.
We can apply a class to various The Id is unique in a page, and we
elements so that it could be can only apply it to one specific
numerous times on a single page. element.
The class can be applied to multiple
Id is unique in a page and can only
elements so it could be multiple times
apply to at most one element
on a single page.
Internal/Embedded CSS
✔ This style is very useful and effective to style single pages.
✔ can be used when a single HTML document has to be styled uniquely.
✔ We will use <style> element in the page header section, all styles will be
included in the <style> element.
✔ The internal style is defined inside the <style> element, inside the head
section.
✔ Internal CSS allows you to style groups of elements at once — rather than
having to add the same style attributes to elements over and over again.
✔ You can use class and ID selectors in this style sheet.
Disadvantages of Internal CSS
✔ Adding the code to the HTML document can increase the page’s size and
loading time.
Syntax
<html><head><style>
tag1 { “ property1 : value1 ; property2 : value2” }
tag2 { “ property3 : value “ }
...............................
...............................
<style>
<body>
Styles will be applied on the contents based the styles….
<body>
</head></html>
Example 1
<html>
<head><style>
h1{color: red; margin-left: 30px }
p{text-decoration-line:underline;}
ol{letter-spacing:10px}
</style>
</head><body>
<h1>Heading</h1>
<p>This is paragraph.</p>
<ol>
<li>VZM</li>
<li>VSKP</li>
</ol>
</body>
</html>
External style sheets
✔ In in-line and internal CSS we will include styles in the HTML pages it
self, but in external style sheets we will keep all styles in a separate file
with .css extension.
✔ All HTML pages will be linked with that css file, each HTML page must
include a reference to the external style sheet file inside the <link>
element, inside the
✔ head section.
✔ With an external style sheet, you can change the look of an entire website
by changing just one file!
✔ An external style sheet can be written in any text editor.
✔ The external .css file should not contain any HTML tags.
Syntax <html>
<head>
<link rel=”stylesheet” href=cssFileName>
</head>
<body>
Page related content…….
</body>
</html>
Lets assume that I have created a style sheet with few styles and my style
sheet name is [Link].
Adding the external file into HTML page
What style will be used when there is more than one style specified for an
HTML element?
If all styles used (inline, internal and external)
an inline style has the highest priority, and will override external and
internal styles and browser defaults.
If internal and external used
External styles will be override by Internal
Priority:- Inline style >> Internal Style >> External Style
CSS Text properties
CSS has a lot of properties for formatting text.
Text Color
The color property is used to set the color of the text. The color is specified by
✔ a color name - like "red"
✔ a HEX value - like "#ff0000"
✔ an RGB value - like "rgb(255,0,0)"
The default text color for a page is defined in the body selector.
Example code
Output
<html><head>
<style>
body { color: blue; }
h1 { color: green; }
</style>
</head>
<body>
<h1>Sample heading..</h1>
<p>Sample paragraph.</p>
</body></html>
Text Color and Background Color
In this example, we define both the background-color property and the color
property
Output
Text Alignment
The text-align property is used to set the horizontal alignment of a text.
A text can be left or right aligned, centered, or justified.
Example
Output
CSS Text Decoration
The text-decoration-line property is used to add a decoration line to text.
Tip: You can combine more than one value, like overline and underline to display lines both over and under
a text.
Example
<html>
<head>
<style>
h1 { text-decoration: overline; }
h2 { text-decoration: line-through; }
h3 { text-decoration: underline; }
.ex { text-decoration: overline underline; }
</style>
</head>
<body>
<h1>Overline text decoration</h1>
<h2>Line-through text decoration</h2>
<h3>Underline text decoration</h3>
<p class="ex">Overline and underline text decoration.</p>
</body>
</html>
Output
Specify a Color for the Decoration Line
The text-decoration-color property is used to set the color of the decoration
line.
Example
<html>
<head>
<style>
h1{
text-decoration-line: overline;
text-decoration-color: red;
}
h2{
text-decoration-line: line-through;
text-decoration-color: blue;
}
h3{
text-decoration-line: underline;
text-decoration-color: green;
}
p{
text-decoration-line: overline underline;
text-decoration-color: purple;
}
</style>
</head>
<body>
<h1>Overline text decoration</h1>
<h2>Line-through text decoration</h2>
<h3>Underline text decoration</h3>
<p>Overline and underline text decoration.</p>
</body>
</html>
Output
Text Transformation
The text-transform property is used to specify uppercase and lowercase letters in a text.
It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of
each word:
Example
<html><head><style>
[Link] { text-transform: uppercase; }
[Link] { text-transform: lowercase; }
[Link] { text-transform: capitalize; }
</style></head>
<body>
<p class="uppercase">This text is transformed to uppercase.</p>
<p class="lowercase">This text is transformed to lowercase.</p>
<p class="capitalize">This text is capitalized.</p>
</body></html>
Output
CSS Text Spacing
CSS Text Indentation, Letter Spacing, Line Height and Word Spacing etc
Text Indentation
• The text-indent property is used to specify the indentation of the first line of a text
Example
<html><head><style>
p { text-indent: 50px; }
</style>
</head>
<body>
<h1>text-indent Example</h1>
<p>In my younger and more vulnerable years my father gave me some advice
that I've been turning over in my mind ever since. </p>
</body></html>
Output
Letter Spacing
The letter-spacing property is used to specify the space between the characters in a text.
Example
<html><head><style>
h2{
letter-spacing: 5px;
}
h3{
letter-spacing: -2px;
}
</style></head>
<body>
<h2>This is heading 1</h2>
<h3>This is heading 2</h3>
</body></html>
Output
Line Height
The line-height property is used to specify the space between lines
Example
<html><head><style>
[Link] { line-height: 0.7; }
[Link] { line-height: 1.8; }
</style></head><body>
<h1>line-height Example</h1>
<p>Hello world<br> Welcome to RGUKT<br> </p>
<p class="small">Hello world<br>Welcome to RGUKT<br></p>
<p class="big">Hello world<br>Welcome to RGUKT<br></p>
</body>
</html>
Output
Word Spacing
The word-spacing property is used to specify the space between the words in a text.
Example
<html><head><style>
[Link] { word-spacing: 10px; }
[Link]{ word-spacing: -2px; }
</style></head><body>
<h1>Using word-spacing</h1>
<p>This is a paragraph with normal word spacing.</p>
<p class="one">This is a paragraph with larger word spacing.</p>
<p class="two">This is a paragraph with smaller word spacing.</p>
</body></html>
Output
CSS Fonts
Font family
In CSS, we use the font-family property to specify the font of a text.
Example
<html><head><style>
.p1{ font-family: Times New Roman;}
.p2{ font-family: Arial;}
.p3{ font-family: Lucida Console;}
</style></head><body>
<p class="p1">This is a paragraph, shown in the Times New Roman font.</p>
<p class="p2">This is a paragraph, shown in the Arial font.</p>
<p class="p3">This is a paragraph, shown in the Lucida Console font.</p>
</body></html>
Output
CSS Font Style
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
<html><head><style>
[Link]{ font-style: normal; }
[Link]{ font-style: italic; }
[Link]{ font-style: oblique; }
</style></head><body>
<h1>The font-style property</h1>
<p class="normal">This is a paragraph in normal style.</p>
<p class="italic">This is a paragraph in italic style.</p>
<p class="oblique">This is a paragraph in oblique style.</p>
</body></html>
Output
CSS Font Size
Font Size-The font-size property sets the size of the text.
Example
<html><head><style>
[Link] { font-size: 10px; }
[Link] { font-size: 100%; }
[Link] { font-size: 1.5em; }
</style></head><body>
<p class="normal">This is a paragraph in normal style.</p>
<p class="italic">This is a paragraph in italic style.</p>
<p class="oblique">This is a paragraph in oblique style.</p>
</body></html>
Output
CSS Backgrounds
The CSS background properties are used to add background effects for
elements.
The background-color property specifies the background color of an element.
CSS background-image
The background-image property specifies an image to use as the background of
an [Link] default, the image is repeated so it covers the entire element.
Example
<html><head> <style>
body { background-image:url("[Link]") }
</style></head><body>
<h1>Hello world!!</h1>
</body></html> Output
CSS background-repeat
To repeat an image vertically, set background-repeat: repeat-y;
To repeat an image horizontally, set background-repeat: repeat-x;
Showing the background image only once is also specified by the
background-repeat property
Example repeat-x
<html><head><style>
body{
background-image:url("[Link]");
background-repeat: repeat-x; }
</style></head><body>
<h1>Hello
world!!</h1></body></html>
Example repeat-y
<html><head><style>
body{ background-image:url("[Link]");
background-repeat: repeat-y; }
</style></head><body>
<h1>Hello world!!</h1>
</body></html>
Example no-repeat
<html><head><style>
body{background-image:url("[Link]");
background-repeat: no-repeat; }
</style></head><body>
<h1>Hello world!!</h1>
</body></html>
