Scribd
Upload
45 views

Css Notes

The document discusses various CSS selectors, properties and concepts like positioning, styling text, images, links, tables and forms. It provides syntax examples for styling elements with CSS including selectors, declarations and properties.

Uploaded by

Tanusha hande
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
45 views

Css Notes

The document discusses various CSS selectors, properties and concepts like positioning, styling text, images, links, tables and forms. It provides syntax examples for styling elements with CSS including selectors, declarations and properties.

Uploaded by

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

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;
border:3px solid #73AD21;
}
div.fixed
{
position:fixed;
bottom:0;
right:0;
width:300px;
border:3px solid #73AD21;
}
div.relativ
{
position:relative;
width:400px;
height:200px;
border:3px solid #73AD21;
}
div.absolute
{
position:absolute;
top:80px;
right:0;
width:200px;
height:100px;
border:3px solid #73AD21;
}
<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;
background-color:skyblue;
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;
background-color:skyblue;
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;
background-color:skyblue;
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;
}

You might also like