Week 5
Tuesday, October 27, 2020 2:01 AM
White Space & Vertical Margin:
• The padding and margin properties are very helpful in
various item on the page.
Box Must Contain:
• Border
• Margin
• Padding
Spaces between boxes or margin are called: White Space
If Vertical Margin is set to Zero: No spaces will occur be
Border width how? 'Code'
P.one {
Border-width: 2px;}
P.two {
Border-width: thick;}
P.three {
adding space between
etween each of the boxes
P.one {
Border-width: 2px;}
P.two {
Border-width: thick;}
P.three {
Border-width: 1px 4px 12px 4px;} -> First=Top. Second=
Fourth=Left
P {
Width: 250px;
Border: 3px dotted #0088d;}
Padding?
P {
Width: 275px;
Border: 2px solid #0088dd;}
P.example {
Padding: 10px;}
-> ( Easier to read due to the availability of paddin
Body {
Text-allign: center;}
P {
Width: 300px;
Padding: 50px;
Border: 20px solid #00888dd;}
P.example {
Margin: 10px auto 10 px auto; " -> First=Top. Second=B
Text-allign: left;}
P.example {
Margin: 20px;}
Change inline / block display
Li {
Display: inline;
Margin-right: 10px;}
=Right. Third=Bottom.
ng )
Bottom "
Change inline / block display
Li {
Display: inline;
Margin-right: 10px;}
Li.coming-soon {
Display: none;}
-> Hidden for users, but it is there ready to be relea
Also you can do the following:
Li.coming-soon {
visibility: hidden;}
-> Users will be able to see there is an empty list, w
on
P {
Border-radius: 10px;}
-> Determine how rounded the corner is
Summary:
- CSS treats each HTML element as it has its own box
- You can use CSS to control the dimensions of a box
- You can also control borders, margins, and padding for
- It is possible to hide elements using the display and
- Block-Level boxes can be made into inline boxes, and i
block-level boxes
- Legibility can be improved by controlling the width of
and the leading
- CSS 3 has introduced the ability to create image borde
5-2)
Logo.gif -> is the website logo
ased
which will be shown later
r each box with CSS
visibility properties
inline boxes made into
f boxes containing text
ers and rounded borders
5-2)
Logo.gif -> is the website logo
- Unordered list 'ul' can be done shown in one horizonta
li {
Display: inline;
Margin: 0px 3px;}
-> Will make them appear in one-line Horizontally
The Example:
'HTML'
List
Unordered List
Paragraph
'CSS'
ally line
'CSS'
#ffffff -> is a white color 'HEX'
-> To make a Tap looks red even if the mouse isn't on it
a:hover, a.on {
Color: #cc3333;
Background-color: #ffffff;}
A {
Text-Transform: Uppercase;
Text-Decoration: none;
Padding: 6px 10px 5px 15px;}
-> UPPERCASE Function will make the entire 'word' 'CAPITAL
LIZED'
Text-Transform: Uppercase;
Text-Decoration: none;
Padding: 6px 10px 5px 15px;}
-> UPPERCASE Function will make the entire 'word' 'CAPITAL
5-3) Lists, Tables & Forms
ol {
List-style-type: lower-roman;}
-> "Lower-Roman" To change the sort from "1- 2-" to "i, iV
Unordered List "Style Options"
- None - None is displayed
- Disc - Circled & Filled-up the circle ""داﯾرة ﻣﻠﯾﺎﻧﺔ
- Circle - Like the letter ' O '
- Square - Basically a Square Symbol
Ordered List
- Decimal - 1 , 2 , 3
- Decimal-Leading-Zero - 01 , 02 , 03
- Lower-Alpha a, b, c
- Upper-Alpha A, B, C
- Lower-Roman i , ii
- Upper-Roman I, II, III
ul {
List-style-image: url ( "star.png " );}
li {
Margin: 10px 0px 0px 0px;}
Position The Marker:
ul {
Width: 250px;}
li {
Margin: 10px;}
ul.illiminations {
LIZED'
V"
ul {
Width: 250px;}
li {
Margin: 10px;}
ul.illiminations {
List-style-position: outside;}
ul.season {
List-style-position: inside;}
-> INSIDE means the Bullet Points will be inside the t
While OUTSIE does the exact opposite like what we used
With typical Bullet Points
ul {
List-style: inside cicle; -> like letter 'o' discuss
Width: 300px;}
li {
Margin: 10px 0px 1px 5px;}
5-4
a {
Cursor: move;}
-> Move Symbol
5-5) Layout
Building Blocks:
text
d to do
sed above style
5-5) Layout
Building Blocks:
○ Inline
○ Block-Level
The Position of Elements:
○ Normal Flow
§ Don’t need to emphsize it since it's HTML's def
○ Relative Positioning
• P.example {
Position: Relative;
Top: 10px
Left: 100px
○ Absolute Positioning
• P.example {
Position: Absolute;
Top: 0px
Left: 500px
Width: 250px;}
.clear {
Clear: left;}
-> The Paragraph will begin from a new space or row, its l
.Clear {
Clear: -
-> Can be left, right, both or none
Box Offset Properties:
○ Fixed Positioning
○ Floating Positioning
Z-index: Solve any overlap for the heading
Floating Elements:
fault
left side will be clear
Z-index: Solve any overlap for the heading
Floating Elements:
See the floating Right p
Multi-Column:
○ Width
• This sets the the width of the column
○ Float
• This positions the columns next to each other
○ Margin
○ Width
• This sets the the width of the column
○ Float
• This positions the columns next to each other
○ Margin
• This creates a gap between the columns
<div> is used to create columns
Resolution - Refers to the number of dots a screen shows p
Note:
The higher resolution the smaller text appears!!
Designers often creates 960-1000 pixels wide
570-600 in one pic without scrolling 'Above the Fold'
Many designers still try to let the user know what the sit
top 570-600 pxs
Fixed width: Size remain constant
Liquid Layouts: Tends to stretch or shrink and contract as
browser's size
Often by %
Note "RULES":
As with all style sheets, if two rules apply to the sa
that appear later in a document will take precedence o
Summary:
per inch
te is all about within the
s the user change the
ame element then rules
over previous rules.
