Scribd
Upload
79 views28 pages

Fed CSS

This document provides an overview of CSS (Cascading Style Sheets), detailing its definition, history, and various methods of writing CSS, including inline, internal, and external styles. It covers CSS selectors, properties such as color and background, and the importance of comments in code. Additionally, it discusses different CSS editors and the basic structure of CSS rules.

Uploaded by

balambigai2004
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
79 views28 pages

Fed CSS

This document provides an overview of CSS (Cascading Style Sheets), detailing its definition, history, and various methods of writing CSS, including inline, internal, and external styles. It covers CSS selectors, properties such as color and background, and the importance of comments in code. Additionally, it discusses different CSS editors and the basic structure of CSS rules.

Uploaded by

balambigai2004
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 28

Front End Development-CSS

[email protected]
28CFBOWJEN

Proprietary
This filecontent. © Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited.
by [email protected] only.
Sharing or publishing the contents in part or full is liable for legal action.
Table of Content
● What is CSS
● History of CSS
● CSS Editors
● CSS Basic Structure
28CFBOWJEN ● CSS Comments
[email protected]

● Different ways to write CSS


● CSS Selectors
● Color Property
● Background Property
● Border Property
● Box Model
Proprietary
This filecontent. © Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited.
by [email protected] only.
Sharing or publishing the contents in part or full is liable for legal action.
What is CSS

● CSS stands for Cascading Style Sheets


● If HTML is the structure of the house then CSS is the look and feel of the house
● It’s the language to make our web pages presentable
[email protected]
● Designed to make style sheets for web
28CFBOWJEN

● Now let’s try to break the acronym:


Cascading: Falling of Styles
Style: Adding designs/Styling our HTML tags
Sheets: Writing our style in different documents

Proprietary
This filecontent. © Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited.
by [email protected] only.
Sharing or publishing the contents in part or full is liable for legal action.
History

● 1994 : First Proposed by Hakon Wium Lie on 10th October


● 1996: CSS was published on 17th November with influencer Bert Bos
● Later he became co-author of CSS
● 1996 : CSS became official with CSS was published in December
[email protected]
28CFBOWJEN
● 1997 : Created CSS level 2 on 4th November
● 1998: Published on 12th May

Proprietary
This filecontent. © Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited.
by [email protected] only.
Sharing or publishing the contents in part or full is liable for legal action.
CSS Editors
● Atom
● Brackets
● Espresso(Mac user)
● Notepad++(Great for HTML & CSS)
[email protected]
28CFBOWJEN ● Komodo Edit (Simple)
● Sublime Text

Proprietary
This filecontent. © Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited.
by [email protected] only.
Sharing or publishing the contents in part or full is liable for legal action.
Basic Structure
Selector {
Property1 : value;
Property2 : value;
Property3 : value;
}
[email protected]
28CFBOWJEN

● Selector: selects the element you want to target


● There are few basic selectors like tags, id’s, and classes
● All forms this key - value pair
● Keys : properties(attributes) like color, font-size, background, width, height,etc
● Value : values associated with these properties
● Always remains same whether we apply internal or external styling

Proprietary
This filecontent. © Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited.
by [email protected] only.
Sharing or publishing the contents in part or full is liable for legal action.
Comments

● Comments don’t render on the browser


● Helps to understand our code better and makes it readable.
● Helps to debugging our code
● Two ways to comment:
[email protected]
28CFBOWJEN
○ Single line
○ Multiple line

Proprietary
This filecontent. © Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited.
by [email protected] only.
Sharing or publishing the contents in part or full is liable for legal action.
Different ways to Write CSS

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


○ Inline Css
○ Internal Css
[email protected]
28CFBOWJEN
○ External Css
● Priority order
○ Inline > Internal > External

Proprietary
This filecontent. © Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited.
by [email protected] only.
Sharing or publishing the contents in part or full is liable for legal action.
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
[email protected]
28CFBOWJEN
● Example:

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

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

Proprietary
This filecontent. © Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited.
by [email protected] only.
Sharing or publishing the contents in part or full is liable for legal action.
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:
[email protected]
28CFBOWJEN

< style>
h1{
color:red;
}
</style>
<h3> Have a great day </h3>
Proprietary
This filecontent. © Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited.
by [email protected] only.
Sharing or publishing the contents in part or full is liable for legal action.
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
[email protected]
28CFBOWJEN
● Uniquely applied on each document
● Example:
<link rel="stylesheet" type="text/css" href="">

h1{
color:red; //.css file
}
Proprietary
This filecontent. © Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited.
by [email protected] only.
Sharing or publishing the contents in part or full is liable for legal action.
CSS Selectors

● Selector are used target elements and apply Css


● Three simple selectors
○ Element Selector
○ Id Selector
[email protected] ○ Class Selector
28CFBOWJEN

● Priority of Selectors
Id > Class>Element

Proprietary
This filecontent. © Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited.
by [email protected] only.
Sharing or publishing the contents in part or full is liable for legal action.
Element Selector
● Used to select HTML elements by its name
● How we do it

h1
[email protected]
28CFBOWJEN
{
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
This filecontent. © Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited.
by [email protected] only.
Sharing or publishing the contents in part or full is liable for legal action.
ID Selector
● Id attribute is used to select HTML element
● Used to target specific or unique element
● How we do it

[email protected] #unique
28CFBOWJEN
{
Color: red;
}
<p 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.
This file is meant for personal use by [email protected] only.
Sharing or publishing the contents in part or full is liable for legal action.
Class Selector
● Class attribute is used to select HTML element
● Used to target specific class of element
● How we do it

[email protected] .group
28CFBOWJEN
{
Color: red;
}
<p 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.
This file is meant for personal use by [email protected] only.
Sharing or publishing the contents in part or full is liable for legal action.
Universal Selector
● Wild card character
● Used to target specific all the elements
● How we do it

*
[email protected]
28CFBOWJEN
{
Color: red;
}
<h1> Hi </h1>
<p> Bye </p>

We selected all the elements then change the color property i.e text
color to red. Now whatever is written in all the tags (content) will have
the text color Proprietary
as red content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
This file is meant for personal use by [email protected] only.
Sharing or publishing the contents in part or full is liable for legal action.
Group Selector
● Group selector minimizes code
● Used to target specific group of elements
● How we do it
h1,p {
color: red;
[email protected]
28CFBOWJEN
}
<h1> Hi </h1>
<p> Bye </p>

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

Proprietary
This filecontent. © Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited.
by [email protected] only.
Sharing or publishing the contents in part or full is liable for legal action.
Descendant Combinator Selector

● Combine two or more selectors


● How we do it
<div id="out">
<div class="in“>Hi </div>
[email protected]
28CFBOWJEN </div>
We selected class inside id then changed the color property i.e text
color to red. Now whatever is written (content) will have the text color
as red

#out .in {
color: red;
}
Proprietary
This filecontent. © Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited.
by [email protected] only.
Sharing or publishing the contents in part or full is liable for legal action.
Child Combinator Selector

● Combine two or more selectors like Descendant


● It only targets immediate child.
● How we do it
<div id="out">
[email protected]
28CFBOWJEN <div class="in“>Hi </div>
</div>
We selected class inside id then changed the color property i.e text
color to red. Now whatever is written (content) will have the text color
as red

#out > .in {


color: red;
Proprietary
This filecontent. © Greatfor
is meant Learning. }All Rights
personal useReserved. Unauthorized use or distribution prohibited.
by [email protected] only.
Sharing or publishing the contents in part or full is liable for legal action.
Pseudo-class Selector

● Used to target state of element


● How we do it

[email protected] p : hover
28CFBOWJEN
{
Color: red;
}
<p> Hi </p>

We selected element 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.
This file is meant for personal use by [email protected] only.
Sharing or publishing the contents in part or full is liable for legal action.
CSS Color
● There are different colouring schemes in CSS
● 2 widely used techniques are as follows
○ RGB
■ This starts with rgb and takes 3 parameter
[email protected] ■ 3 parameter basically corresponds to red, green and
28CFBOWJEN 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
■ file
Proprietary
This Eg:
content.
#ff0000
© Greatfor
is meant Learning.
;Allmeans
personal Rights
color
useReserved. red
Unauthorized use or distribution prohibited.
by [email protected] only.
Sharing or publishing the contents in part or full is liable for legal action.
CSS Background
● There are different ways by which CSS can have effect on HTML
elements
● Few of them are as follows:
○ Color - used to set the color of the background
[email protected] ○ Repeat - used to determine if image has to repeat or not
28CFBOWJEN
and if it is repeating then how it should do that
○ Image - used to set image as the background
○ Position - used to determine the position of the image
○ Attachment - It basically helps in controlling the
mechanism of scrolling

Proprietary
This filecontent. © Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited.
by [email protected] only.
Sharing or publishing the contents in part or full is liable for legal action.
CSS Background Demo
html{
background: #ff9900;
}

p{
[email protected]
28CFBOWJEN
background: url("https://encrypted-
tbn0.gstatic.com/images?q=tbn%3AANd9GcRT8t-o6oUJ-
E9YRhimOvTU2TSH7vlBnRWBN554_rX30dZah466&usqp=CAU");

background-position: left;
background-repeat: no-repeat;
background-attachment: fixed;
} Proprietary content. © Greatfor
Learning. All Rights
This file is meant personal useReserved. Unauthorized use or distribution prohibited.
by [email protected] only.
Sharing or publishing the contents in part or full is liable for legal action.
CSS Border
● Helps in setting up the border for HTML elements
● There are 4 properties that can help in setting up of border:
○ Width - sets the width of the border
○ Style - sets the style of border; Eg: solid, dashed etc.
[email protected]
○ Color - sets the color of the border
28CFBOWJEN ○ Radius - determines the roundness of the border

● You can set the border for specifically top, right, bottom and left
● We can also club top and bottom together and same goes for left and right
○ Eg: border-width: 2px 5px; sets top and bottom 2px; left and right 5px
● Border can also be set in a single line
○ Eg: border : 2px solid blue;

Proprietary
This filecontent. © Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited.
by [email protected] only.
Sharing or publishing the contents in part or full is liable for legal action.
CSS Border Example

p{
border-style: solid;
border-color: blue;
[email protected] border-width: 2px 5px;
28CFBOWJEN
border-radius: 10%;
}

Proprietary
This filecontent. © Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited.
by [email protected] only.
Sharing or publishing the contents in part or full is liable for legal action.
Box Model
● Every element in CSS can be represented using BOX model
● It helps developer to develop and manipulate the elements
● It consist of 4 edges
○ Content edge - It comprises of the actual content
○ Padding edge - It lies in between content and border edge
○ Border edge - Padding is followed by the border edge
[email protected]
28CFBOWJEN
○ Margin edge - It is outside border and controls margin of the
element
● Example:
#styled{
border: 2px solid blue;
margin: 5px;
padding: 20px;
Proprietary
width:20px;
content. © Greatfor
Learning. All Rights
useReserved. Unauthorized use or distribution prohibited.
height:20px;
This file is meant personal by [email protected] only.
Sharing or publishing the contents in part or full is liable for legal action.
Conclusion
● Introduction to CSS
● CSS Basic Structure
● Different ways to write CSS
● CSS Selectors
[email protected]
28CFBOWJEN ● Color Property
● Background Property
● Border Property
● Box Model

Proprietary
This filecontent. © Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited.
by [email protected] only.
Sharing or publishing the contents in part or full is liable for legal action.
[email protected]
28CFBOWJEN

Thank You
Proprietary
This filecontent. © Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited.
by [email protected] only.
Sharing or publishing the contents in part or full is liable for legal action.

You might also like