Css Notes

Css Cascading stylesheet
Selector
CSS Syntax
A CSS rule-set consists of a selector and a declaration block:
Example:
<style>
h1
{
color:red;
}
</style>
ID Selector:
Example:
<style>
#abc
{
color:red;
}
</style>
<body>
<h1 id="abc">Heading</h1>
<p id="abc">Heading</p>
</body>
Class Selector:
Example:
<style>
.abc
{
text-align:center;
font-family:Cooper;
font-size:60px;
color:red;
}
.pqr
{
text-align:center;
font-size:30px;
font-family:EuroRoman;
}
</style>
</head>
<body>
<h1 class="abc">
//<h1 class="abc pqr">
My First Tutorial in css
</h1>
</body>
Group Selector:
Example:
h1, h2, p {
text-align: center;
color: red;
}
Css Comments
Example:
p{
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is
a multi-line
comment */
Background-color:
Example:
body {
background-color: lightblue;
}
Exapmle:
body
{
background-image:url("IMAGE.jpg");
background-size:1500px;
background-position:left top;
background-repeat:no-repeat;
background-attachment:fixed;
Three Ways to Insert CSS
There are three ways of inserting a style sheet:
 External style sheet

 Internal style sheet
 Inline style
External Style:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
mystyle.css
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Internal Style:
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
Inline Style:
<h1 style="color:blue;margin-left:30px;">This is a heading</h1>
Padding:
Example:
padding-top:500px;
padding-right:100px;
padding-bottom:150px;
padding-left:200px;
Margin:
Example:
margin-top
margin-right
margin-bottom
margin-left
Example:
margin: 10px 5px 15px 20px;
p.ex1 {
margin: 35px;// This paragraph has a margin of 35 pixels on all four sides.
}
Height and Width:

div
{
background-color:powderblue;
width:50%;
height:50px;
font-family:Castellar;
}
Text-transform:
div.a {
text-transform: uppercase;
}
div.b {
text-transform: lowercase;
}
div.c {
text-transform: capitalize;
}
Text-Decoration:
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
Text-Property:
text-indent:50px;
letter-spacing:20px;
line-height:0.8;
direction:rtl;
word-spacing:10px;
Text-Shadow:
Example:
text-shadow:3px 2px red;
Image-Alignment:
Example:
img.top
{
vertical-align:text-top;
}
img.bottom
{
vertical-align:text-bottom;
}
<p>
An <img class="top" src="abc.jpg" width="50" height="50">image with text
top align
</p>
Opacity:
img
{
opacity:0.5;
filter:alpha(opacity=50);
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100);
}
Css-link
a:link {color:green;
background-color:red;}
a:visited {color:blue;}
a:hover {color:hotpink;}
a:active {color:blue;}
Responsive image:
html,body
{height:100%;}
img.one
{height:auto; width:auto;}
img.two
{height:50%; width:50%;}
Css-list:
ul.a
{list-style-type:circle;}
ul.b
{list-style-type:square;}
ol.c
{list-style-type:upper-roman;}
ol.d
{list-style-type:lower-alpha;}
Psudo Element:
p::first-line
{
color:#ff0000;
font-variant:small-caps;
}
p::first-letter
{
color:#ff0000;
font-size:xx-large;
}
p.intro::first-letter
{
color:black;
font-size:200%;
}
h1::before
{
content:url(giphy.gif);
}
h2.abc::after
{
content:url(index.jpg);
}
h1::selection
{
color:red;
background:yellow;
}
Css borders:
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
Css Table:
table,th,td
{
border:1px solid green;
}
table
{
border-collapse:collapse;
width:100%;
}
th
{
height:50px;
text-align:center;
}
td
{
height:50px;
vertical-align:center;
text-align:center;
}
th,td
{
padding:15px;
border-bottom:5px solid #ddd;
}
tr:hover
{
background-color:#f5f5f5;
}
tr:nth-child(even)
{background-color:#f2f2f2;}
th
{
background-color: skyblue;
color:white;
}
Overlapped:
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
<img src="index.jpg">
Hey...!
</img>
Overflow:
div
{
width:150px;
height:250px;
background-color:skyblue;
overflow-x:hidden;
overflow-y:scroll;
}
Position
div.static
{
position:static;
border:3px solid #73AD21;
}
div.relative
{
position:relative;
left:300px;
}
div.fixed
{
position:fixed;
bottom:0;
right:0;
width:300px;
}
div.relativ
{
position:relative;
width:400px;
height:200px;
}
div.absolute
{
position:absolute;
top:80px;
right:0;
width:200px;
height:100px;
}
<div class="relativ">
this is Relative position
<div class="absolute">
this is absolute position
</div>
Position-sticky:
div.sticky
{
position:-webkit-sticky;
position:sticky;
top:0;
border:2px solid blue;
}
Set multiple <p> tags and set sticky in between them to see the result.
Css Dropdown:
<style>
.dropbtn
{
background-color : #4CAA50;
color : white;
padding : 16px;
font-size : 16px;
border : none;
cursur : pointer;
}
.dropdown
{
position : relative;
display : inline-block;
}
.dropdown-content
{
display : none;
position : absolute;
background-color : #F9F9F9;
min-width : 160px;
box-shadow : 0px 8px 16px 0px
rgba(0,0,0,0.2);
z-index : 1;
}
.dropdown-content a
{
color : black;
padding : 12px 16px;
text-decoration : none;
display : block;
}
.dropdown-content a:hover
{
background-color : #F1F1F1;
}
.dropdown:hover
.dropdown-content
{
display : block;
}
.dropdown:hover .dropdown
{
background-color : #3e8ea41;
}
</style>
</head>
<body>
<div class="dropdown">
<button class="dropbtn">
Dropdown
</button>
<div class="dropdown-content">
<a href="abcd.html"> Link 1 </a>
<a href="Position_Sticky.html"> Link2 </a>
<a href="Text_Shadow.html"> Link3 </a>
</div>
</div>
</body>
Vertical Nav Bar:

ul
{
list-style-type:none;
margin:0;
padding:0;
height:100%;
background-color:pink;
position:fixed;
overflow:auto;
}
li a
{
display:block;
width:60px;
color:red;
padding:5px 16px;
text-decoration:none;
text-align:center;
border-bottom:1px solid #555;
}
li a:hover
{
background-color:green;
color:white;
}
li a.active
{
background-color:grey;
color:white;
}
li a:last-child
{
border-bottom:none;
}
Set Multiple <p> Tags to see effects.
Horizontal Nav bar:

ul
{
list-style-type:none;
margin:0;
padding:0;
height:100%;
background-color:pink;
position:fixed;// to see this effect set mul p
overflow:auto;
}
li a
{
display:block;
width:60px;
color:red;
padding:5px 16px;
text-decoration:none;
text-align:center;
border-bottom:1px solid #555;
}
li a:hover
{
background-color:green;
color:white;
}
li a.active
{
background-color:grey;
color:white;
}
li a:last-child
{
border-bottom:none;
}

Css Notes

Uploaded by

Copyright:

Available Formats

Css Notes

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Css Notes

Uploaded by

Copyright:

Available Formats

Css Cascading stylesheet

Three Ways to Insert CSS

There are three ways of inserting a style sheet:

 External style sheet

<h1 style="color:blue;margin-left:30px;">This is a heading</h1>

Height and Width:

Vertical Nav Bar:

Horizontal Nav bar:

You might also like