Syllabus Content:

CSS: Need for CSS, introduction to CSS, basic syntax and structure, using CSS, background
images, colors and properties, manipulating texts, using fonts, borders and boxes, margins,
padding lists, positioning using CSS, CSS2, Overview and features of CSS3.

Cascading Style Sheets: Introduction

CSS was first proposed by Håkon Wium Lie on 10 October 1994.
✓ CSS is used to control the style of a web document in a simple and easy way.
✓ Cascading Style Sheets, fondly referred to as CSS, is a simple design language
intended to simplify the process of making web pages presentable.
✓ CSS is a MUST for students and working professionals to become a great Software
Engineer especially when they are working in Web Development Domain.
Key advantages of learning CSS:
• Create Stunning Web site - CSS handles the look and feel part of a web page. Using
CSS, you can control 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, layout designs, and variations in display for different devices and screen sizes as
well as a variety of other effects.
• Become a web designer - If you want to start a career as a professional web designer,
HTML and CSS designing is a must skill.
• Control web - CSS is easy to learn and understand but it provides powerful control over
the presentation of an HTML document. Most commonly, CSS is combined with the
markup languages HTML or XHTML.
• Learn other languages - Once you understand the basic of HTML and CSS then other
related technologies like JavaScript, php, or angular are become easier to understand.

Need of CSS
As mentioned before, CSS is one of the most widely used style language over the web. I'm
going to list few of them here:
• CSS saves time - You can write CSS once and then reuse same sheet in multiple HTML
pages. You can define a style for each HTML element and apply it to as many Web
pages as you want.
• 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.
• Easy maintenance - To make a global change, simply change the style, and all elements
in all the web pages will be updated automatically.
• Superior styles to HTML - CSS has a much wider array of attributes than HTML, so
you can give a far better look to your HTML page in comparison to HTML attributes.
 • Multiple Device Compatibility - Style sheets allow content to be optimized for more
than one type of device. 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 it’s a good idea to start using CSS in all the HTML pages
to make them compatible to future browsers.

CSS Versions

Cascading Style Sheets level 1 (CSS1) came out of W3C as a recommendation in December
1996. This version describes the CSS language as well as a simple visual formatting model for
all the HTML tags.
CSS2 became a W3C recommendation in May 1998 and builds on CSS1. This version adds
support for media-specific style sheets e.g. printers and aural devices, downloadable fonts,
element positioning and tables.
CSS3: CSS3 is a latest standard of css earlier versions (CSS2). The main difference between
css2 and css3 is follows −
• Media Queries
• Namespaces
• Selectors Level 3
• Color
CSS3 modules
CSS3 is collaboration of CSS2 specifications and new specifications, we can called this
collaboration is module. Some of the modules are shown below −
• Selectors
• Box Model
• Backgrounds
• Image Values and Replaced Content
• Text Effects
• 2D Transformations
• 3D Transformations
• Animations
• Multiple Column Layout
• User Interface

Major Differences between CSS, CSS2 & CSS3

1. CSS was originally released in 1996 and consists of properties for adding font properties
such as typeface and emphasis color of text, backgrounds, and other elements. CSS2 was
released in 1998 with added styles for other media types so that it can be used for page
layout designing. CSS3 was released in 1999 and presentation-style properties were
added in it that allows you to build a presentation from documents.
 2. Unlike CSS2, which was comprised of a single document, CSS3 has its specifications
divided into many individual modules, which makes CSS3 a whole lot easier to handle.
3. With CSS3, the designers can now use special fonts, like those available in Google Fonts
and Typecast. Earlier, with CSS and CSS2, designers could only use “web-safe fonts” for
being 100% sure to use fonts that would always display the same on every machine.
4. While CSS and CSS2 had ‘simple selectors’, CSS3 calls the components as ‘a sequence
of simple selectors’.
5. CSS3 came up with some key web design considerations like rounded borders that help
in rounding up the borders without any hassle. This turned out to be a huge plus point for
developers who were struggling with initial versions of CSS borders.
6. CSS3 has the capability to split text sections into multiple columns so that it can be read
like a newspaper. In CSS2, the developers had difficulty because the standard was not
equipped with automatically breaking the text so that it fits within a box.

Features of CSS3
1. Advanced Animations
2. Multiple Backgrounds & Gradient
3. Multiple Column layouts
4. Opacity
5. Rounded Corner:
6. Selectors
CSS Syntax
A CSS rule set contains a selector and a declaration block.

Selector: Selector indicates the HTML element you want to style. It could be any tag like <h1>,
<title> etc.
Declaration Block: The declaration block can contain one or more declarations separated by a
semicolon. For the above example, there are two declarations:
1. color: yellow;
2. font-size: 11px;
Each declaration contains a property name and value, separated by a colon.
Property: A Property is a type of attribute of HTML element. It could be color, border etc.
Value: Values are assigned to CSS properties. In the above example, value "yellow" is assigned
to color property.
Selector {Property1: value1; Property2: value2; ..........;}
CSS Selector

✓ CSS selectors are used to select the content you want to style.
✓ Selectors are the part of CSS rule set.
✓ CSS selectors select HTML elements according to its id, class, type, attribute etc.

There are several different types of selectors in CSS.

1. CSS Element Selector

2. CSS Id Selector
3. CSS Class Selector
4. CSS Universal Selector
5. CSS Group Selector

1) CSS Element Selector

The element selector selects the HTML element by name.

Example:

<html>
<head>
<style>
p{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>

Output:

This style will be applied on every paragraph.

Me too!
And me!
2) CSS Id Selector

The id selector selects the id attribute of an HTML element to select a specific element. An id is
always unique within the page so it is chosen to select a single, unique element.
It is written with the hash character (#), followed by the id of the element.
Let us take an example with the id "para1".
<html>
<head>
<style>
#para1 {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p id="para1"> This paragraph will be affected. </p>
<p>This paragraph will not be affected. </p>
</body>
</html>
Output:
This paragraph will be affected.
This paragraph will not be affected.
3) CSS Class Selector
The class selector selects HTML elements with a specific class attribute. It is used with a period
character . (full stop symbol) followed by the class name.
Let's take an example with a class "center".
<html>
<head>
<style>
.center {
text-align: center;
color: blue; }
</style>
</head>
<body>
<h1 class="center">This heading is blue and center-aligned.</h1>
<p class="center">This paragraph is blue and center-aligned.</p>
</body>
</html>

4) CSS Universal Selector

The universal selector is used as a wildcard character. It selects all the elements on the pages.

<html>
<head>
<style>
*{
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<h2>This is heading</h2>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
Output:
This is heading
This style will be applied on every paragraph.
Me too!
And me!
5) CSS Group Selector
✓ The grouping selector is used to select all the elements with the same style definitions
✓ .Grouping selector is used to minimize the code. Commas are used to separate each
selector in grouping.
Let's see the full example of CSS group selector.
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: blue; }
</style>
</head>
<body>
<h1> This is a heading1. </h1>
<h2> This is a heading2. (In smaller font)</h2>
<p>This is a paragraph.</p>
</body>
</html>
Output:
1. This is heading1.
 2. This is a heading2. (In smaller font)
3. This is a paragraph.
Using CSS:

CSS is added to HTML pages to format the document according to information in the style sheet.
There are three ways to insert CSS in HTML documents.

1. Inline CSS
2. Internal CSS
3. External CSS

✓ Inline CSS
Inline CSS is used to apply CSS on a single line or element.
For example:
<p style="color:blue">Hello CSS</p>
✓ Internal CSS
Internal CSS is used to apply CSS on a single document or page. It can affect all the elements of
the page. It is written inside the style tag within head section of html.
For example:
<head>
<style>
p{color:blue;}
</style>
</head>
✓ External CSS
External CSS is used to apply CSS on multiple pages or all pages. Here, we write all the CSS
code in a css file. Its extension must be .css for example style.css.
For example:
p{
color:blue;
}
You need to link this style.css file to your html pages like this:
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
CSS Background Properties
CSS background property is used to define the background effects on element. There are 5 CSS
background properties that affect the HTML elements:
1. background-color
2. background-image
3. background-repeat
 4. background-attachment
5. background-position
CSS background-color
The background-color property is used to specify the background color of the element.
Syntax:
<head>
<style>
h2,p{
background-color:lighblue; }
</style>
</head>
CSS background-image
✓ The background-image property in CSS is used to set an image as the background of an
element.
✓ Using this CSS property, we can set one or more than one background image for an element.
✓ By default, the image is positioned at the top-left corner of an element and repeated both
horizontally as well as vertically.
✓ The background image should be chosen according to the text color. The bad combination of
text and background image may be a cause of poorly designed and not readable webpage.
✓ The url() value of this property allows us to include a file path to any image. It will show the
element's background.
✓ We can use multiple images or a mixture of gradients and images for the background.
Syntax:
body{
background-image: url();
background-color:lightgray; }
CSS background-repeat
By default, the background-image property repeats the background image horizontally and
vertically. Some images are repeated only horizontally (repeat-x) or vertically (repeat-y).
Syntax:
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
CSS background-attachment
The background-attachment property is used to specify if the background image is fixed or scroll
with the rest of the page in browser window. If you set fixed the background image then the
image will not move during scrolling in the browser. Let us take an example with fixed
background image.
background: white url('bbb.gif');
background-repeat: no-repeat;
background-attachment: fixed;
CSS background-position
The background-position property is used to define the initial position of the background image.
By default, the background image is placed on the top-left of the webpage.
You can set the following positions:
1. center
2. top
3. bottom
4. left
5. right
background: white url('good-morning.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
➢ Manipulating Text in CSS
You can set following text properties of an element −
1. The color property is used to set the color of a text.
Syntax:
</head>
<body>
<p style = "color:red;">
This text will be written in red.
</p>
</body>
2. The direction property is used to set the text direction.
Syntax:
<body>
<p style = "direction:rtl;">
This text will be rendered from right to left
</p>
</body>
3. The letter-spacing property is used to add or subtract space between the letters that make
up a word.
<body>
<p style = "letter-spacing:5px;">
This text is having space between letters.
</p>
</body>
4. The word-spacing property is used to add or subtract space between the words of a
sentence.
<body>
<p style = "word-spacing:5px;">
 This text is having space between words.
</p>
</body>
5. The text-indent property is used to indent the text of a paragraph.
<body>
<p style = "text-indent:1cm;">
This text will have first line indented by 1cm and this line will remain at
its actual position this is done by CSS text-indent property.
</p>
</body>
6. The text-align property is used to align the text of a document.
<body>
<p style = "text-align:right;">
This will be right aligned.
</p>
<p style = "text-align:center;">
This will be center aligned.
</p>
<p style = "text-align:left;">
This will be left aligned.
</p>
</body>
7. The text-decoration property is used to underline, overline, and strikethrough text.

<body>
<p style = "text-decoration:underline;">
This will be underlined
</p>
<p style = "text-decoration:line-through;">
This will be striked through.
</p>
<p style = "text-decoration:overline;">
This will have a over line.
</p>
<p style = "text-decoration:blink;">
This text will have blinking effect
</p>
</body>

8. The text-transform property is used to capitalize text or convert text to uppercase or

lowercase letters.
<body>
<p style = "text-transform:capitalize;">
This will be capitalized
</p>
<p style = "text-transform:uppercase;">
 This will be in uppercase
/p>
<p style = "text-transform:lowercase;">
This will be in lowercase
</p>
</body>

9. The white-space property is used to control the flow and formatting of text.
<body>
<p style = "white-space:pre;">
This text has a line break and the white-space pre setting
tells the browser to honor it just like the HTML pre tag.
</p>
</body>
10. The text-shadow property is used to set the text shadow around a text.
<body>
<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>
</body>
➢ CSS Margin
CSS Margin property is used to define the space around elements. It is completely transparent
and doesn't have any background color. It clears an area around the element.
Top, bottom, left and right margin can be changed independently using separate properties. You
can also change all properties at once by using shorthand margin property.
CSS Margin Properties
Property Description

margin This property is used to set all the properties in one declaration.
margin-left it is used to set left margin of an element.
margin-right It is used to set right margin of an element.
margin-top It is used to set top margin of an element.
margin- It is used to set bottom margin of an element.
bottom

CSS Margin Values

These are some possible values for margin property.

Value Description

auto This is used to let the browser calculate a margin.

length It is used to specify a margin pt, px, cm, etc. its default value is 0px.
% It is used to define a margin in percent of the width of containing element.
inherit It is used to inherit margin from parent element.
<html>
<head>
<style>
p{
background-color: pink;
}
p.ex {
margin-top: 50px;
margin-bottom: 50px;
margin-right: 100px;
margin-left: 100px;
}
</style>
</head>
<body>
<p>This paragraph is not displayed with specified margin. </p>
<p class="ex">This paragraph is displayed with specified margin.</p>
</body>
</html>
Margin: Shorthand Property
CSS shorthand property is used to shorten the code. It specifies all the margin properties in one
property.
There are four types to specify the margin property. You can use one of them.
1. margin: 50px 100px 150px 200px; TRBL
2. margin: 50px 100px 150px; TRLB
3. margin: 50px 100px; TBRL
4. margin 50px;
➢ CSS Fonts
CSS Font property is used to control the look of texts. By the use of CSS font property you can
change the text size, color, style and more. These are some important font properties:
1. CSS Font color: This property is used to change the color of the text. (standalone
attribute)
2. CSS Font family: This property is used to change the face of the font.
3. CSS Font size: This property is used to increase or decrease the size of the font.
4. CSS Font style: This property is used to make the font bold, italic or oblique.
5. CSS Font variant: This property creates a small-caps effect.
6. CSS Font weight: This property is used to increase or decrease the boldness and
lightness of the font.
1) CSS Font Color
CSS font color is a standalone attribute in CSS although it seems that it is a part of CSS fonts. It
is used to change the color of the text.
There are three different formats to define a color:
o By a color name
o By hexadecimal value
o By RGB
In the above example, we have defined all these formats.
<html>
<head>
<style>
body {
font-size: 100%;
}
h1 { color: red; }
h2 { color: #9000A1; }
p { color:rgb(0, 220, 98); }
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
</body>
</html>
2) CSS Font Family
CSS font family can be divided in two types:
o Generic family: It includes Serif, Sans-serif, and Monospace.
o Font family: It specifies the font family name like Arial, New Times Roman etc.
Serif: Serif fonts include small lines at the end of characters. Example of serif: Times new
roman, Georgia etc.
Sans-serif: A sans-serif font doesn't include the small lines at the end of characters. Example of
Sans-serif: Arial, Verdana etc.
<html>
<head>
<style>
body {
font-size: 100%;
}
h1 { font-family: sans-serif; }
h2 { font-family: serif; }
p { font-family: monospace; }
}
</style>
</head>
<body>
<h1>This heading is shown in sans-serif.</h1>
<h2>This heading is shown in serif.</h2>
<p>This paragraph is written in monospace.</p>
</body>
</html>
3) CSS Font Size
CSS font size property is used to change the size of the font.
These are the possible values that can be used to set the font size:
Font Size Value Description

xx-small used to display the extremely small text size.

x-small used to display the extra small text size.
small used to display small text size.
medium used to display medium text size.
large used to display large text size.
x-large used to display extra large text size.
xx-large used to display extremely large text size.
smaller used to display comparatively smaller text size.
larger used to display comparatively larger text size.
size in pixels or % used to set value in percentage or in pixels.
4) CSS Font Style
CSS Font style property defines what type of font you want to display. It may be italic, oblique,
or normal.
<html>
<head>
<style>
body {
font-size: 100%;
}
h2 { font-style: italic; }
h3 { font-style: oblique; }
h4 { font-style: normal; }
}
</style>
</head>
<body>
<h2>This heading is shown in italic font.</h2>
<h3>This heading is shown in oblique font.</h3>
<h4>This heading is shown in normal font.</h4>
</body>
</html>
5) CSS Font Variant
CSS font variant property specifies how to set font variant of an element. It may be normal and
small-caps.
<head>
<style>
p { font-variant: small-caps; }
h3 { font-variant: normal; }
</style>
</head>
<body>
<h3>This heading is shown in normal font.</h3>
<p>This paragraph is shown in small font.</p>
</body>
This heading is shown in normal font.
THIS PARAGRAPH IS SHOWN IN SMALL FONT.

6) CSS Font Weight

CSS font weight property defines the weight of the font and specify that how bold a font is. The
possible values of font weight may be normal, bold, bolder, lighter or number (100, 200..... upto
900).
CSS Padding

CSS padding property is used to define the space between the element content and the element
border.
It is different from CSS margin in the way that CSS margin defines the space around elements.
CSS padding is affected by the background colors. It clears an area around the content.
Top, bottom, left and right padding can be changed independently using separate properties. You
can also change all properties at once by using shorthand padding property.
CSS Padding Properties
Property Description

padding It is used to set all the padding properties in one declaration.

padding-left It is used to set left padding of an element.
padding-right It is used to set right padding of an element.
padding-top It is used to set top padding of an element.
padding-bottom It is used to set bottom padding of an element.
CSS Padding Values
Value Description

length It is used to define fixed padding in pt, px, em etc.

% It defines padding in % of containing element.
CSS Padding Example
<head>
<style>
p{
background-color: pink;
}
p.padding {
padding-top: 50px;
padding-right: 100px;
padding-bottom: 150px;
padding-left: 200px;
}
</style>
</head>
<body>
<p>This is a paragraph with no specified padding.</p>
<p class="padding">This is a paragraph with specified paddings.</p>
</body>
</html>

This is a paragraph with no specified padding.

This is a paragraph with specified paddings.

➢ CSS Borders
The border properties allow you to specify how the border of the box representing an element
should look. There are three properties of a border you can change −
• The border-color specifies the color of a border.
• The border-style specifies whether a border should be solid, dashed line, double line, or
one of the other possible values.
• The border-width specifies the width of a border.
✓ The border-color Property
The border-color property allows you to change the color of the border surrounding an element.
You can individually change the color of the bottom, left, top and right sides of an element's
border using the properties −
• border-bottom-color changes the color of bottom border.
• border-top-color changes the color of top border.
• border-left-color changes the color of left border.
• border-right-color changes the color of right border.
✓ The border-style Property
The border-style property allows you to select one of the following styles of border −
• none − No border. (Equivalent of border-width:0;)
• solid − Border is a single solid line.
 • dotted − Border is a series of dots.
• dashed − Border is a series of short lines.
• double − Border is two solid lines.
• groove − Border looks as though it is carved into the page.
• ridge − Border looks the opposite of groove.
• inset − Border makes the box look like it is embedded in the page.
• outset − Border makes the box look like it is coming out of the canvas.
• hidden − Same as none, except in terms of border-conflict resolution for table elements.

This is a border with none width.

This is a solid border.

This is a dahsed border.

This is a double border.

This is a groove border.

This is aridge border.

This is a inset border.

This is a outset border.

This is a hidden border.

✓ The border-width Property

The border-width property allows you to set the width of an element borders. The value of this
property could be either a length in px, pt or cm or it should be set to thin, medium or thick.
You can individually change the width of the bottom, top, left, and right borders of an element
using the following properties −
• border-bottom-width changes the width of bottom border.
• border-top-width changes the width of top border.
• border-left-width changes the width of left border.
• border-right-width changes the width of right border.
➢ CSS Boxes

The components that can be depicted on the web page consist of one or more than one
rectangular box.

A CSS box model is a compartment that includes numerous assets, such as edge, border, padding
and material. It is used to develop the design and structure of a web page. It can be used as a set
of tools to personalize the layout of different components. According to the CSS box model, the
web browser supplies each element as a square prism.

The following illustration shows the various layers in the box model:

The CSS box model contains the different properties in CSS. These are listed below.
✓ Border
✓ Margin
✓ Padding
✓ Content
✓ Margin Field
This segment consists of the area between the boundary and the edge of the border.
The proportion of the margin region is equal to the margin-box width and height. It is better to
separate the product from its neighbor nodes.
✓ Border Field
It is a region between the padding-box and the margin. Its proportions are determined by the
width and height of the boundary.
✓ Padding Field
This field requires the padding of the component. In essence, this area is the space around the
subject area and inside the border-box. The height and the width of the padding box decide its
proportions.
✓ Content Field
Material such as text, photographs, or other digital media is included in this area.
It is constrained by the information edge, and its proportions are dictated by the width and height
of the content enclosure.
The following diagram illustrates how the CSS properties
of width, height, padding, border and margin dictate that how much space an attribute will
occupy on a web page.

➢ CSS Layout: CSS positioning

CSS helps you to position your HTML element. You can put any HTML element at whatever
location you like. You can specify whether you want the element positioned relative to its natural
position in the page or absolute based on its parent element.
There are following CSS positioning:
1. CSS Static Positioning
2. CSS Fixed Positioning
3. CSS Relative Positioning
4. CSS Absolute Positioning
1) CSS Static Positioning
This is a by default position for HTML elements. It always positions an element according to the
normal flow of the page. It is not affected by the top, bottom, left and right properties.
2) CSS Fixed Positioning
The fixed positioning property helps to put the text fixed on the browser. This fixed test is
positioned relative to the browser window, and doesn't move even you scroll the window.
<style>
p.pos_fixed {
position: fixed;
top: 50px;
right: 5px;
color: blue; }
</style>
3) CSS Relative Positioning
The relative positioning property is used to set the element relative to its normal position.
h2.pos_right {
position: relative;
left: 30px;
}
4) CSS Absolute Positioning
The absolute positioning is used to position an element relative to the first parent element that
has a position other than static. If no such element is found, the containing block is HTML.
With the absolute positioning, you can place an element anywhere on a page.
<style>
h2 {
position: absolute;
left: 150px;
top: 250px;
}
</style>