Science 7 - LAND and SEA BREEZE and its Characteristics
Css web side
1. (MuhammadSHarif)
26-FEB-19
1
Complete C.S.S Introduction to Advance
Course
It is written by Muhammad Sharif Software
Engineer Governement College University
Faisalabad.
Type equation here.
What is CSS
CSS stands for Cascading Style Sheets. It is a
style sheet language which is used to describe
the look and formatting of a document written
in markup language. It provides an additional
feature to HTML.
2. (MuhammadSHarif)
26-FEB-19
2
Three ways of addition of CSS in Html page.
1.Inline CSS
2.Internal CSS
3.External CSS
*Comments are the same thing as we read in
all over the programming . #// and /*
There are several different types of selectors in
CSS.
1.CSS Element Selector (p{text-
align:center;color:blue;})
2.CSS Id Selector(#par{text-
align:center;color:red;})
3. (MuhammadSHarif)
26-FEB-19
3
3.CSS Class Selector(.par{text-
align:center;color:red;})
4.CSS Universal Selector(*{text-
align:center;border:1px;margin:2;})
5.CSS Group Selector(h1,h2,h3,p{text-
align:center;})
6.CSS Particular class element(p.class name
{panding:12;} in many same classes name
exist)
7.Descendant Selectors (ul.menu li
a{color:red;} <ul class="menu"><li><a
href="#">Home</a></li>)
8.Child Selector is represent (ul > li ol{list-
style:square;})
9.Adjacent Sibling selectors(p+h1{color:blue;
or ul.par+h2{ color:#f0f;this colred only h1
and h2 due to adjacent of p and ul.par.}})
10. General sibling selector (It work similar
to adjacent sibling but It color allheading of
ul)
4. (MuhammadSHarif)
26-FEB-19
4
Back Ground Image and
colors
Body {
Background-image:url(“gradient.png”);
Background-repeat:no-repeat-x;”bg:fixed;”
overflow:scroll; background-position: 100%
top; margin-left:100px;}
<h1 style="background-color:hsla(9, 100%,
64%, 0.5); rgb(255, 255, 0)">..in line
style..</h1>
21. (MuhammadSHarif)
26-FEB-19
21
Fixed position
<p class="pos_fixed">This is the fix position
ed text.</p>
p.pos_fixed {
position:fixed;
top:50px;
right:5px;
color:blue;
}
z-index It is used to set stack order of an element. number, auto, inherit
It is also a postion propertie
Layout in Css
<style>
.header{margin:-8px -8px 0px;background-image:linear-
gradient(145deg,#7379ff,#b524ef);color:white;text-align:center;padding:10px;}
.container{width:100%}
.left{width:15%;float:left;}
.body{width:65%;float:left;background-color:pink;padding:5px;}
.right{width:15%;float:left;}
.footer{margin:-8px;clear:both;background-image:linear-
gradient(145deg,#7379ff,#b524ef);color:white;text-align:center;padding:10px;}
<body>
<div class="header"><h2>JavaTpoint</h2></div>
<div class="container">