CSS NOTES

Table of Content
 What is CSS
 History of CSS
 CSS Editors
 CSS Basic Structure
 CSS Comments
 Different ways to write CSS
 CSS Selectors
 Color Property
 Background Property
 Border Property
 Box Model

What is CSS
1 CSS stands for Cascading Style Sheets

2 If HTML is the structure of the house then CSS is the look and feel of the house

3 It’s the language to make our web pages presentable

4 Designed to make style sheets for web

5 Now let’s try to break the acronym:

Cascading: Falling of Styles

Sheets: Writing our style in different documents

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

2 1996: CSS was published on 17th November with influencer Bert Bos

3 Later he became co-author of CSS

4 1996 : CSS became official with CSS was published in December

5 1997 : Created CSS level 2 on 4th November

6 1998: Published on 12th May

2 Brackets

3 Espresso(Mac user)

4 Notepad++(Great for HTML & CSS)

5 Komodo Edit (Simple)

6 Sublime Text

Basic Structure

Selector {

Property1 : value;

Property2 : value;

Property3 : value;

1 Selector: selects the element you want to target

2 There are few basic selectors like tags, id’s, and classes

3 All forms this key -value pair

4 Keys : properties(attributes) like color, font-size, background, width, height,etc

5 Value : values associated with these properties

6 Always remains same whether we apply internal or external styling

Comments
1 Comments don’t render on the browser

2 Helps to understand our code better and makes it readable.

3 Helps to debugging our code

0 Two ways to comment:Single line

2 Different ways to Write CSS

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

2 Internal Css

3 External Css

4 Priority orderInline > Internal > External

Inline CSS
1 Before Css this was the only way to apply styles

2 Not an efficient way to write as it has lot a redundancy

3 Self-contained

4 Uniquely applied on each element

5 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>

Internal CSS
1 With the help of style tag we can apply styles within the HTML file

2 Redundancy is removed

3 But idea of separation of concerns still lost

4 Uniquely applied on single document

5 Example:

< style>

h1{
color:red;

</style>

<h3> Have a great day </h3>

External CSS
1 With the help of <link> tag in head tag we can apply styles

2 Reference is added

3 File saved with .css extension

4 Redundancy is removed

5 Idea of separation of concerns is maintained

6 Uniquely applied on each document

7 Example:

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

CSS Selectors
1 Selector are used target elements and apply Css

0 Three simple selectorsElement Selector

1 Id Selector

2 Class Selector

1 Priority of Selectors

Id > Class>Element
Element Selector
1 Used to select HTML elements by its name

2 How 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.

ID Selector
1 Id attribute is used to select HTML element

2 Used to target specific or unique element

3 How we do it

#unique

Color: red;

<pid=”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

Class Selector
1 Class attribute is used to select HTML element

2 Used to target specific class of element

3 How we do it

.group

{
Color: red;

<pclass=”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

Universal Selector
1 Wild card character

2 Used to target specific all the elements

3 How we do it

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 as red

Group Selector
1 Group selector minimizes code

2 Used to target specific group of elements

3 How we do it

h1,p {

color: red;

}
<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

Descendant CombinatorSelector
1 Combine two or more selectors

2 How we do it

<div id="out">

<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;}

Child CombinatorSelector
1 Combine two or more selectorslike Descendant

2 It only targets immediate child.

3 How we do it

<div id="out">

<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;

}
Pseudo-classSelector
1 Used to target state of element

2 How we do it

p : hover

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

CSS Color
1 There are different colouring schemes in CSS

1 2 widely used techniques are as followsRGBThis starts with rgb and takes 3 parameter

2 3 parameter basically corresponds to red, green and blue

3 Value of each parameter may vary from 0 to 255.

4 Eg: rgb(255,0,0); means color red

5 HEX Hex code starts with # and comprises of 6 numbers which is further divided into 3
sets

6 Sets basically corresponds to Red, Green and Blue

7 A single set value can vary from 00 to ff

8 Eg: #ff0000 ; means color red

CSS Background
1 There are different ways by which CSS can have effect on HTML elements

0 Few of them are as follows:Color -used to set the color of the background

1 Repeat -used to determine if image has to repeat or not and if it is repeating then how it
should do that
2 Image -used to set image as the background

3 Position -used to determine the position of the image

4 Attachment -It basically helps in controlling the mechanism of scrolling

CSS Background Demo

background: #ff9900;

p{

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;

CSS Border
1 Helps in setting up the border for HTML elements

0 There are 4 properties that can help in setting up of border:Width -sets the width of the
border

1 Style -sets the style of border; Eg: solid, dashed etc.

2 Color -sets the color of the border

3 Radius -determines the roundness of the border

1 You can set the border for specifically top, right, bottom and left

1 We can also club top and bottom together and same goes for left and rightEg: border-
width: 2px 5px; sets top and bottom 2px; left and right 5px

Border can also be set in a single lineEg: border : 2px solid blue;
CSS Border Example
p{

border-style: solid;

border-color: blue;

border-width: 2px 5px;

border-radius: 10%

Box Model
1 Every element in CSS can be represented using BOX model

2 It helps developer to develop and manipulate the elements

0 It consist of 4 edgesContent edge -It comprises of the actual content

1 Padding edge -It lies in between content and border edge

2 Border edge -Padding is followed by the border edge

3 Margin edge -It is outside border and controls margin of the element

4 Example:

#styled{

border: 2px solid blue;

margin: 5px;

padding: 20px;

width:20px;

height:20px;