ajayyadavmamidi@gmail.

com
2VEQLUM5K4

CSS PROPERTIES

This file is meant for personal use by ajayyadavmamidi@gmail.com only.

Sharing or publishing the contents in part or full is liable for legal action.
 Agenda

1 Types of CSS

2 Types of Selectors
ajayyadavmamidi@gmail.com
2VEQLUM5K4

3 CSS Color

4 CSS Background

5 CSS Text and Font

This file is meant for personal use by ajayyadavmamidi@gmail.com only.

Proprietary
Sharing content. ©Great
or publishing the Learning.
contentsAllinRights Reserved.
part or Unauthorized
full is liable use
for legal or distribution prohibited
action.
ajayyadavmamidi@gmail.com
2VEQLUM5K4
Types of CSS

This file is meant for personal use by ajayyadavmamidi@gmail.com only.

Proprietary
Sharingcontent. ©Great Learning.
or publishing All Rights
the contents inReserved. Unauthorized
part or full uselegal
is liable for or distribution
action. prohibited
 Types of CSS

● There are 3 ways to write CSS in our HTML file.

○ Inline CSS
○ Internal CSS
○ External CSS
ajayyadavmamidi@gmail.com
2VEQLUM5K4

● Priority order
○ Inline > Internal > External

This file is meant for personal use by ajayyadavmamidi@gmail.com only.

Proprietary
Sharingcontent. ©Great Learning.
or publishing All Rights
the contents inReserved. Unauthorized
part or full uselegal
is liable for or distribution
action. prohibited
 Inline CSS

● Before Css this was the only way to apply styles

● Not an efficient way to write as it has lot a redundancy
● Self contained
● Uniquely applied on each element
ajayyadavmamidi@gmail.com
2VEQLUM5K4

● Idea of separation of concerns was lost

● Example:

<h3 style=” color:red”> Have a great day </h3>

<p style =” color: green”> I did this , I did that </p>

This file is meant for personal use by ajayyadavmamidi@gmail.com only.

Proprietary
Sharingcontent. ©Great Learning.
or publishing All Rights
the contents inReserved. Unauthorized
part or full uselegal
is liable for or distribution
action. prohibited
 Internal CSS
● With the help of style tag we can apply styles within the HTML file
● Redundancy is removed
● But idea of separation of concerns still lost
● Uniquely applied on single document
ajayyadavmamidi@gmail.com
2VEQLUM5K4
● Example:

< style>
h1{
color:red;
}
</style>
<h3> Have a great day </h3>

This file is meant for personal use by ajayyadavmamidi@gmail.com only.

Proprietary
Sharingcontent. ©Great Learning.
or publishing All Rights
the contents inReserved. Unauthorized
part or full uselegal
is liable for or distribution
action. prohibited
 External CSS
● With the help of <link> tag in head tag we can apply styles
● Reference is added
● File saved with .css extension
● Redundancy is removed
ajayyadavmamidi@gmail.com
2VEQLUM5K4 ● Idea of separation of concerns is maintained
● Uniquely applied on each document
● Example:

<link rel="stylesheet" type="text/css" href="">

h1{
color:red; //.css file
}
This file is meant for personal use by ajayyadavmamidi@gmail.com only.
Proprietary
Sharingcontent. ©Great Learning.
or publishing All Rights
the contents inReserved. Unauthorized
part or full uselegal
is liable for or distribution
action. prohibited
ajayyadavmamidi@gmail.com
2VEQLUM5K4
Types of Selectors

This file is meant for personal use by ajayyadavmamidi@gmail.com only.

Proprietary
Sharingcontent. ©Great Learning.
or publishing All Rights
the contents inReserved. Unauthorized
part or full uselegal
is liable for or distribution
action. prohibited
 Selectors
● Selector are used target elements and apply CSS
● Five simple selectors
○ Element Selector

ajayyadavmamidi@gmail.com
○ Id Selector
2VEQLUM5K4
○ Class Selector
○ Group Selector
○ Universal Selector
● Priority of Selectors
Id > Class > Element

This file is meant for personal use by ajayyadavmamidi@gmail.com only.

Proprietary
Sharingcontent. ©Great Learning.
or publishing All Rights
the contents inReserved. Unauthorized
part or full uselegal
is liable for or distribution
action. prohibited
 Element selector
● Used to select HTML elements by its name
● How do we do it ?

h1
{
ajayyadavmamidi@gmail.com color: red;
2VEQLUM5K4
}

We selected the heading tag and then changed the color property i.e text color to red. Now whatever is
written in this tag (content) will have the text color as red

This file is meant for personal use by ajayyadavmamidi@gmail.com only.

Proprietary
Sharingcontent. ©Great Learning.
or publishing All Rights
the contents inReserved. Unauthorized
part or full uselegal
is liable for or distribution
action. prohibited
 ID selector
● Id attribute is used to select HTML element
● Used to target specific or unique element
● How we do it

#unique
ajayyadavmamidi@gmail.com {
2VEQLUM5K4
Color: red;
}
<h1 id=”unique”> Hi </p>

We selected id and then changed the color property i.e text color to red. Now whatever is written in
this tag (content) will have the text color as red

This file is meant for personal use by ajayyadavmamidi@gmail.com only.

Proprietary
Sharingcontent. ©Great Learning.
or publishing All Rights
the contents inReserved. Unauthorized
part or full uselegal
is liable for or distribution
action. prohibited
 class selector
● Class attribute is used to select HTML element
● Used to target specific class of element
● How we do it

.group
ajayyadavmamidi@gmail.com {
2VEQLUM5K4
Color: red;
}
<h1 class=”group”> Hi </p>

We selected class and then changed the color property i.e text color to red. Now whatever is written in
this tag (content) will have the text color as red

This file is meant for personal use by ajayyadavmamidi@gmail.com only.

Proprietary
Sharingcontent. ©Great Learning.
or publishing All Rights
the contents inReserved. Unauthorized
part or full uselegal
is liable for or distribution
action. prohibited
ajayyadavmamidi@gmail.com
2VEQLUM5K4
CSS Color

This file is meant for personal use by ajayyadavmamidi@gmail.com only.

Proprietary
Sharingcontent. ©Great Learning.
or publishing All Rights
the contents inReserved. Unauthorized
part or full uselegal
is liable for or distribution
action. prohibited
 CSS Color
● There are different coloring schemes in CSS.

● 2 widely used techniques are as follows :-

○ RGB
 This starts with rgb and takes 3 parameter
ajayyadavmamidi@gmail.com
2VEQLUM5K4  3 parameter basically corresponds to red, green and blue
 Value of each parameter may vary from 0 to 255.
 Eg: rgb(255,0,0); means color red

○ HEX
 Hex code starts with # and comprises of 6 numbers which is further divided into 3 sets
 Sets basically corresponds to Red, Green and Blue
 A single set value can vary from 00 to ff
 Eg: #ff0000 ; means color red

This file is meant for personal use by ajayyadavmamidi@gmail.com only.

Proprietary
Sharingcontent. ©Great Learning.
or publishing All Rights
the contents inReserved. Unauthorized
part or full uselegal
is liable for or distribution
action. prohibited
ajayyadavmamidi@gmail.com
2VEQLUM5K4
CSS Background

This file is meant for personal use by ajayyadavmamidi@gmail.com only.

Proprietary
Sharingcontent. ©Great Learning.
or publishing All Rights
the contents inReserved. Unauthorized
part or full uselegal
is liable for or distribution
action. prohibited
 CSS Background

● Background-image
The background-image property is used to set an image as a background of an element. By default the
image covers the entire element.
ajayyadavmamidi@gmail.com
2VEQLUM5K4 ● Background-repeat
By default, the background-image property repeats the background image horizontally and vertically.
Some images are repeated only horizontally or vertically.

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

This file is meant for personal use by ajayyadavmamidi@gmail.com only.

Proprietary
Sharingcontent. ©Great Learning.
or publishing All Rights
the contents inReserved. Unauthorized
part or full uselegal
is liable for or distribution
action. prohibited
 CSS Background (Cont.)
<style>
body {
background: url(images/download.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
2VEQLUM5K4 background-size: cover;
ajayyadavmamidi@gmail.com

}
</style>
</head>
<body>
<p>This is a fixed background-image. Add more lines and content. Scroll down the page.</p>
<p>This is a fixed background-image. Add more lines and content. Scroll down the page.</p>
<p>This is a fixed background-image. </p>
<p>This is a fixed background-image. <p>
<p>If you do not see any scrollbars, Resize the browser window.</p>

This file is meant for personal use by ajayyadavmamidi@gmail.com only.

Proprietary
Sharingcontent. ©Great Learning.
or publishing All Rights
the contents inReserved. Unauthorized
part or full uselegal
is liable for or distribution
action. prohibited
ajayyadavmamidi@gmail.com
2VEQLUM5K4
CSS Text and Font

This file is meant for personal use by ajayyadavmamidi@gmail.com only.

Proprietary
Sharingcontent. ©Great Learning.
or publishing All Rights
the contents inReserved. Unauthorized
part or full uselegal
is liable for or distribution
action. prohibited
 CSS Text and Font

Text Color
The color property is used to set the color of the text.

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.
ajayyadavmamidi@gmail.com
2VEQLUM5K4

Text Decoration
The text-decoration property is used to set or remove decorations from text.
The value text-decoration: none; is often used to remove underlines from links.

Text Transformation
The text-transform property is used to specify uppercase and lowercase letters in a text

This file is meant for personal use by ajayyadavmamidi@gmail.com only.

Proprietary
Sharingcontent. ©Great Learning.
or publishing All Rights
the contents inReserved. Unauthorized
part or full uselegal
is liable for or distribution
action. prohibited
 CSS Text and Font
CSS Font property is used to control the look of texts
The font-style property is mostly used to specify italic text.

CSS Font color: This property is used to change the color of the text. (standalone attribute)
CSS Font family: This property is used to change the face of the font.
CSS Font size: This property is used to increase or decrease the size of the font.
ajayyadavmamidi@gmail.com
2VEQLUM5K4
CSS Font style: This property is used to make the font bold, italic or oblique.
CSS Font variant: This property creates a small-caps effect.
CSS Font weight: This property is used to increase or decrease the boldness and lightness of the font

This file is meant for personal use by ajayyadavmamidi@gmail.com only.

Proprietary
Sharingcontent. ©Great Learning.
or publishing All Rights
the contents inReserved. Unauthorized
part or full uselegal
is liable for or distribution
action. prohibited
 CSS Text and Font

Font Family:
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

Font Style:
ajayyadavmamidi@gmail.com
2VEQLUM5K4
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)

Font Size:
The font-size property sets the size of the text. pixel/16 = 1 em.

This file is meant for personal use by ajayyadavmamidi@gmail.com only.

Proprietary
Sharingcontent. ©Great Learning.
or publishing All Rights
the contents inReserved. Unauthorized
part or full uselegal
is liable for or distribution
action. prohibited
 CSS Text and Font
CSS Font Variant:
CSS font variant property specifies how to set font variant of an element. It may be normal and small-caps.

Code for the editor:

<style>
p { font-variant: small-caps; }
h3 { font-variant: normal; }
ajayyadavmamidi@gmail.com
</style>
2VEQLUM5K4

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

Code for the editor:

<p style="font-weight:bold;">This font is bold.</p>
<p style="font-weight:bolder;">This font is bolder.</p>
<p style="font-weight:lighter;">This font is lighter.</p>
This file is meant for personal use by ajayyadavmamidi@gmail.com only.
Proprietary
Sharingcontent. ©Great Learning.
or publishing All Rights
the contents inReserved. Unauthorized
part or full uselegal
is liable for or distribution
action. prohibited
ajayyadavmamidi@gmail.com
2VEQLUM5K4
Thank You

This file is meant for personal use by ajayyadavmamidi@gmail.com only.

Proprietary content.
Sharing or©Great Learning.
publishing the All Rights Reserved.
contents in part orUnauthorized
full is liableuse
fororlegal
distribution
action.prohibited