CSS properties for padding
property description
padding padding on all 4 sides
padding-bottom padding on bottom side only
padding-left padding on left side only
padding-right padding on right side only
padding-top padding on top side only
Complete list of padding properties
http://www.w3schools.com/css/css_reference.asp#padding
CS380
Padding example 1
2
p { padding: 20px; border: 3px solid black; }
h2 { padding: 0px; background-color: yellow; }
CSS
This is a first paragraph.
This is a second paragraph.
This is a heading
output
CS380
Padding example 2
3
p {
padding-left: 200px; padding-top: 30px;
background-color: fuchsia;
} CSS
This is a first paragraph
paragraph.
This is a second paragraph
output
each side's padding can be set individually
notice that padding shares the background color of the
element
CSS properties for margins
4
property description
margin margin on all 4 sides
margin-bottom margin on bottom side only
margin-left margin on left side only
margin-right margin on right side only
margin-top margin on top side only
Complete list of margin properties
http://www.w3schools.com/css/css_reference.asp#margin
CS380
Margin example 1
5
p {
margin: 50px;
background-color: fuchsia;
} CSS
This is a first paragraph
This is a second paragraph
output
notice that margins are always transparent
CS380
Margin example 2
6
p {
margin-left: 8em;
background-color: fuchsia;
} CSS
This is a first paragraph
This is a second paragraph
output
each side's margin can be set individually
CS380
CSS properties for dimensions
7
p { width: 350px; background-color: yellow; }
h2 { width: 50%; background-color: aqua; }
CSS
This paragraph uses the first style above
An h2 heading
output
property description
how wide or tall to make this element
width, height
(block elements only)
max-width, max-height, max/min size of this element in given
min-width, min-height dimension
1
The CSS Box Model
Padding - Margin
8
Every element composed
of:
content
a border around the
element
padding between the
content and the border
a margin between the
border and other content
CS380
The CSS Box Model (cont.)
9
padding-top: 10px;
width = content width + padding-bottom: 10px;
L/R padding + L/R padding-right: 10px;
padding-top: 10px;
border + L/R margin padding: 10px;
padding 10px 10px 10px 10px;
height = content height padding 10px 10px;
+ T/B padding + T/B padding: auto;
border + T/B margin
IE6 doesn't do this
right
margin-top: -10px
margin: auto
CS380
div{
width: 300px;
height: 100px;
background: skyblue;
border: 2px solid red;}
div{
width: 300px;
height: 100px;
background: skyblue;
border: 2px solid red;
padding: 20px;}
div{
width: 300px;
height: 100px;
background: skyblue;
border: 2px solid red;
padding: 20px;
margin: 20px;}
<body>
10 <div> WEB PROGRAMMING </div> </body>
CS380
Padding: 0 , Margin 0
All element in the body
div{
width: 200px;
height: 200px;
background: yellowgreen;
border: 2px solid black;}
*{
padding: 0;
margin: 0;}
11 CS380
2 Background
<style type="text/css">
div{
width: 400px;
height: 800px;
border: 1px solid green;
background-color: skyblue;
background-image:url ("eid2.jpeg") ;
background-size:150px 150px;
background-repeat: no-repeat;
background-position: left top / 10px 10px;
background-attachment: fixed;}
</style>
<body>
12 <div></div> </body> CS380
3
Links
<a href="www.google.com.eg">Google</a><br>
<a href="www.Youtupe.com.eg">Youtupe</a><br>
<a href="www.Yahoo.com.eg">Yahoo</a><br>
<a href="www.Gmail.com.eg">Gmail</a>
a{
text-decoration: none;
color: red;
cursor: auto;}
13 CS380
CSS ID selectors
14
class description
:active an activated or selected element
an element that has the keyboard
:focus
focus
:hover an element that has the mouse over it
:link a link that has not been visited
:visited a link that has already been visited
the first letter of text inside an
:first-letter
element
:first-line the first line of text inside an element
an element that is the first one to
:first-child
appear inside another
CS380
a:hover{
color: green;
font-size: 30px;}
p:first-line {
color: red;
font-size: 30px;}
p:first-letter {
color: red;
font-size: 30px;}
15 CS380
a:focus
{
color: red;
font-size: 30px;}
<body>
Name: <input class="a"
type="text" name="xx">
</body>
.a:focus{
color: red;
Name: <input class="a" type="text" name="">
border: 2px solid green;
<br>
background: yellow;} Male:<input class="b" type="checkbox"
.b:checked{ name="">
Female:<input class="b" type="checkbox"
opacity: 0;}
name="">
16
a:active
{
color: green;
font-size: 30px;}
a:visited
{
color: black;
font-size: 30px;}
17 CS380
Add Content
<p>And the web just isn't the same without
you. Let's get you back online!</p>
p{
background: yellow;
font-size: 20px; }
p:after{
content: " GOOD";}
p{
background: yellow;
font-size: 20px; }
p:before{
content: "GOOD ";}
18
<p>And the web just isn't the same without
you.</p>
p{
background: skyblue;
height: 50px;
width: 500px;
padding: 30px;
position: relative;
}
p:before{ p:before{
content: ""; content: "";
height: 100%; height: 15px;
width: 15px; width: 100%; bottom: 0;
background: green; background: green;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0;} left: 0;} right: 0;
19
4
Inline- Block
div{
background: yellow;
border: 1px solid black;
margin: 5px;
width: 300px;
height: 50px;
Padding: 10px}
span{
background: yellow;
border: 1px solid black;
width: 300px;
height: 50px; padding: 30px;
padding: 0 30px;
padding: 10px // only left and right
margin: 5px; } // only left and right
20 CS380
5 The display property
21
h2 { display: inline; background-color: yellow; }
CSS
output
property description
sets the type of CSS box model
display
an element is displayed with
values: none, inline, block, run-in, compact,
...
use sparingly, because it can radically alter the page layout
CS380
The display property (cont.)
22
p.secret {
visibility: hidden;
} CSS
output
hidden elements will still take up space onscreen, but will not
be shown
to make it not take up any space, set display to none instead
can be used to show/hide dynamic HTML content on the page
in response to events
CS380
The display property
23
<ul id="topmenu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul> HTML
#topmenu li {
display: inline;
border: 2px solid gray;
margin-right: 1em;
} CSS
output
lists and other block elements can be displayed inline
flow left-to-right on same line
width is determined by content
Display
Inline, block , Inline-block
div{
background: yellow;
border: 1px solid black;
margin: 5px;
width: 300px;
height: 50px;
Padding: 10px;
display: inline;}
span{
background: green;
border: 1px solid black;
margin: 5px;
width: 300px;
height: 50px; padding: 30px;
padding: 10px; padding: 0 30px;
display: block;}
24 CS380
div{
background: yellow;
border: 1px solid black;
margin: 5px;
width: 200px;
height: 50px;
Padding: 10px;
display: inline-block;}
span{
background: green;
border: 1px solid black;
margin: 5px;
width: 200px;
height: 50px;
padding: 10px;
display: inline-block;}
25 CS380
6 Display - Visibility
.d1{ none, hidden
background: yellow;
border: 1px solid black;
height: 30px;}
.d2{
background: red;
border: 1px solid black;
height: 30px;}
.d3{
Hidden and not fount in its place
background: green;
border: 1px solid black;
height: 30px;
display: none;
26 visibility: hidden;} Hidden but its place found
7 The overflow property (cont.)
27
property description
specifies what to do if an
element's content is too large;
overflow
can be auto, visible, hidden, or
scroll
CS380
Overflow
<div>
<h3>First One</h3>
<h3>Second Two</h3>
<h3>Third Three</h3>
</div>
div{
width: 200px;
height: 200px;
background: skyblue;
overflow: hidden;
overflow: scroll;
overflow: auto;}
28
List
8
<ol>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
</ol>
Order to unordered
ol{
list-style-type: square ;
list-style-type: none;
list-style-position: inside;
list-style-image: url("xx1.jpg")}
list-style: square inside url("xx1.jpg")
li{
background: skyblue;
}
29
9 CSS properties for borders
30
h2 { border: 5px solid red; }
CSS
This is a heading.
output
property description
thickness/style/size of border on all 4
border
sides
Thickness: px, pt, em, or thin, medium, thick
Style: none, hidden, dotted, dashed, double,
groove, inset, outset, ridge, solid
Color: red, green, blue,
More border properties
31
property description
specific properties of border on
border-color, border-width, border-style
all 4 sides
border-bottom, border-left, all properties of border on a
border-right, border-top particular side
border-bottom-color, border-bottom-style,
border-bottom-width, border-left-color,
border-left-style, border-left-width,
properties of border on a
particular side
border-right-color, border-right-style,
border-right-width, border-top-color,
border-top-style, border-top-width
Complete list of border properties
http://www.w3schools.com/css/css_reference.asp#border
10
Why do we need page sections?
Sections of a page <div>
32
Style individual elements, groups of elements,
sections of text or of the page
Create complex page layouts
CS380
11 Float
.a{
border: 1px solid black; <body>
width: 300px; <div class="a">First</div>
height: 100px; <div class="b">Second</div>
background: skyblue; </body>
padding: 10px;
margin: 10px;
float: right;
}
.b{
border: 1px solid black;
width: 300px;
height: 100px;
background: green;
padding: 10px;
margin: 10px;
}
.a{
border: 1px solid black;
Float - clear
width: 300px;
height: 100px;
background: skyblue;
padding: 10px;
margin: 10px; <div class="a">First</div>
float: right; <div class="b">Second</div>
<div class="c"><img src="xxx.jpg"
} width="130px" height="130px"></div>
.b{
border: 1px solid black;
width: 300px;
height: 100px;
background: green;
padding: 10px;
margin: 10px;
float: left;
}
34
<div class="a">First</div>
<div class="b">Second</div>
<p class="x"></p>
<div class="c"><img src="xxx.jpg"
width="130px" height="130px"></div>
.x{ .c{
clear: both; clear: both;
35 } }
11 Float
<div class="all">
<div>First</div>
<div>Second</div>
<div>Third</div>
<div>Fourth</div>
</div>
.all div{
float: left;
width: 20%;}
.all div{
float: left;
width: 20%;
background: yellow;
margin: 2px;}
36
.all{
background: green;}
.all div{
float: left;
width: 20%; بيخرج عناصرة خارج اطار العمل
background: yellow;
margin: 2px;}
.all{
background: green;}
.all div{}
<div class="all">
<div>First</div>
<div>Second</div>
<div>Third</div>
<div>Fourth</div>
</div>
<p>WELCOME</p> height: 50px;
37
<style type="text/css">
.all{
background: green;}
.x{
clear: both;}
<body>
.all div{
<div class="all">
float: left;
<div>First</div>
width: 20%;
<div>Second</div>
background: yellow;
<div>Third</div>
margin: 2px;}
<div>Fourth</div>
</style>
<p class="x" ></p>
</div>
<p>WELCOME</p>
38
</body>
12 The position property (examples)
39
div#ad {
position: fixed;
right: 10%;
top: 45%;
} CSS
property value description
static default position
offset from its normal
relative
static position
position a fixed position within its
absolute
containing element
a fixed position within
fixed
the browser window
top, bottom, left, right positions of box's corners
Relative
<body>
<div class="f">First</div>
<div class="s"> Second </div>
</body>
.f{
width: 200px;
height: 40px;
background: yellow;
position: relative;
top: 200px;}
.s{
width: 200px;
height: 40px;
background: green;} Relative: moved from the original point (its place)
40
.f{
width: 200px;
height: 40px;
background: yellow;
position: relative;
top: 200px;
left: 200px;}
.s{
width: 200px;
height: 40px;
background: green;}
41 CS380
.f{
width: 200px;
Absolute
height: 40px;
background: yellow;
position: absolute;
top: 0px;
left: 0px;}
.s{
width: 200px;
height: 40px;
background: green;}
.f{
width: 200px;
height: 40px;
background: yellow;
position: absolute;
Absolute: moved from the browser (its father)
top: 100px;
left: 100px;}
42
.f{
width: 200px;
height: 40px;
background: yellow;
position: absolute;
top: 100px;
right: 0;}
43
<div class="all"> Moved based on div all
<div class="s"> Second </div>
</div>
.s{
width: 50px;
height: 20px;
background: yellow;
position: absolute;
top: 0;
right: 0;}
.all{ .s{
width: 400px; width: 50px;
height: 200px; height: 20px;
background: yellow;
border: 2px solid green;
position: absolute;
position: relative;}
bottom: 0;
right: 50px;}
44
Fixed
<div>
<h4>WEB PROGRAMMING</h4>
</div>
div{
width: 200px;
height: 20px;
background: yellow;
position: fixed;
right: 10%;
top: 45%;}
45
Fixed
<div class="all">HHHHHH ……… H</div>
<div class="s"> Second </div>
.s{
width: 50px;
height: 20px;
background: yellow;
position: fixed;
bottom: 0;
right: 50px;}
.all{
width: 400px;
height: 200px;
border: 2px solid green;}
46
.s{
width: 50px;
height: 20px;
background: yellow;
position: fixed;
bottom: 50px;
right: 50px;}
.all{
width: 400px;
height: 200px;
border: 2px solid green;
text-align: justify;
padding: 10px;
overflow: auto;}
47
.s{
width: 50px;
height: 20px;
background: yellow;
position: fixed;
top: 50px;
right: 50px;}
.all{
width: 400px;
height: 1200px;
border: 2px solid green;
position: relative;}
.s{width: 50px;
height: 20px;
background: yellow;
position: fixed;
top: 150px;
right: 250px;}
.all{width: 400px;
height: 1200px;
border: 2px solid green;}
48
Static
div{
width: 200px;
height: 20px;
background: yellow;
position: static;
left: 200px;
Ignored
bottom: 200px;
49
.s{
width: 100px; Sticky
height: 20px;
background: yellow;
position: sticky;
top: 0/ 50px}
.r{
width: 100px;
height: 20px;
background: green;}
<body>
------------------------
------------------------
<div class="r">First</div>
<div class="r">First</div>
<div class="s">Second</div>
<div class="r">First</div>
<div class="r">First</div>
-----------------------
----------------------- </body>
50
Absolute positioning
51
#sidebar {
position: absolute;
left: 400px;
top: 50px;
} CSS
removed from normal flow
positioned relative to the block
element containing them
actual position determined by
top, bottom, left, right
should often specify a width
property as well
CS380
Relative positioning
52
#area2 { position: relative; }
CSS
absolute-positioned elements are
normally positioned at an offset
from the corner of the overall web
page
to make the absolute element to
position itself relative to some other
element's corner, wrap the absolute
element in an element whose position
is relative
CS380
Fixed positioning
53
#area2 { position: relative; }
CSS
removed from normal flow
positioned relative to the browser
window even when the user scrolls
the window, element will remain in
the same place
CS380
13 Alignment vs. float vs. position
54
1. If possible, lay out an element by aligning its
content
horizontal alignment: text-align
set this on a block element; it aligns the content within it
(not the block element itself)
vertical alignment: vertical-align
set this on an inline element, and it aligns it vertically within
its containing element
2. If alignment won't work, try floating the element
3. If floating won't work, try positioning the element
absolute/fixed positioning are a last resort and
should not be overused
Details about inline boxes
55
Size properties (width, height, min-width,
etc.) are ignored for inline boxes
margin-top and margin-bottom are ignored,
but margin-left and margin-right are not
ignored
CS380
Details about inline boxes
56
the containing block box's text-align property
controls horizontal position of inline boxes within it
text-align does not align block boxes within the page
each inline box's vertical-align property
aligns it vertically within its block box
CS380
13
Media Query
<style type="text/css">
.a{
display: inline-block;}
<center>
.a{width: 200px;
<div class="a">First</div>
height: 30px;
<div class="a">Second</div>
background: blue;
</center>
margin: 2px;}
@media screen and (max-width: 400px){
.a{display: block;
width: 100%;}
body{
background: skyblue;}}
57 </style>
@media screen and (min-width:401px)and(max-
width:600px){
body{
background: green;}}
@media screen and (min-width:601px)and(max-
width:800px){
body{
background: yellow;}}
58 CS380
