Web Design Course: CSS lecture 4

Web Programming and
Design
CSS (Cascading Style Sheet)
By : Gheyath M. Othman

CSS Margin
2
• The CSS margin properties define the space around elements.
• It 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. Like
margin: 25px 50px 75px 100px;
top right bottom left
margin: 25px 50px 75px;
top right+left bottom
margin: 25px 50px;
top+bottom right+left
margin: 25px;
top+bottom+right+left
You can also use it separately: LIKE

CSS Margin
3
All CSS margin properties:
Property Description
margin A shorthand property for setting the margin properties in one declaration
margin-bottom Sets the bottom margin of an element
margin-left Sets the left margin of an element
margin-right Sets the right margin of an element
margin-top Sets the top margin of an element

CSS Margin
4
Example-1- Margin: Margin
<!DOCTYPE html><html><head>
<style>
p.all {
margin: 5px;
}
p.ex {
margin: 100px 150px 100px 300px;
}
</style>
</head>
<body>
<p>This is a paragraph with no specified margins</p>
<p class="all">This is a paragraph with specified
margins.all in one</p>
<p class="ex">This is a paragraph with specified
margins.</p>
</body></html>

CSS Padding
5
• The CSS padding properties define the space between the element border and
the element content.
• Padding clears an area around the content (inside border) of 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. Like
padding: 25px 50px 75px;
top right+left bottom
padding: 25px;
top+bottom+right+left
Also you can use it separately. LIKE

CSS Padding
6
padding: 25px 50px;
top+bottom right+left
All CSS padding properties:
padding A shorthand property for setting all the padding properties in one
declaration
padding-bottom Sets the bottom padding of an element
padding-left Sets the left padding of an element
padding-right Sets the right padding of an element
padding-top Sets the top padding of an element
padding: 25px 50px 75px 100px;
top right bottom left

CSS Padding
7
Example -1- :padding
<style>
p { background-color: yellow; }
p.all
{ padding: 25px; }
p.padding
{
padding: 25px 50px 75px 100px;
}
</style>
</head>
<body>
<p>This is a paragraph with no specified padding.</p>
<p class="all">This is a paragraph with specified
paddings.</p>
<p class="padding">This is a paragraph with specified
paddings.</p>
</body></html>
Bottom padding
Out_padd_border_margin

CSS Dimensions
8
All CSS Dimension properties:
The CSS dimension properties allow you to control the height and width of an
element.
height Sets the height of an element
max-height Sets the maximum height of an element
max-width Sets the maximum width of an element
min-height Sets the minimum height of an element
min-width Sets the minimum width of an element
width Sets the width of an element
example_dimen2

CSS Dimensions
9
Example -1- :
<style>
div {
max-width: 500px;
height: 100px;
border: 3px solid #8AC007;
}
</style>
</head>
<body>
<div>
This div element has a height of 100px and a max-width
of 500px. This div element has a height of 100px and a
max-width of 500px. This div element has a height of
100px and a max-width of 500px. This div element has a
height of 100px and a max-width of 500px.
</div>
</body></html>

CSS Layout (overflow)
10
The overflow property specifies what to do if the content of an element exceeds
the size of the element's box. Syntax
overflow: auto, hidden, scroll

Example
11
e2_overflow
<style>
div.scroll { background-color: #00FFFF; width: 100px;
height: 100px; overflow: scroll; }
div.hidden { background-color: #00FF00; width: 100px;
height: 100px; overflow: hidden; }
div.auto { background-color: #00FF00; width: 100px;
height: 100px; overflow: auto; }
</style>
</head> <body>
<p>Result with overflow:scroll</p>
<div class="scroll">You can use the overflow property when you want
to have better control of the layout.</div>
<p>Result with overflow:hidden</p>
<div class="hidden">You can use the overflow property when you
want to have better control of the layout. The default value is
visible.</div>
<p>Result with overflow:auto</p>
<div class="auto">You can use the overflow property when you want
to have better control of the layout. The default value is visible.</div>
</body></html>
e2_overflow

CSS Layout (Float & Clear)
12
• The float property specifies whether or not an element should float.
• The float property can be used to wrap text around images.
Float property:
float: left, right, none
e1_float

13
Example-1-: e1_float
<style>
img { float: right;
margin: 0 0 10px 10px; }
</style>
</head>
<body>
<p>The image will float to the right in the paragraph,
and the text in the paragraph will wrap around the image.
<img src="../smiley.gif" alt="smiley.com" width="100"
height="140">
In this example, the image will float to the right in the paragraph,
and the text in the paragraph will wrap around the image.In this
example, the image will float to the right in the paragraph, and
the text in the paragraph will wrap around the image.In this
the text in the paragraph will wrap around the image.In this
the text in the paragraph will wrap around the image.</p>
</body></html>

14
• The clear property is used to control the behavior of floating elements.
• Elements after a floating element will flow around it. To avoid this, use the
clear property.
• The clear property specifies on which sides of an element floating elements
are not allowed to float.
Clear property:
clear: left, right, both, none

15
Example-1-: e2_clear
<style>
.div1,.div3 { float: left; width: 100px;
height: 50px; margin: 10px;
border: 3px solid #8AC007; }
.div2 { border: 1px solid red; }
.div4 { border: 1px solid red; clear: left; }
</style>
</head><body>
<h2>Without clear</h2><div class="div1">div1</div>
<div class="div2">div2 - Notice that the div2 element is after div1,
in the HTML code. However, since div1 is floated to the left, this
happens: the text in div2 is floated around div1, and div2
surrounds the whole thing.</div>
<h2>Using clear</h2><div class="div3">div3</div>
<div class="div4">div4 - Using clear moves div4 down below the
floated div3. The value "left" clears elements floated to the left.
You can also clear "right" and "both".</div>
</body></html>

CSS Layout (Display Property)
16
• The display property is the most important CSS property for controlling
layout.
• The display property specifies if/how an element is displayed.
• Every HTML element has a default display value depending on what type
of element it is. The default display value for most elements
is block or inline.

CSS Layout (Display :inline-block)
17
• It has been possible for a long time to create a grid of boxes that fills the
browser width and wraps nicely (when the browser is resized), by using
the float property.
• However, the inline-block value of the display property makes this even
easier.
• inline-block elements are like inline elements but they can have a width and
a height.
• Example using float once and inline-block another, it has the same result.
.floating-box {
display: inline-block;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #8AC007;}
.floating-box {
float: left;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #8AC007;}
e4-e3_inline-block+float

18
Div
Examples of block-level elements: <div>
<h1> - <h6>
<p>
A block-level element always starts on a new line and takes up the full width
available (stretches out to the left and right as far as it can).
Block-level Elements:
Inline Elements:
An inline element does not start on a new line and only takes up as much width
as necessary. This is a paragraph.an inline <span> element inside
Examples of Inline elements:
• <span>
• <a>
• <img>

Block-level & Inline Elements
19
Example:
<style>
.ul1 li{
display: inline;
}
.ul2 li{
display: block;
}
</style>
</head>
<body><p>Display a list of links as a horizontal menu:INLINE</p>
<ul class="ul1">
<li><a href="#home.html" >HTML</a></li>
<li><a href="#home.html" >CSS</a></li>
<li><a href="#home.html" >JavaScript</a></li></ul>
<p>Display a list of links as a vertical menu:BLOCK</p>
<ul class="ul2">
<li><a href="#home.html" >HTML</a></li>
<li><a href="#home.html" >CSS</a></li>
<li><a href="#home.html" >JavaScript</a></li>
</ul>
</body></html>
e1_Inline-block

20
Hide an Element - display:none or visibility:hidden
• Hiding an element can be done by setting the display property to none. The
element will be hidden, and the page will be displayed as if the element is not
there. h1.hidden {
display: none;
}
h1.hidden {
visibility: hidden;
}
• visibility:hidden; also hides an element However, the element will still take up
the same space as before. The element will be hidden, but still affect the
layout.

Block-level & Inline Elements
21
Example:
<style>
h1.hidden {
display: none;
}
h2.hidden {
visibility: hidden;
}
</style>
</head>
<body>
<h1>This is a visible heading</h1>
<h1 class="hidden">This is a hidden heading</h1>
<p>Notice that the h1 element with display: none; does not take
up any space.</p>
<hr>
<h2>This is a visible heading</h1>
<h2 class="hidden">This is a hidden heading</h1>
<p>Notice that the h2 element with visibility hidden; take up a
space.</p>
</body></html>
display+visiblity
Doesn’t Take the space

Web Design Course: CSS lecture 4

Recommended

More Related Content

What's hot (20)

Similar to Web Design Course: CSS lecture 4 (20)

Recently uploaded (20)

Web Design Course: CSS lecture 4