Scribd
Upload
36 views

Week 5

- CSS treats each HTML element as its own box that can be styled with properties like borders, margins, padding - Elements can be displayed as block-level or inline and this affects how they take up space on the page - Lists can be styled with different list styles and the position of bullets/numbers can be adjusted - Elements can be positioned statically, relatively, absolutely or floated on the page using box offset properties like z-index - Page layout is constructed with building blocks like inline and block elements, and columns, floats, and positioning schemes.

Uploaded by

ah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
36 views

Week 5

- CSS treats each HTML element as its own box that can be styled with properties like borders, margins, padding - Elements can be displayed as block-level or inline and this affects how they take up space on the page - Lists can be styled with different list styles and the position of bullets/numbers can be adjusted - Elements can be positioned statically, relatively, absolutely or floated on the page using box offset properties like z-index - Page layout is constructed with building blocks like inline and block elements, and columns, floats, and positioning schemes.

Uploaded by

ah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 23

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.

You might also like