CSS_Day_Three (W3schools)

www.afghanhost.af - info@afghanhost.af
Instructor: Mohammad Rafi Haidari31-May-2014
CSS (Day 3)
 Margin
 Padding
 Positioning
 Float
 Navigation Bar
 Opacity / Transparency

CSS Margin
The margin clears an area around an element (outside the border). The margin does
not have a background color, and is completely transparent.
The top, right, bottom, and left margin can be changed independently using separate
properties. A shorthand margin property can also be used, to change all margins at
once.
Margin - Individual sides
In CSS, it is possible to specify different margins for different sides:
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

CSS Padding
The padding clears an area around the content (inside the border) of an element. The
padding is affected by the background color of the element.
The top, right, bottom, and left padding can be changed independently using
separate properties. A shorthand padding property can also be used, to change all
paddings at once.
Padding - Individual sides
In CSS, it is possible to specify different padding for different sides:
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

CSS Positioning
The CSS positioning properties allow you to position an element. It can also place an
element behind another, and specify what should happen when an element's content is
too big.
Elements can be positioned using the top, bottom, left, and right properties. However,
these properties will not work unless the position property is set first. They also work
differently depending on the positioning method.
There are four different positioning methods.
o Static Positioning
o Fixed Positioning
o Relative Positioning
o Absolute Positioning

CSS Positioning
Static Positioning
HTML elements are positioned static by default. A static positioned element is always
positioned according to the normal flow of the page.
Static positioned elements are not affected by the top, bottom, left, and right
properties.
Fixed Positioning
An element with fixed position is positioned relative to the browser window.
It will not move even if the window is scrolled:
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}

CSS Positioning
Relative Positioning
A relative positioned element is positioned relative to its normal position.
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}

CSS Positioning
Absolute Positioning
An absolute position element is positioned relative to the first parent element that has
a position other than static. If no such element is found, the containing block is <html>:
h2{
position:absolute;
left:100px;
top:150px;
}
Overlapping Elements
When elements are positioned outside the normal flow, they can overlap other
elements.
The z-index property specifies the stack order of an element (which element should
be placed in front of, or behind, the others).
z-index:-1;

CSS Float
Elements are floated horizontally, this means that an element can only be floated left
or right, 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:
img
{
float:right;
}

CSS Float
Floating Elements Next to Each Other
If you place several floating elements after each other, they will float next to each
other if there is room.
Here we have made an image gallery using the float property:
.thumbnail {
float:left;
width:110px;
height:90px;
margin:5px;
}
Turning off Float
Elements after the floating element will flow around it. To avoid this, use the clear
property.
.text_line{clear:both;}

CSS Navigation Bar
Having easy-to-use navigation is important for any web site.
With CSS you can transform boring HTML menus into good-looking navigation bars.
Navigation Bar = List of Links
A navigation bar needs standard HTML as a base.
In our examples we will build the navigation bar from a standard HTML list.
A navigation bar is basically a list of links, so using the <ul> and <li> elements
makes perfect sense:
<ul>
<li><a href="home.php">Home</a></li>
<li><a href="contact.php">Contact</a></li>
<li><a href="about.php">About</a></li>
</ul>

CSS Navigation Bar
Now let's remove the bullets and the margins and padding from the list:
ul{
list-style-type:none;
margin:0;
padding:0;}
Floating List Items
In the example above the links have different widths.
For all the links to have an equal width, float the <li> elements and specify a width
for the <a> elements:
li{float:left;}
a{
display:block;
width:60px;
}

CSS Image Opacity / Transparency
Creating transparent images with CSS is easy.
The CSS opacity property is a part of the W3C CSS3 recommendation.
The CSS3 property for transparency is opacity.
Img
{
opacity:0.4;
}
Mouse over the images:
img:hover
{
opacity:1.0;
}

CSS_Day_Three (W3schools)

More Related Content

What's hot

Viewers also liked

Similar to CSS_Day_Three (W3schools)

More from Rafi Haidari

Recently uploaded

CSS_Day_Three (W3schools)