Scribd
Upload
31 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
Available Formats
Download as PDF, TXT or read online on Scribd
31 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
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