CSS PROPERTIES

Agenda

1 Types of CSS

2 Types of Selectors

3 CSS Color

4 CSS Background

5 CSS Text and Font

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
 Types of CSS

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Types of CSS

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

○ Inline CSS
○ Internal CSS
○ External CSS
● Priority order
○ Inline > Internal > External

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution 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
● 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>

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution 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
● Example:

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

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution 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
● 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
}
Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
 Types of Selectors

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Selectors
● Selector are used target elements and apply CSS
● Five simple selectors
○ Element Selector
○ Id Selector
○ Class Selector
○ Group Selector
○ Universal Selector
● Priority of Selectors
Id > Class > Element

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Element selector
● Used to select HTML elements by its name
● How do we do it ?

h1
{
color: red;
}

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

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
ID selector
● Id attribute is used to select HTML element
● Used to target specific or unique element
● How we do it

#unique
{
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

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
class selector
● Class attribute is used to select HTML element
● Used to target specific class of element
● How we do it

.group
{
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

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
 CSS Color

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution 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
 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

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
 CSS Background

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution 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.

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

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
CSS Background (Cont.)
<style>
body {
background: url(images/download.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
}
</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>

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
 CSS Text and Font

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution 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.

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

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution 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.
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

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution 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:
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.

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution 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; }
</style>

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>

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
 Thank You

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited