0% found this document useful (0 votes)

3 views44 pages

CSS Class Notes

The document provides an introduction to CSS (Cascading Style Sheets), explaining its purpose as a styling language for HTML elements. It covers CSS syntax, basic selectors, properties, color formats, font styles, and layout techniques including the box model. Additionally, it includes examples for practical understanding of CSS applications in web design.

Uploaded by

notme8437

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

0% found this document useful (0 votes)

3 views44 pages

CSS Class Notes

Uploaded by

notme8437

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

Introduction to CSS

==> CSS Stands For "Cascading Style Sheet"

==> CSS is a "styling Language" which is used to apply styles to the html elments in the
web page.
==> CSS styles include with backgrounds,colors,margins,borders,paddings alignments etc
==>A CSS style can overlap other CSS style;that why it i called as "cascading" style sheets.

Syntax of CSS:
<style type="text/css">
css code here
</style>

Syntax of CSS style definition :

selector
{
property:value;
property:value;
}

CSS Basic Selectors

==> "select" is a syntax to select the desired elements

==> CSS supports many [Link] most important css selectors are :
1 Tag selector
2 ID selector

1 .Tag selector
==> The "Tag selector" selects all the instances of specific tag
==> Use tag selector to select multiple elements.
Syntax : tagname
Example : p

2 . Id Selector
==> The "id Selector" selects a single tag,based on the "id"
==> "ID" is the "identification name"; it must be unique
==> Use ID selector to select a exact single element.

==> '#' is the symbol of "ID"

Syntax : #id
Example : #p1

First Example on CSS

<html>
<head>
<title> CSS --First Example </title>
<style type="text/css">
p
{
color:green
}
</style>
</head>
<body>
<p> This is HTML with CSS </p>
<p> Content of CSS </p>
</body>
</html>

Example on ID Selector

<html>
<head>
<title> CSS --ID Selector </title>

CSS -- Properties :

==> "Properties" are "details" or "settings" of html tag

==> Every property contains a value

Syntax : property : value;

Example : color : green;

color : This property specifies text color (font color) of the element
Syntax : color : colorname;
Ex : color : green;
Example on color Property
<html>
<head>
<title> CSS --Text Color </title>

background-color

Syntax : background-color : colorname;

Ex :

Types of Colors

Colors can be represented in 3 formats

1 Named Colors
2 RGB
3 Hexadecimal Number
Named Colors :
==>We can write name of the color directly.
==> These are limited
==> We can't get exact shade of the color
==> Ex : white,green,black,orange etc
==> This are not recommended in real time
RGB :
RGB formula specifies that the composition of 3 basic colors(red,green,blue) generates 16
million colors
Syntax : rgb(red,green,blue)
==> Red = 0 to 255
==>Green = 0 to 255
==>Blue= 0 to 255
Example : rgb(0,0,0) = black
rgb(255,0,0) = red
rdb(0,255,0) = green
rgb(0,0,255)=blue
etc combinations
Hexadecimal Format :
==> "Hexadecimal format" is the shortcut of "RGB"
==> Hexadecimal Number system supports 16 symbols as
0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F
==> Hexadecimal number should be 6 symbols long with'#' [Link] two symbols
represent red,second two symbols represent green, third two symbols represent blue.

Syntax : #redgreenblue
Example :
#ffffff = white
#000000 = black
#ff0000 = red
Note : Hexadecimal format is recommended in realtime

Example on Colors
<html>
<head>
<title> CSS -- Colors </title>

Font-Styles
font-family
Syntax :
font-family : "fontname";
Ex : font-family : "Arial";

Note : It is recommended to specify multiple font family names ;If specified browser tries the
subsequent font if the previous font is not found/not supported in the browser
Ex :
<style type="text/css">
#p1
{
font-family:"Times New Roman";
color:#cc00ff;
background-color:#6fecd3;
font-size:12px;
font-weight:bold | normal
font-style:italic | normal
}
Text Styles
letter-spacing
==> This property specifies gap between letters. For Example in "ABC" ,the letter spacing
specifies gap between "A" and "B" and also gap between "B" and "C"

Syntax :
letter-spacing : pixels
Ex : letter-spacing : 10px

Word-spacing
Syntax :
word-spacing:pixels;
word-spacing:10px;
word-spacing:normal/-10px/5px

line-height : This property specifies height of the line of text

Syntax :
line-height :pixels
Ex :
line-height:normal
line-height:12px;
line-height:50%;
We can define in percentage.

{
font-family:"Times New Roman";
color:#cc00ff;
background-color:#6fecd3;
font-size:40px;
font-weight:bold;
font-style:italic;
letter-spacing:-2px;
line-height:100px;

}
#p2
{
font-family:"Comic Sans MS" ;
background-color:rgb(240,250,160);
letter-spacing:-1px;
word-spacing:20px;
}

text-decoration :This property specifies underline/overline etc default none

Syntax :
text-decoration : none|underline|overline|line-through;
Ex :
text-decoration : underline;
By default none.

text-transform :This property specifies uppercase etc

Default is none
Syntax :
text-transform : none | uppercase | lowercase|capitalize

text-align : This property specifies alignment For the text.

The default is left

Syntax :
text-align: left|right|center|justify;
Ex :
text-align:center

text-indent
This property specifies the left margin For the First line in the paragraph.

Syntax :
text-indent: pixels
Ex :
text-indent:10px;
<html>
<head>
<title> CSS -- Colors </title>

}
#p3
{
font-family:"Black Monk"
background-color:#6fecd3;
letter-spacing:10px;
}
</style>
</head>
<body>
<p id="p1"> css </p>
<p id="p2"> Para [Link] many guides on the internet attempt to teach HTML
</p>
<p id="p3"> Para [Link] many guides on the internet attempt to teach HTML
</p>
</body>
</html>

Span
<span> represents a small amount of text,For which you can apply some special formatting .
<span> is a paired tag
<span> tag doesn't apply any style by default ,but we can applay any styles for it

Syntax
<span> Your Content here </span>

</style>
</head>
<body>
<p id="p1"> You can find more information about how CSS Works
<span id="span1"> privacy policy </span> or additional terms for particular
services </p>
</body>
</html>

Background Image

background-image : Specifies background image of an element

==> Place the background image file in the current folder

Syntax : background-image:url("[Link]");
Ex :
<style type="text/css">
#p1
{
background-color:skyblue;
background-image: url('[Link]');
}
</style>
</head>
<body>
<p id="p1"> You can find more information about how CSS Works
</p1>

background-attachment
==> This property specifies whether the background image
should be scrolled along with the text,when the user uses the
scrollbars of the web page.

==>If the value is "scroll" the background image will be scrolled along with the text

==>If it is "fixed" the background will not be scrolled ,only the text will be scrolled.
Syntax : background-attachment:scroll|fixed
Ex :
#p1
{
background-color:skyblue;
background-image:url("[Link]");
background-attachment:fixed;
}

Lists

list-style-type For <ul>

==>This property specifies type of bullet for <ul> tag
==><ul> tag is used to display a list of names
==><li> tag represents an item in the <ul>
==> the default value is "disc" in case of <ul> tag
Syntax :
list-style-type: none | disc|square|circle;

Ex : <html>
<head>
<title> CSS-Lists </title>
<style type="text/CSS">
#list1
{
list-style-type:square;
}
#list2
{
list-style-type:disc;
}
#list3
{
list-style-type:circle;
}
#list4
{
list-style-type:none;
}
</style>
</head>
<body>
<h3> UL -- Square </h3>
<ul id="list1">
<li> India</li>
<li> China </li>
<li> USA </li>
<li> UK </li>
</ul>
<h2> UL -- None </h2>
<ul id="list3">
<li> India</li>
<li> China </li>
<li> USA </li>
<li> UK </li>
</ul>
</body>
</html>

list-style-type for <ol>

Ex : <html>
<head>
<title> CSS-Lists </title>
<style type="text/CSS">
#list1
{
list-style-type:lower-alpha;
}
#list2
{
list-style-type:upper-roman;
}
#list3
{
list-style-type:decimal-leading-zero;
}
#list4
{
list-style-type:lower-greek;
}
</style>
</head>
<body>
<h3> UL -- Square </h3>
<ul id="list4">
<li> India</li>
<li> China </li>
<li> USA </li>
<li> UK </li>
</ul>
<h2> UL -- None </h2>
<ul id="list2">
<li> India</li>
<li> China </li>
<li> USA </li>
<li> UK </li>
</ul>
</body>
</html>

list-style-image
=>This property specifies bullet image File path For the list

Syntax : list-style-image:url("[Link]")

Ex :

<html>
<head>
<title> CSS-Lists </title>
<style type="text/CSS">
#list1
{
list-style-image:url("[Link]");
}
</style>
</head>
<body>
Top Browsers
<ul id="list1">
<li> Google Chrome </li>
<li> Mozilla FireFox</li>
</ul>
</body>
</html>

Note : try to reduce height and Width

<html>
<head>
<title> CSS-Lists </title>
<style type="text/CSS">
#list1
{

list-style-image: url("[Link]");
background-image: url("[Link]");
background-size: 16px 16px;
background-repeat: no-repeat;
background-position: 0 5px;
padding-left: 25px;

}
</style>
</head>
<body>
Top Browsers
<ul id="list1">
<li> Google Chrome </li>
<li> Mozilla FireFox</li>
</ul>
</body>
</html>

DIV
==> <div> tag is the important tag of html
--> It is a container in which you can place any other elements
==>A Web page can have any no: of <div> tag
==> A <div> tag can be placed in another <div> tag
==> <div> is a block level [Link] means it occupies 100% of the width by [Link] the
content next to the <div> tag appears in next line

Syntax : <div> any content </div>

Examples :

float :
==>This property displays the elemens side-by-side
==> If the value is "left" the elements will be displayed side by side starting left towards
right
==> If the value is "right" the elements will be displayed side by side from right towards
"left"
Syntax : float : left|right

clear :
==>This property cancels the effect of "float" and push the current element to next line .
==> It stops the sequence of "float"
==> Top stop "float:left" sequence we use clear:left
==> Top stop "float:right" sequence we use clear: right

Syntax :
clear:left|right;
#div3
{
background-color:#0044cc;
width:200px;
height:200px;
clear:left;
}
BOX Model

Understanding Box Model

==> Box Model is combination of "Padding border and margin"

==> All Visible elements are displayd based on box model in the web page

border-style
==> This property specifies type of border,around the element
==> default value is "none"
==> "solid" is recommended

Syntax : border-style : none|solid|dotted|dashed|

double|insert|outset etc

border-width : This property specifies thickness of the border

Syntax : border-width:pixels;

border-color : Specifies color of the border

Syntax : border-color : any color;

Example on border

<html>
<head>
<title> CSS-Border With Box Model </title>
<style type="text/CSS">
#div1
{
background-color : #00ffcc;
width:200px;
height :200px;
float : left;
border-style:inset;
border-width:5px;
border-color:red;
}
#div2
{
background-color : #cc33ff;
width:200px;
height :200px;
float : left;
border-style:outset;
border-width:5px;
border-color:green;
}

</style>
</head>
<body>
<div id="div1">This is a Broder Property defined in the box model </div>
<div id="div2">This is a Broder Property defined in the box model </div>
</body>
</html>

border-shortcut

Syntax : border : borderwidth borderstyle bordercolor;

Ex : border: 5px solid red;

border -sides

"border-top" property

This Property specifies border width,border style and border color For top side
only
Syntax :
border-top: borderwidth borderstyle bordercolor;

Similarly we have "border-right" , "border-bottam", "border-left" properties

#div1
{
background-color : #00ffcc;
width:200px;
height :200px;
float : left;
border-left:10px solid red;
border-top:10px solid #00ee22;

}
#div2
{
background-color : #cc33ff;
width:200px;
height :200px;
float : left;
border-top:10px solid green;
border-right:10px solid darkblue;
}

</style>
</head>
<body>
<div id="div1">This is a Broder Property defined in the box model </div>
<div id="div2">This is a Broder Property defined in the box model </div>
</body>
</html>

Margin
this property specifies the margin(gap) between element to element surrounding
the element.
For Ex If two <div> tags are display side-by side the gap between them is called as
margin

Syntax : margin: pixels

Ex :

<html>
<head>
<title> CSS-Border With Box Model </title>
<style type="text/CSS">
body
{
text-align:justify;
}
#div1
{
background-color : #00ffcc;
width:200px;
height :200px;
float : left;
border-left:10px solid red;
border-top:10px solid #00ee22;
margin:10px 20px 20px 5px; //margin short form followed direction top right
bottam left
}
#div2
{
background-color : #cc33ff;
width:200px;
height :200px;
float : left;
border-top:10px solid green;
border-right:10px solid darkblue;
margin:10px 40px 20px 1px;
}
</style>
</head>
<body>
<div id="div1">This is a Broder Property defined in the box model </div>
<div id="div2">This is a Broder Property defined in the box model </div>
</body>
</html>

margin-sides

"margin-top" top margin gap between element to element

Syntax : margin-top : pixels;
margin-right: pixels;
margin-bottam: pixels;
margin-left:pixels;
margin-shortcut
Syntax :
margin : topmargin rightmargin bottammargin leftmargin

<!DOCTYPE html>
<html>
<head>
<title>Box Model</title>
<style type="text/css">
body //tag selector
{
text-align:justify;
}

#div1 //id selector

{
background-color: #00ffcc;
width:300px;
height:300px;
float:left;
border:5px solid red;
margin:10px 20px 20px 5px;
}
#div2
{
background-color: #003369;
width:300px;
height:300px;
float:left;
border:5px groove blue;
margin:10px 40px 20px 5px;
}
</style>
</head>
<body>
<div id="div1"> This is a Box -Model which provided different types of styles</div>
<div id="div2"> div 2 </div>
</body>
</html>

Padding : specifies the padding(gap) between border and content of the element .Inner Margin is
called Padding .Outer margin is called as "margin"
Syntax : padding : pixels

Short form : Syntax :

padding :toppadding rightpadding bottam padding left padding
<html>
<head>
<title> CSS-Border With Box Model </title>
<style type="text/CSS">
body
{
text-align:justify;
}
#div1
{
background-color : #00ffcc;
width:200px;
height :200px;
float : left;
border-left:10px solid red;
border-top:10px solid #00ee22;
margin:10px 20px 20px 5px;
padding :10px 5px 15px 10px;
}
#div2
{
background-color : #cc33ff;
width:200px;
height :200px;
float : left;
border-top:10px solid green;
border-right:10px solid darkblue;
margin:10px 40px 20px 1px;
padding :10px 5px 15px 10px;
}
}
</style>
</head>
<body>
<div id="div1">This is a Broder Property defined in the box model </div>
<div id="div2">This is a Broder Property defined in the box model </div>
</body>
</html>

Advanced CSS Properties

"opacity" property

==>This property makes the element transparent (background information is visible through the
element)
==>you can specify any number between 0 to 1
==>Any middle number between 0 and 1 is recommended
Syntax :
opacity: 0 to 1;

1 : Fully visible
0.9 ....,0.1 : transparent
0 : invisible

Example

<html>
<head>
<title> CSS-Border With Box Model </title>
<style type="text/CSS">
body
{
text-align:center;
background-image:url("[Link]");
}
#div1
{
font-size:40px;
font-family:"Tahoma";
height:200px;
width:300px;
background-color:#009966;
opacity:0.5;
}
</style>
</head>
<body>
<div id="div1">INDIAN TEAM ICC Tropy INDIAN TEAM ICC Tropy INDIAN TEAM ICC
Tropy INDIAN TEAM ICC Tropy INDIAN TEAM ICC Tropy INDIAN TEAM ICC Tropy </div>
</body>
</html>

And many other CSS Advanced Properties ......

Types of Style Sheets

==> CSS style sheets 3 types

1 Internal Style Sheet/Embedded Style Sheet
2 External Style Sheet
3 Inline Style Sheet

1 Internal Style Sheet(Embedded Style Sheet)

The css styles are defined inside the ".html" file itself

Advantages : Easy to understand

Disadvantages : No re-usablility ,That means the styles defined in one html file can't be
accessed in other html file.

Syntax :
<style type="text/css">
css code
</style>
External Style Sheet:
==> The CSS styles are defined in a seperate ".css" file and html tags are defined in the
.html file
==> We can link (connect) the CSS file with html file

Advantages : It supports re-usability That means the css file can be called in many html files

Syntax to import css file:

[Link]

<html>
<head>
<title> CSS--External Style--Page 1 </title>
<link href="[Link]" rel="StyleSheet">
</head>
<body>
<h1> Hello </h1>
</body>
</html>

[Link]

<html>
<head>
<title> CSS--External Style--Page 2 </title>
<link href="[Link]" rel="StyleSheet">
</head>
<body>
<h1> Hai </h1>
</body>
</html>

Inline Style Sheet

==> This CSS style sheet will be defined inside the html tag itself
==> This is NOT recommended in realtime

Drawbacks :
a) HTML code will be confusing
b) No -style reusability

Syntax :
<tag style="property:value; property:value;...">
</tag>

Ex :
<html>
<head>
<title> CSS--Inline CSS </title>
</head>
<body>
<p style="background-color:cyan font-size=40px">para 1 </p>
<p style="background-color:cyan font-size=40px">para 2 </p>
</body>
</html>

CSS Selectors
==>First we have select the element/elements and then only we can apply some styles to it.
==>"selector" is a "syntax to select" .It is used to select the desired elements in the web page.
==> When we use a selector the browser searches the entire web page For the matching elements
and returns the matching elements and we applystyles only for those matching elements .

List of CSS selectors

1 Tag selector 2 ID selector 3 Class selector 4 Compound Selector 5 Grouping selector
6 Child Selector 7 Direct Child Selector
8 Attribute selector 9 Hover Selector 10 Focus selector
11 Universal Selector

1 .Tag selector
==> The "Tag selector" selects all the instances of specific tag
==> You can specify any tag name
==> Use tag selector to select multiple elements.
Syntax : tagname
Example : p

Example For Tag selector

<html>
<head>
<title> CSS --Tag Selector </title>

==> '#' is the symbol of "ID"

Syntax : #id
Example : #p1

Example on ID Selector

<html>
<head>
<title> CSS --ID Selector </title>

Class Selector
==> It selects one or more elements based on the class name .
==> We use same class For similar elements
==> "." is the symbol For class Selector
Syntax : .class
Ex : .c1

Example

<html>
<head>
<title> CSS- Class selector </title>
<style type="text/CSS">
.c1
{
background-color : skyblue;
}
</style>
</head>
<body>
<h1> Class Selector </h1>
<p> para 1 </p>
<p class="c1"> para 2 </p>
<p> para 3 </p>
<p class="c1"> para 4 </p>
<p> para 4 </p>
<p class="c1"> para 6 </p>
<p class="c1"> para 7 </p>
</body>
</html>

Tag selector for Predefined only use

ID selector for single tag and also userdefined target a single unique element
class selector for more than one ,multiple elements

Compound Selector

It selects the instances of specific tag,which have specified class.

Syntax : [Link]
Ex : p.c1

Example

<html>
<head>
<title> CSS- Compound selector </title>

</style>
</head>
<body>
<h1> Compound Selector </h1>
<p> para 1 </p>
<p class="class1"> para 2 </p>
<p> para 3 </p>
<p class="class1"> para 4 </p>
<p> para 5 </p>
<p class="class1"> para 6 </p>
<input type="text">
<input type ="text" class="class1">
<input type="text">
<input type="text" class="class1">
</body>
</html>

===> Need to apply For Text Boxes also Compound Selector check it

<html>
<head>
<title> CSS- Compound selector </title>

Grouping Selector

==> It selects the specified group of tags

==> "," is the symbol of grouping selector

Syntax : tag1,tag2,tag3,....
Ex : div,p,h3

Example
<html>
<head>
<title> CSS- Grouping selector </title>

}
</style>
</head>
<body>
<h1> Grouping Selector </h1>
<p> para 1 </p>
<p class="class1"> para 2 </p>
<p> para 3 </p>
<p class="class1"> para 4 </p>
<p> para 5 </p>
<p class="class1"> para 6 </p>
<input type="text" value="hello">
<input type ="text" value="hello" class="class1">
<input type="text" value="hello" class="class1">
<span> span 1 </span>
<span> span 2 </span>
</body>
</html>

Note : For all examples i need a website where there are using specific web sites open it and show

Child Selector : It selects all the child tags

==> "space" is the syntax of child selector

Syntax : parenttag childtag

Ex : div p

Example

<html>
<head>
<title> CSS- Child selector </title>

Direct Child Selector

==> It select only the direct child tags
==> ">" is the symbol of direct child selector

Syntax : parenttag > childtag

Ex : div > p

Example
<html>
<head>
<title> CSS- Direct Child selector </title>

Attribute selector :
It selects all the tags that are having specified attribute
"[ ] " are the symbols of attribute selector
We can use any attribute of any html tag
Syntax : tag[attribute="value"]
Ex : img[width="120px"]

Example
<html>
<head>
<title> CSS- Attribute selector </title>
<style type="text/CSS">
/* selecting element based on the attribute value*/
img[width='120px']
{
border : 4px solid red;
}
</style>
</head>
<body>
<h1> Attribute Selector </h1>
<img src="[Link]" width="120px">
<img src="[Link]" width="100px">
<img src="[Link]" width="120px">
<img src="[Link]" width="100px">

</body>
</html>

Note : which one specifies width 120 that jpg files effext with border what we specify

<html>
<head>
<title> CSS- Attribute selector </title>
<style type="text/CSS">
input[type="text"]
{
border: 4px solid blue;
padding : 10px;
}
a[target="_blank"]
{
color: red;
text-decoration : underline;
}
</style>
</head>
<body>
<h1> Attribute selector </h1>

<input type = "text" placeholder="Enter Name : ">

<p> <a href= "[Link] target="_blank"> Visit HTML </a></p>

Hover Selector
==> It applies the style only when the user places te mouse pointer on the element
at run time
==> It automatically removes the styles ,if the mounse pointer is moved outside
the element
==>It is also called as "Pseudo class" whenever the seelctor starts with ":" it is
called as "Pseudo class"
==> pseudo=unrealistic

Syntax : tag:hover
Ex : p : hover

Example
<html>
<head>
<title> CSS- Hover selector </title>
<style type="text/CSS">
p
{
background-color:skyblue;
}
p:hover
{
background-color:hotpink;
}
</style>
</head>
<body>
<h1> hover Selector </h1>
<p> para 1 </p>
<p> para 2</p>
<p> para 3</p>
<p> para 4</p>
</body>
</html>

Focus Selector
==> It applies the style only when the focus (cursor) is iniside the element
==> It automatically removes the style when the cursor gets out the element
==> It is also called as "Pseudo class"

Syntax : tag:focus
Ex : input:focus

Example
<html>
<head>
<title> CSS- Focus selector </title>
<style type="text/CSS">
input:focus
{
border: 4px dotted red;
}
</style>
</head>
<body>
<h1> Focus Selector </h1>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
</body>
</html>

Universal Selector : ==> It selects all the tags in the web page (including <html> ,<head>,<body>
etc)
==> Used to apply global Styles
Syntax : *
Ex : *

<html>
<head>
<title> CSS- Universal selector </title>
<style type="text/CSS">
/* select all tags in the web page*/
*
{
font-family :"Segoe UI";
/*border: 4px dotted red;*/
}
</style>
</head>
<body>
<h1> Universal Selector </h1>
<p> para 1 </p>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
</body>
</html>

CSS Style Precendence

==> The css styles are applied in the following order(lowest priority to highest priority)
==>The higher priority style overrides the same property's value of the lower priority
1 Browser default style
2 Tag selector
3 Direct child Selector
4 Child Selector
5 Class selector
6 Attribute selector
7 ID selector
Note : !important" is used to override the "style precendence"

Example
<html>
<head>
<title> CSS- Precendence </title>
<style type="text/CSS">
p
{
color:blue;
}
div>p
{
color:red;
}
.c1
{
color:green;
}
#p1
{
color:pink;
}
</style>
</head>
<body>
<div>
<p id="p1" class="c1"> Para 1 </p>
</div>
</body>
</html>

In this tag selector dominate if u want change the precendence

use !important in any selector For Exampe
<style type="text/css">
p
{
color:blue !important;
}

this tag is effected first

Output will be highest selector ie Tag selector --so output in pink color
If we add !important to any selector then the selector the color will occurs
For Example
<style type="text/CSS">
p
{
color:blue !important;
}
Then tag selector will effected first irrespective of order.
CSS Realtime Examples
Table Styles

<html>
<head>
<title> CSS With Table Styles </title>
<style type="text/CSS">
#table1
{
background-color:#003399;
font-size :30px;
font-family:'Tahoma';
}
#table1 tr
{
background-color:#33ccff;
}
#table1 tr:nth child(1)
{
background-color:#ff0099;
}
#table1 tr td
{
padding:5px;
}
#table1 tr th
{
padding:10px;
}
#table1 tr:hover
{
background-color:#00ffcc;
cursor:pointer;
}
</style>
</head>
<body>
<table id ="table1">
<tr>
<th> Name </th>
<th> Email </th>
</tr>
<tr>
<td> Scott </td>
<td> scott@[Link]</td>
</tr>
<tr>
<td> Allen </td>
<td> allen@[Link]</td>
</tr>
</table>
</body>
</html>

Example on HyperLinks Styles

It is used to apply styles to hyperlinks

a:link : Apply styles to unvisited hyperlinks

a:hover: Apply styles to hyperlinks when we place mouse pointeron it
a:active : Apply styles to hyperlinks when we click and hold it
a:hover : Apply styles to visited hyperlinks

Example

<html>
<head>
<title> CSS Links </title>
<style type="text/CSS">
/* unvisited */
a:link
{
background-color:darkgreen;
font-size: 20px;
color:white;
padding:2px;
text-decoration:none;
font-weight: bold;
}
a:hover /* mouse over link*/
{
background-color:yellow;
color:darkgreen;
text-decoration : underline;
}
/* selected link*/
a:active
{
background-color:red;
color:cyan;
}
/* visited link*/
a:visited
{
background-color:black;
color:pink;
}
</style>
</head>
<body>
<a href ="[Link]
<a href ="[Link]
<a href ="[Link]
</body>
</html>

MenuBar
Menubar is a collection of hyperlinks arrange vertically/horizontally.

Example:

<html>
<head>
<title> CSS Links </title>
<style type="text/CSS">
.menubar
{
background-color:#00ffcc;
height:40px;
font-size:24px;
font-family:'Tahoma';
width:800px;
margin:auto;
}
.menubar ul
{
list-style-type:none;
padding:0px;
}
.menubar ul li
{
display:inline;
width:200px;
float:left;
height:40px;
text-align:center;
}
.menubar ul li a
{
line-height:40px;
text-decoration:none;
}
.menubar ul li:hover
{
background-color:#33cc99
cursor:pointer;
text-decoration:underline;
}
</style>
</head>
<body>
<div class="menubar">
<ul>
<li> <a href="#"> Home </a></li>
<li> <a href="#"> About </a></li>
<li> <a href="#"> Contact </a></li>
<li> <a href="#"> Services </a></li>
</ul>
</div>
</body>
</html>

Login Form contains username and password

<html>
<head>
<title> Login </title>
<style>
.login
{
border:1px solid blue;
font-size:30px;
border-radius:10px;
width:800px;
margin:auto;
box-shadow: 3px 3px 3px 2px black;
margin-top: 200px;
}
.login input
{
font-size:30px;
}
.login button
{
font-size:30px;
}
.c1
{
margin-bottom:10px;
margin-left:3px;
margin-right:3px;
margin-top:3px;
height :45px;
}
.c3
{
width:250px;
float:left;
height:45px;
text-align:right;
}
.c4
{
width:500px;
float:left;
height:45px;
}
.c2
{
width:500px;
margin-left:250px;
margin-bottom:10px;
}
</style>
</head>
<body>
<div class="login">
<form>
<div class="c1">
<div class="c3">
<label for="txtEmail"> Email : </label>
</div>
<div class="c4">
<input type="text" id="txtEmail" name="email">
</div>
</div>

<div class="c1">
<div class="c3">
<label for="txtPassword"> Password : </label>
</div>
<div class="c4">
<input type="password" id="txtPassword" name="password">
</div>
</div>

<div class="c2">
<input type="checkbox" id="chkremember" value="yes">
<label for="chkremember"> Remember Me </label>
</div>

<div class="c2">
<button> Login </button>
</div>
</form>
</div>
</body>
</html>

Animations
==>Animations are "group of transitions",which will be performed one after another
==>Transition contains two points only(starting + ending)
==>Animation contains multiple points of milestones
Syntax :

selector
{
animation : animationname seconds;
}
@keyframes animationname
{
0%{ property:value;property:value;....},
25%{ property:value;property:value;....},
50%{ property:value;property:value;....},
75%{ property:value;property:value;....},
100%{ property:value;property:value;....}
}

Example : font-size

10px 50px 20px 100px 15px 40px

<html>
<head>
<title> Animations </title>
<style>
#div1
{
background-color: #2eda59;
font-size: 35px;
width:300px;
height:230px;
margin:60px;
}
#div1:hover
{
cursor:pointer;
animation:myanimation 5s; //fastness of moving the image
}
@keyframes myanimation
{
0%{transform:translate(0px,0px);}
25%{transform:translate(50px,0px);}
50%{transform:translate(50px,100px);}
75%{transform:translate(0px,100px);}
100%{transform:translate(0px,0px);}
}
</style>
</head>
<body>
<div id="div1">
<img src="[Link]" width="300px">
INDIA
</div>
</body>
</html>

Static Page Template

It is used to create page template(layout)

Header : Contains company logo,website name,login,logout,search etc

Nav : Contain menubar
Container : Contains left column and page content
Leftcol : contains left side menu
PageContent : Contains actual content of the page
Footer: Contains bottam information and links for Other related sites

Example on Static Page Template

<html>
<head>
<title> Home Page </title>
<style>
<body>
{
font-size:20px;
}
*
{
margin:0px;
padding:0px;
}
#outercontainer
{
background-color:#ffccff;
width:100%
margin:auto;
}
#header
{
background-color:#00ff99;
height:200px;
width:100%;
}
#nav
{
background-color:#ccccff;
height:80px;
width:100%;
}
#container
{
height:500px;
width:100%;
}
#leftcol
{
height:500px;
background-color:#66ccff;
width:20%;
float:left;
}
#pagecontent
{
height:500px;
background-color:#ccffcc;
width:80%;
float:left;
}
#footer
{
height:50px;
background-color:#ff0099;
width:100%;
clear:left;
}
</style>
</head>
<body>
<div id="outercontainer">
<div id="header">
Header
</div>

<div id="nav">
Navigation
</div>

<div id="container">
<div id="leftCol">
LeftCol
</div>
<div id="pagecontent">
Page Content
</div>
</div>
<div id="Footer">
Footer
</div>
</div>
</body>
</html>

Example on Page Navigation using Static Page Template

[Link]

<html>
<head>
<title> Home </title>
<link href="[Link]" rel="stylesheet">
</head>
<body>
<div id="outercontainer">
<div id="header">
Header
</div>

<div id="nav">
<a href ="[Link]"> Home</a>
<a href ="[Link]"> About </a>
<a href ="[Link]">Contact </a>
</div>

<div id="container">
<div id="leftCol">
LeftCol
</div>
<div id="pagecontent">
Home Page Content
</div>
</div>

<div id="footer">
Footer
</div>
</body>
</html>

[Link]
==========
<html>
<head>
<title> About </title>
<link href="[Link]" rel="stylesheet">
</head>
<body>
<div id="outercontainer">
<div id="header">
Header
</div>

<div id="nav">
<a href ="[Link]"> Home</a>
<a href ="[Link]"> About </a>
<a href ="[Link]">Contact </a>
</div>

<div id="container">
<div id="leftCol">
LeftCol
</div>
<div id="pagecontent">
About Page Content
</div>
</div>

<div id="footer">
Footer
</div>
</body>
</html>
=============================
[Link]
---------------
<html>
<head>
<title> Contact </title>
<link href="[Link]" rel="stylesheet">
</head>
<body>
<div id="outercontainer">
<div id="header">
Header
</div>

<div id="nav">
<a href ="[Link]"> Home</a>
<a href ="[Link]"> About </a>
<a href ="[Link]">Contact </a>
</div>

<div id="container">
<div id="leftCol">
LeftCol
</div>
<div id="Page content">
Contact Page Content
</div>
</div>

<div id="footer">
Footer
</div>
</body>
</html>

[Link]
=============
<style>
<body>
{
font-size:20px;
}
*
{
margin:0px;
padding:0px;
}
#outercontainer
{
background-color:#ffccff;
width:100%
margin:auto;
}
#header
{
background-color:#00ff99;
height:200px;
width:100%;
}
#nav
{
background-color:#ccccff;
height:80px;
width:100%;
}
#container
{
height:500px;
width:100%;
}
#leftcol
{
height:500px;
background-color:#66ccff;
width:20%;
float:left;
}
#pagecontent
{
height:500px;
background-color:#ccffcc;
width:80%;
float:left;
}
#footer
{
height:50px;
background-color:#ff0099;
width:100%;
clear:left;
}
</style>

HTML With Css
No ratings yet
HTML With Css
51 pages
Introduction to CSS Basics and Syntax
No ratings yet
Introduction to CSS Basics and Syntax
197 pages
Understanding Inline CSS Basics
No ratings yet
Understanding Inline CSS Basics
12 pages
Understanding CSS: Basics and Techniques
No ratings yet
Understanding CSS: Basics and Techniques
12 pages
CSS Types and Usage for Web Design
No ratings yet
CSS Types and Usage for Web Design
9 pages
Introduction to CSS for Web Development
No ratings yet
Introduction to CSS for Web Development
38 pages
Introduction to Cascading Style Sheets
No ratings yet
Introduction to Cascading Style Sheets
7 pages
Notes - CSS
No ratings yet
Notes - CSS
22 pages
CSS Basics: Configuring Text and Color
No ratings yet
CSS Basics: Configuring Text and Color
51 pages
Understanding CSS for Web Design
No ratings yet
Understanding CSS for Web Design
100 pages
CSS Syntax and Usage Guide
No ratings yet
CSS Syntax and Usage Guide
10 pages
Chapter Four CSS: Cascading Style Sheet
No ratings yet
Chapter Four CSS: Cascading Style Sheet
96 pages
CSS Basics: Styling Text and Fonts
No ratings yet
CSS Basics: Styling Text and Fonts
30 pages
Unit 3
No ratings yet
Unit 3
11 pages
Unit 3
No ratings yet
Unit 3
11 pages
CSS Beginner Tutorial Guide
No ratings yet
CSS Beginner Tutorial Guide
27 pages
CSS Basics: Styling Text and Colors
No ratings yet
CSS Basics: Styling Text and Colors
5 pages
CSS Basics by Dr. Will Kurlinkus
No ratings yet
CSS Basics by Dr. Will Kurlinkus
10 pages
Net Css Reviewer
No ratings yet
Net Css Reviewer
19 pages
Understanding CSS: Purpose and Basics
No ratings yet
Understanding CSS: Purpose and Basics
64 pages
CSS 1
No ratings yet
CSS 1
15 pages
CSS for Web Design & User Experience
No ratings yet
CSS for Web Design & User Experience
34 pages
CSS Box Model and Text Properties
No ratings yet
CSS Box Model and Text Properties
38 pages
Understanding CSS Basics and Syntax
No ratings yet
Understanding CSS Basics and Syntax
33 pages
Unit IV
No ratings yet
Unit IV
17 pages
CSS3 Basics and Styling Techniques
No ratings yet
CSS3 Basics and Styling Techniques
15 pages
Understanding Cascading Style Sheets (CSS)
No ratings yet
Understanding Cascading Style Sheets (CSS)
64 pages
Understanding Cascading Style Sheets (CSS)
No ratings yet
Understanding Cascading Style Sheets (CSS)
44 pages
Understanding CSS: Basics and Benefits
No ratings yet
Understanding CSS: Basics and Benefits
5 pages
CSS Font Properties Overview
No ratings yet
CSS Font Properties Overview
5 pages
Module 2
No ratings yet
Module 2
92 pages
Introduction to CSS Basics and Properties
No ratings yet
Introduction to CSS Basics and Properties
16 pages
CSS Types: Internal vs External
No ratings yet
CSS Types: Internal vs External
77 pages
CSS Basics for Web Presentation
No ratings yet
CSS Basics for Web Presentation
29 pages
Css (Soumya Sir) Note
No ratings yet
Css (Soumya Sir) Note
19 pages
Comprehensive Guide to CSS Basics
No ratings yet
Comprehensive Guide to CSS Basics
29 pages
Introduction to CSS Basics and Usage
No ratings yet
Introduction to CSS Basics and Usage
40 pages
CSS Coding Techniques and Examples
No ratings yet
CSS Coding Techniques and Examples
31 pages
Introduction to CSS Basics
No ratings yet
Introduction to CSS Basics
12 pages
Introduction to CSS Basics and Properties
No ratings yet
Introduction to CSS Basics and Properties
9 pages
13 CSS Notes
No ratings yet
13 CSS Notes
38 pages
Css Selectors
No ratings yet
Css Selectors
9 pages
Lecture 5 CSS
No ratings yet
Lecture 5 CSS
97 pages
CSS Basics: Styles, Selectors, and Properties
No ratings yet
CSS Basics: Styles, Selectors, and Properties
41 pages
CSS Basics: Styling HTML Elements
No ratings yet
CSS Basics: Styling HTML Elements
20 pages
Introduction to CSS Basics
No ratings yet
Introduction to CSS Basics
66 pages
CSS Basics: Styling Web Pages Explained
No ratings yet
CSS Basics: Styling Web Pages Explained
25 pages
CSS Basics: Introduction and Syntax
No ratings yet
CSS Basics: Introduction and Syntax
95 pages
Module 2. CSS
No ratings yet
Module 2. CSS
23 pages
Introduction to CSS Basics
No ratings yet
Introduction to CSS Basics
1 page
Comprehensive CSS Guide: Syntax & Properties
No ratings yet
Comprehensive CSS Guide: Syntax & Properties
22 pages
CSS1
No ratings yet
CSS1
677 pages
Mastering CSS for Web Design
No ratings yet
Mastering CSS for Web Design
27 pages
Understanding CSS for Web Design
No ratings yet
Understanding CSS for Web Design
30 pages
Understanding the CSS Box Model
No ratings yet
Understanding the CSS Box Model
65 pages
Introduction to CSS Basics and Usage
No ratings yet
Introduction to CSS Basics and Usage
77 pages
CSS Level 1 Quick Reference Guide
No ratings yet
CSS Level 1 Quick Reference Guide
7 pages
Essential CSS Properties Guide
No ratings yet
Essential CSS Properties Guide
42 pages
Major B1
No ratings yet
Major B1
47 pages
Mini Project of B1
No ratings yet
Mini Project of B1
39 pages
Mini Pro 5
No ratings yet
Mini Pro 5
30 pages
HTML Notes
No ratings yet
HTML Notes
77 pages
Wa0000.
No ratings yet
Wa0000.
13 pages
Intr 011
No ratings yet
Intr 011
10 pages
HTML Class Notes
No ratings yet
HTML Class Notes
42 pages
Off-Page SEO Strategies in Hindi
No ratings yet
Off-Page SEO Strategies in Hindi
1 page
Understanding CSS: Basics and Benefits
No ratings yet
Understanding CSS: Basics and Benefits
157 pages
Web Technology Question Paper 2022-23
No ratings yet
Web Technology Question Paper 2022-23
36 pages
Create a Shopping Cart UI in HTML/CSS
No ratings yet
Create a Shopping Cart UI in HTML/CSS
15 pages
Understanding the Dark Web
100% (1)
Understanding the Dark Web
21 pages
Harshit Singh: B.Tech CSE Profile & Skills
No ratings yet
Harshit Singh: B.Tech CSE Profile & Skills
2 pages
Essential HTML Sectioning Tags Guide
No ratings yet
Essential HTML Sectioning Tags Guide
4 pages
Comprehensive CSS Cheat Sheet
No ratings yet
Comprehensive CSS Cheat Sheet
1 page
HTML Practical: Graphics & Forms
No ratings yet
HTML Practical: Graphics & Forms
9 pages
Internet Basics for Beginners
No ratings yet
Internet Basics for Beginners
14 pages
Understanding HTML Elements and Tags
No ratings yet
Understanding HTML Elements and Tags
86 pages
WordPress: A Comprehensive CMS Overview
No ratings yet
WordPress: A Comprehensive CMS Overview
3 pages
Sample Qbank Programming With JavaScript - 0
No ratings yet
Sample Qbank Programming With JavaScript - 0
6 pages
Advanced iFrame Pro Documentation
No ratings yet
Advanced iFrame Pro Documentation
12 pages
Pros and Cons of Pop-Up Advertising
No ratings yet
Pros and Cons of Pop-Up Advertising
10 pages
Gilroy Font CDN Resources
No ratings yet
Gilroy Font CDN Resources
6 pages
ChatGPT Prompts for Pentesting & Bounty
No ratings yet
ChatGPT Prompts for Pentesting & Bounty
6 pages
Web Application Security Overview
100% (1)
Web Application Security Overview
95 pages
Overview of Web 1.0, 2.0, and 3.0
No ratings yet
Overview of Web 1.0, 2.0, and 3.0
1 page
CSS Positioning and Styling Exercises
No ratings yet
CSS Positioning and Styling Exercises
5 pages
Vehicle Parking Management System Overview
No ratings yet
Vehicle Parking Management System Overview
27 pages
HTML and CSS Basics Quiz
No ratings yet
HTML and CSS Basics Quiz
36 pages
SEO Basics and Best Practices Guide
No ratings yet
SEO Basics and Best Practices Guide
17 pages
Movistar Payload Configuration Guide
No ratings yet
Movistar Payload Configuration Guide
1 page
CS571 Fall 2021 Exam 2 Submissions
No ratings yet
CS571 Fall 2021 Exam 2 Submissions
16 pages
GameCenter Application Startup Log
No ratings yet
GameCenter Application Startup Log
9 pages
12th IT Advanced Web Design SOPs
100% (1)
12th IT Advanced Web Design SOPs
9 pages
Understanding HTML Forms and Controls
No ratings yet
Understanding HTML Forms and Controls
33 pages
Web Pages, Websites, and Web Apps Explained
No ratings yet
Web Pages, Websites, and Web Apps Explained
5 pages
10 MCQs on HTML Forms and KompoZer
No ratings yet
10 MCQs on HTML Forms and KompoZer
59 pages

CSS Class Notes

Uploaded by

CSS Class Notes

Uploaded by

Introduction to CSS

==> CSS Stands For "Cascading Style Sheet"

Syntax of CSS style definition :

CSS Basic Selectors

==> "select" is a syntax to select the desired elements

==> '#' is the symbol of "ID"

First Example on CSS

==> "Properties" are "details" or "settings" of html tag

Syntax : property : value;

Example : color : green;

Syntax : background-color : colorname;

Colors can be represented in 3 formats

line-height : This property specifies height of the line of text

text-decoration :This property specifies underline/overline etc default none

text-transform :This property specifies uppercase etc

text-align : This property specifies alignment For the text.

background-image : Specifies background image of an element

list-style-type For <ul>

list-style-type for <ol>

Note : try to reduce height and Width

Syntax : <div> any content </div>

Understanding Box Model

==> Box Model is combination of "Padding border and margin"

Syntax : border-style : none|solid|dotted|dashed|

border-width : This property specifies thickness of the border

border-color : Specifies color of the border

Syntax : border : borderwidth borderstyle bordercolor;

Similarly we have "border-right" , "border-bottam", "border-left" properties

Syntax : margin: pixels

"margin-top" top margin gap between element to element

#div1 //id selector

Short form : Syntax :

Advanced CSS Properties

And many other CSS Advanced Properties ......

Types of Style Sheets

==> CSS style sheets 3 types

1 Internal Style Sheet(Embedded Style Sheet)

Advantages : Easy to understand

Syntax to import css file:

[Link] ---- Filename

Inline Style Sheet

List of CSS selectors

Example For Tag selector

==> '#' is the symbol of "ID"

Tag selector for Predefined only use

It selects the instances of specific tag,which have specified class.

==> It selects the specified group of tags

Child Selector : It selects all the child tags

Syntax : parenttag childtag

Direct Child Selector

Syntax : parenttag > childtag

<input type = "text" placeholder="Enter Name : ">

<p> <a href= "[Link] target="_blank"> Visit HTML </a></p>

CSS Style Precendence

In this tag selector dominate if u want change the precendence

this tag is effected first

Example on HyperLinks Styles

It is used to apply styles to hyperlinks

a:link : Apply styles to unvisited hyperlinks

Login Form contains username and password

10px 50px 20px 100px 15px 40px

Static Page Template

It is used to create page template(layout)

Header : Contains company logo,website name,login,logout,search etc

Example on Static Page Template

Example on Page Navigation using Static Page Template

You might also like