CSS position Property

 The position property specifies the type of positioning

method used for an element.
 The position property specifies the type of positioning
method used for an element (static, relative, absolute,
fixed, or sticky).
Position: static;

 HTML elements are positioned static by default.

 Static positioned elements are not affected by the top,
bottom, left, and right properties.
 An element with position: static; is not positioned in any
special way; it is always positioned according to the
normal flow of the page:
 Eg: This <div> element has position: static;
 div.static {
position: static;
border: 3px solid #73AD21;
}
position: relative;

 An element with position: relative; is positioned relative

to its normal position.
 Setting the top, right, bottom, and left properties of a
relatively-positioned element will cause it to be adjusted
away from its normal position. Other content will not be
adjusted to fit into any gap left by the element.
 Eg:
 div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
position: fixed;

 An element with position: fixed; is positioned relative to the

viewport, which means it always stays in the same place even
if the page is scrolled. The top, right, bottom, and left
properties are used to position the element.
 A fixed element does not leave a gap in the page where it
would normally have been located.
 div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
position: absolute;

 An element with position: absolute; is positioned relative

to the nearest positioned ancestor (instead of positioned
relative to the viewport, like fixed).
 However; if an absolute positioned element has no
positioned ancestors, it uses the document body, and
moves along with page scrolling.
 Note: A "positioned" element is one whose position is
anything except static.
position: absolute;
 div.relative {
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;
}
position: sticky;

 An element with position: sticky; is positioned based on

the user's scroll position.
 A sticky element toggles between relative and fixed,
depending on the scroll position. It is positioned relative
until a given offset position is met in the viewport - then it
"sticks" in place (like position:fixed).
CSS Layout - float

 With CSS float, an element can be pushed to the left or right,

allowing other elements to wrap around it. Float is very often used
for images, but it is also useful when working with layouts.
 How Elements Float
 Elements are floated horizontally; this means that an element can
only be floated left or right, but not up or down. A floated
element will move as far to the left or right as it can.
 Usually this means all the way to the left or right of the containing
element. The elements after the floating element will flow around
it. The elements before the floating element will not be affected. If
an image is floated to the right, a following text flows around it, to
the left.
 The float property can have one of the following values:
 left - The element floats to the left of its container
 right - The element floats to the right of its container
 none - The element does not float (will be displayed just
where it occurs in the text). This is default
 inherit - The element inherits the float value of its parent
 In its simplest use, the float property can be used to wrap
text around images.
 Eg: https://www.w3schools.com/css/css_float.asp
CSS box-shadow Property

 The box-shadow property attaches one or more shadows to

an element.
 #example1 {
box-shadow: 5px 10px;
}

 box-shadow have values: X(horizontal) Y(vertical) blur spread color

 #example2 {
box-shadow: 5px 10px #888888;
}
CSS text-shadow Property

 The text-shadow property adds shadow to text.

 h1 {
text-shadow: 2px 2px #ff0000;
}
What is Responsive Web Design?

 Responsive Web Design is about using HTML and CSS to

automatically resize, hide, shrink, or enlarge, a website, to
make it look good on all devices (desktops, tablets, and
phones):
 Web pages can be viewed using many different devices:
desktops, tablets, and phones. Your web page should look
good, and be easy to use, regardless of the device.
 Web pages should not leave out information to fit smaller
devices, but rather adapt its content to fit any device:
 Eg:
https://www.w3schools.com/css/tryit.asp?filename=tryres
ponsive_col-s
 Responsive Web Design - Media Queries

 What is a Media Query?

 Media query is a CSS technique introduced in CSS3.
 It uses the @media rule to include a block of CSS properties only if a certain
condition is true.
 <style>
 body {
 background-color: lightgreen;
 }

 @media only screen and (max-width: 600px) {

 body {
 background-color: lightblue;
 }
 }
 </style>
 CSS has various levels and profiles. Each level of CSS builds
upon the last, typically adding new features and typically
denoted as CSS1, CSS2, and CSS3.
 The first CSS specification to become an official W3C
Recommendation is CSS level 1, published in December 1996
 CSS level 2 was developed by the W3C and published as a
Recommendation in May 1998.
 A superset of CSS1, CSS2 includes a number of new
capabilities like absolute, relative, and fixed positioning of
elements and z-index, the concept of media types etc.
 CSS 3
 CSS level 3 is currently under development. The W3C
maintains a CSS3 progress report.