PSIT-Pranveer Singh Institute of Technology

Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

UNIT 2 – CSS: CASCADING STYLE SHEET

It is used to give a stylistic, beautiful and attractive look to a webpage. It is used with HTML to provide the
webpage a stunning look and feel and can also be used with XML documents.

1. REQUIREMENT OF CSS
HTML itself is not able to give style to the website elements. CSS extends HTML capabilities and provides many
properties to give the required style to the website. Here are some of the key advantages of learning CSS:

a) Create Beautiful Websites: Behind every stunning website, there is a CSS Style Sheet. It handles the
look and feel of a website. The beautiful designs and the attractive features of CSS make it worthy of
your time. It is a must-have skill of a web designer.
b) Solve Big Problems: Before CSS, all attributes like color, element alignments, border, and size had to
be repeated on every web page to style any element. It was a very long process. For example: If you are
developing a large website where fonts and color information has to be added on every single page, it
will become a long and expensive process. CSS was created to solve this problem. It was a W3C
recommendation.
c) Presentation capabilities: CSS provides powerful control over the presentation of an HTML document.
It is related to the previous point as CSS gets combined with markup languages like HTML to enhance
their capabilities and to provide better control to the user of the website.
d) Increase your skills: HTML and CSS are the most basic languages which a web designer should learn
as it opens the door to various other technologies like JavaScript, Angular, PHP, etc. These technologies
become easier to understand, once a person gets exposed to CSS and HTML.
e) Better styling capabilities: It has a much wider variety of attributes as compared to HTML which has a
limited set of attributes with limited capabilities.

2. APPLICATIONS OF CSS

a) CSS saves time: It saves a lot of time as only one Style Sheet can be used on multiple pages, there is no
need to write same code in all the pages. A single file can be used in all those pages where same styling
of webpages is required. This also decreases the page loading time as file transfer size gets reduced
because of reusing of code.
b) Multiple Device Compatibility: CSS can optimize the same webpage to adapt different
viewports(screens). It makes a webpage compatible and readable in all the devices like laptops, tablets,
mobiles, etc. which have different screen sizes.
c) Improves HTML Functionality: CSS has a large number of attributes as compared to Html which
only provides a limited number of styling attributes.
d) Pages load faster: When we use the same Style Sheet in multiple webpages then, loading of the pages
gets faster because of reusing of the code.
e) Responsive layout: It can optimize a webpage to fit varies screen sizes very easily. Different devices
have different screen sizes and CSS features allows the programmer to make their website responsive
to these devices. The responsive nature of CSS makes a webpage compatible and readable in different
screen sizes with ease.
f) Global web standards: The web standards are now depreciating the use of HTML attributes and it is
being recommended to use CSS.

Department of Computer Science & Engineering

 PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

Explanation-

In the example above the <style> tag is used to add CSS code within the webpage. The selectors for a particular
tag are used to stylize it. For example, h1 { } and p { } selectors are used in the example. Let’s see the attribute
used inside them:

• Color: Used to specify the text color of the heading and the paragraph.
• Background-color: Used to define the background color of the heading.
• Padding: Specified the padding.

Department of Computer Science & Engineering

 PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

3. CSS SYNTAX
A CSS rule-set consists of a selector and a declaration block:

Selector: A Selector is any HTML element we want to style, like <p>, <div> etc.
Declaration Block: This block contains the different properties and their values which we want to change in the
selector element. Example: -

a) color:yellow;
b) font-face:arial;

Property: A Property is kind of a quality of any HTML element like color, border, font-size etc. which will
change the appearance and style of it.
Value: Every CSS property has a value which will give different results for a particular property. In the above
example, value yellow is assigned to color property.

Department of Computer Science & Engineering

 PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

4. INCORPORATING CSS
It is an important feature of CSS that it can be added by various ways in a webpage.

There are three ways of inserting a style sheet:

Use Description

Inline CSS Using the style attribute in the HTML start tag.

Embedded CSS Using the style Using the <style> tag within the code of the webpage.

External CSS Using the <link> tag to link an external CSS file in the webpage.

4.1. INLINE CSS

Inline CSS is used to apply CSS directly on a single element. It can apply the unique style by putting the CSS
directly into the start tag of a particular element. The style attribute is used to give inline CSS.

4.2. EMBEDDED CSS

It is used when we want to give styling to the whole webpage at once. Its scope is limited to the only webpage it
is written in. Although it can be written anywhere in the page within <style> tag but is preferred within head
section of html.

Department of Computer Science & Engineering

 PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

4.3. EXTERNAL CSS

In External CSS, the styling information is written in a separate CSS file which gets linked to a webpage by
using <link> tag. A same CSS file can be added to many webpages to style the elements. The <link> element goes
inside the <head> section:

Department of Computer Science & Engineering

 PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

5. CSS SELECTORS
CSS selectors are used to select any element and then apply CSS on it. These selectors are very useful in writing
a clean and effective code.

CSS Selectors are used in internal and external CSS. Although inline CSS is also an option but it is never
recommended to use. There are various types of selector through which you can select an element. These selectors
can be combined together to select a more specific element also.

A CSS Selector can select an element by its id, class, type, attribute, tag, etc.

Some popular CSS Selectors are:

• CSS Tag/Element Selector

• CSS Id Selector
• CSS Class Selector
• CSS Group Selector
• CSS Universal Selector
• CSS Descendant Selector

5.1. CSS TAG/ELEMENT SELECTOR

The Tag/Element selector is used to select a element based on its tag name. Any tag name in HTML can be used
as a Tag Selector. When you use a simple tag selector and give it some style, then all over the webpage that tag's
content will use the same CSS style.

Let's look at the syntax of using a Tag Selector:

Syntax

tag-selector{
CSS Styling
}

Example-
p{
color:red;
}

Explanation: In the syntax example, we have used the <p> tag as a tag selector. Now all the paragraphs in the
webpage will have red text color. Remember that tags < > will be omitted when using tag selectors. Only tag
name will be used.

Department of Computer Science & Engineering

 PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

5.2. CSS ID SELECTOR

CSS ID selector is used to select a particular element with a specific ID associated with it. An ID of an element
is unique in itself, no two elements can have same ID. It makes it easy to select a particular element and give it a
proper CSS Styling.

5.2.1. DEFINING AN ID IN CSS

To define an ID of an element just use the id attribute. You can write anything as an ID but it should start with
an alphabet or an underscore (_).

Syntax

<p id="demo-id">The ID of this paragraph is 'demo_id'.</p>

Note: When using ID Selectors, the hash(#) symbol is used in front of ID name.

Syntax of using ID Selector:

Syntax

#ID_Name{
CSS Styling
}

Example-
#demo-id{
color:red;
}

Explanation: In the example above, the ID #demo-id is used as a selector. Now, wherever this ID is applied,
whether in a paragraph, heading, div, or anything, the text color will be red inside that element.

Department of Computer Science & Engineering

 PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

5.3. CSS CLASS SELECTOR

CSS Class selector works similar to CSS ID selector but with a slight difference. An ID is unique to the element
whereas a class can be common to multiple elements. It gives freedom from writing the same CSS multiple times
for different elements. If the CSS Style definition is same then just add a common class to the elements and only
define CSS for that particular class. It will be applied to all the elements with that class.

5.3.1. DEFINING A CLASS IN CSS

To define a class for an element, just use the class attribute. You can write anything as an class name but it should
start with an alphabet or an underscore(_).

Syntax

<p> class="demo-class">The class of this paragraph is 'demo-class'.</p>

<p> class="demo-class">This is 2nd paragraph with same class.</p>
<p> class="demo-class">This is 3rd paragraph with same class.</p>

Note: When using Class Selector, the dot(.) symbol is used in front of class name.

Syntax of using Class Selector:

Syntax

.Class_Name{
Css Styling
}

Example-
.demo-class{
color:red;
}

Explanation: Any element which will use the demo-class as class name will display text color as red. It can be
applied to more than one elements.

Department of Computer Science & Engineering

 PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

5.4. CSS DOT(.) SELECTOR

If you want to style only one specific HTML element with a common class name then you can use the dot(.)
selector. Suppose there is one paragraph and one heading tag of same class, but you want to stylize only the
paragraph, then you should combine the tag name with class name by using dot(.) selector. In this way, only the
paragraph will get affected by the CSS and not the Heading.

Syntax

tag.class-name{
Css Styling
}

Example-
p.demo-class{
color:red;
}

Department of Computer Science & Engineering

 PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

5.5. CSS GROUPING(,) SELECTOR

The grouping selector is a very handy selector in case of same CSS Styling for different elements. It minimizes
the code.

Suppose, there is a div, a heading and a paragraph and in all of these we want the font color to be red. Instead of
declaring same color property 3 times for all 3 elements we can just declare it once using a comma(,).

It is not limited to tags only, multiple tags, IDs, or Classes can be given similar CSS by using the comma(,).

Syntax

p, h2, div{
color:red;
}

p, .demo-class, h2{
color:red;
}

Explanation: Notice in the above example, how the comma is used to create a grouping selector. We have also
combined the tags with a class. Now, all the paragraphs, h2 headings, div or elements with. demo-class will display
red color font.

Department of Computer Science & Engineering

 PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

5.6. CSS UNIVERSAL SELECTOR

The universal selector is used to select and style all the elements in the webpage. It is generally used to override
default padding and margins on a webpage. Universal Selector is represented by the asterisk(*) symbol.

Syntax

*{
Css Styling
}

Example-
*{
margin:0;
padding:0;
}

Department of Computer Science & Engineering

 PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

6. CSS BACKGROUND PROPERTIES

CSS background property provide styling to the background of the HTML elements. Some properties are:

a. background-color
b. background-image
c. background-repeat
d. background-attachment
e. background-position

Background color
The background-color property specifies the background color of an element.

Department of Computer Science & Engineering

 PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

Background Image
The background-image property sets an image in the background of an element.

Department of Computer Science & Engineering

 PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

7. CSS FONTS PROPERTIES

CSS Font property is used to make your fonts attractive and pleasing to the eyes. You can use different fonts for
your headings, paragraphs, and word emphasizing.

CSS Font property is way smarter than HTML Font Tag. HTML font Tag was used till HTML 4, but in HTML
5, it was deprecated. You can no longer use it, but it was an inferior option compared to the CSS Font property.

CSS Fonts has multiple options to give style to the fonts. You can alter the color, size, weight, and family of the
fonts. You can assign various font families at once as a replacement if one is not supported. Let's look at multiple
CSS Font properties and their uses:

Values Description

Font family Assign font-families to the text.

Font color It assigns the color of the text.

Font style It makes the font bold, italic or oblique.

Font variant It creates a small-caps effect.

Font size It assigns the size of the font.

Font weight It controls the thickness of the font.

7.1. CSS FONT FAMILY

Font Families are a set of different fonts with a similar design. These fonts under one family differ in size, weight,
and style, but the characters' basic design would be the same. For example - Arial is a Font family with fonts Arial
regular, Arial Bold, Arial Italic, etc.

CSS Font family property let us assign multiple font families at once. It doesn't mean that all families will be
loaded and used together. Instead, the second one will be used if the browser does not support the first font, and
the third one will be used if the second font is not supported. It works in a particular order of priority.

Department of Computer Science & Engineering

 PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

7.2. CSS FONT COLOR

Fonts' color is very important for the look and feel of the website. You can give colors to hyperlinks, to highlight
them. Headings can be colored in a different color than regular paragraph text.

To change the color of a particular section of the website like paragraph and headings, Class, ID, and tag selectors
will always help.

Different methods to specify the Font Color

There are three methods to give color to the font:

• Use Color Name: Green, Blue, Red

• Use Hex code for colors: #ffffff (White), #000000 (Black).
• Use RGB Values: rgb(red, green, blue). (128, 0, 0) Maroon, (165,42,42) Brown.

Department of Computer Science & Engineering

 PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

7.3. CSS FONT SIZE

CSS font-size property is used to specify size of the font. The default size is 16px. Font size can be given in
pixels, em(1em=16px), or in percentage value. There are also some other predefined values given below:

CSS Font Properties

Font Size Values Description

x-small It displays extra small text.

xx-small It displays extremely small text.

small It displays small text.

smaller It displays comparatively smaller text.

medium It displays medium text size.

large It displays large text size.

x-large It displays extra-large text size.

xx-large It displays extremely large text size.

larger It displays comparatively larger text size.

Size in pixels or % It sets the value in percentage and pixels.

Department of Computer Science & Engineering

 PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

CSS FONT STYLE

Font Styles property in CSS is used to make the font italic. The Italic font is slightly tilted towards the right.

Font style property has three values. One is normal and the other two are slightly different versions of italic:

• font-style: normal;
• font-style: italic;
• font-style: oblique;

CSS Font Variant

Font variant property is fun. It changes the font into small caps. In Small-caps font, all the lowercase alphabets
are changed to uppercase, but their size doesn't change. It means that the changed uppercase alphabets are
displayed in the size of lowercase alphabets.

There are two values of font-variant property:

• font-variant: normal;
• font-variant: small-caps;

Department of Computer Science & Engineering

 PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

CSS Font Weight

CSS font-weight property defines the weight of the font, i.e., how thick a font is. It is used to emphasize a
particular piece of text or in headings.

Font-weight can be applied either by using specific text values or by numbers:

• font-weight: normal;
• font-weight: lighter;
• font-weight: bold;
• font-weight: 500;

Department of Computer Science & Engineering

 PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

Department of Computer Science & Engineering

 PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

8. CSS LINK STYLING

The default color of links is blue but in CSS you can change the color of the links.

Links can be styled with any CSS property (e.g. color, font-family, background, etc.). Links can be styled
differently depending on what state they are in.

Some link states are:

Types Description

a:link Normal, unvisited link

a:visited Visited link

a:hover When the user mouse gets over it.

a:active The moment when a link is clicked.

Department of Computer Science & Engineering

 PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

Department of Computer Science & Engineering

 PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

Link Text Decoration

The text-decoration property is used to remove underlines from links:

Department of Computer Science & Engineering

 PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

9. CSS TABLES
The CSS can also be applied to HTML tables. Below are some properties which can make an ordinary looking
table into an attractive one:

CSS Table Properties

• border
• border-collapse
• padding
• width
• text-align
• color
• background color

9.1. CSS Table Border

Table borders can be set for the table, th and td tags using the border property.

Department of Computer Science & Engineering

 PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

9.2. Table Border Collapse

By default, the borders are displayed as a thick one with double borders. The border-collapse property specify that
the borders should be collapsed into a single border.

Department of Computer Science & Engineering

 PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

9.3. Table Padding

Padding creates space between the border and the cells of the table. Table padding is not a special padding for
tables it's the normal CSS padding that is used in the table example below.

Department of Computer Science & Engineering

 PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

9.4. Table Width and Height

As the name suggests, width and height of a table are defined by the width and height properties.

Department of Computer Science & Engineering

 PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

10. CSS BOX MODEL

A CSS Box Model is the most important concept in designing websites. It is a combination of different CSS
properties, that together form a box, hence, a box model.

According to the CSS box model, a browser engine represents every element in HTML as a box. This box is a
combination of the element's content, padding, margins and borders.

Let's try to understand the image below:

In the image above, the content is wrapped with padding. This padding area is then wrapped with borders and
then, outside the borders, there is margin. All these properties take space around the content, affecting the other
elements outside the box.

Changes in Content, padding and borders affects the size of the container, even when its size is fixed. The margins
on the other hand, clears the outside space for the container. All these properties together create a CSS Box.

Department of Computer Science & Engineering