>> The “Box” Model
Pre-requisite
•
•
•
•
Create a new folder called Week5
Create a new html file and name it box.html
Create a new css file and name it style.css
Link the css file to the html file
– <link rel=“stylesheet” href=“style.css”/>
Recall
• Styling in CSS
– Static Styling
• Selectors
– Type or Element | ID | Class
• Combining Selectors using “,”
• Inheritance Selectors
– Descendants | Child | General Sibling | Adjacent Sibling
• Attribute Selectors
– Dynamic Styling
• Pseudo-class (:)
– Link Pseudo-class (link | visited | hover | active)
– Form Pseudo-class (hover | focus | required | valid | invalid)
• Pseudo-elements (::)
– first-letter | first-line
Types of Elements (display type)
Elements
Block
Web-based Systems | Misbhauddin
Inline
4
The”BOX” Model
• CSS treats each element as a rectangular box
– Eg. <h1>Welcome</h1>
Margin Area
Border Area
Padding Area
Welcome
Content Area
Web-Based Systems - Misbhauddin
5
Border
• Every element has a border around it
• Border Properties
– border-width: <length> | thin | medium | thick
– border-color: <color> | transparent
– border-style: none | dotted | dashed | solid | double |
groove | ridge | inset | outset
border-top
border-left
border-bottom
border-right
• Can combine border properties with the side
– Eg. border-top-style, border-bottom-color
Web-Based Systems - Misbhauddin
6
TRY NOW
Add an h1 element with “your name”
Add a paragraph element with “Student at CCSIT-KFU”
Edit CSS File
Set the body tag to border {1px solid black}
Set the h1 tag to border {1px solid red}
Set the p tag to border {1px solid blue}
Web-Based Systems - Misbhauddin
7
Padding
• Padding: Space between the content and the border
• Padding Properties
– padding: <length> | <percentage-box-width>%
padding
Content of the Box
box
• Separate paddings for each side
padding-top
padding-left
Content
padding-right
padding-bottom
Web-Based Systems - Misbhauddin
8
TRY NOW
Edit CSS File
Add padding to your paragraph tag
Web-Based Systems - Misbhauddin
9
Margin
• Margin: Space between the border and other
elements
• Margin Properties
– margin: <length> | <percentage-box-width>%
margin
Content
• Separate Margin for each side
margin-top
margin-left
Content
border
margin-right
margin-bottom
Web-Based Systems - Misbhauddin
10
TRY NOW
Edit CSS File
Increase or decrease the margin between the h1 tag and the
p tag
Web-Based Systems - Misbhauddin
11
Display
• Display Properties
– display: inline | block | none
Element 1
Element 2
Element 1
Element 2
Element 3
{display: inline; }
Element 3
Element 1
{display: block; }
Element 3
Element2{display: none; }
Web-Based Systems - Misbhauddin
12
Visibility
• Visibility Properties
– visibility: visible | hidden
Element 1
Element 1
Element 2
Element 3
{visibility: visible; }
Web-Based Systems - Misbhauddin
Element 3
Element 2{visibility: hidden; }
13
TRY NOW
Add an h2 tag between the h1 and the p tag
Edit CSS File
Change the display of h2 to “none”
Change the visibility of h2 to “hidden”
Web-Based Systems - Misbhauddin
14
Background
• Using a Color
– Property: background-color
• Using an Image
– Property: background-image
– Usage: background-image:url(‘myimage.png’);
• Using an Image – Repeat
– Use the background-image property again
– Use another property called background-repeat
• Values: repeat | repeat-x | repeat-y | no-repeat
• Using an Image – Position
– Use the background-image property again
– Use another property called background-position
• Values: top |bottom | center | left | right | center
• Can also add distance from the position in the same value
• Eg. background-position: 10px right;
Web-Based Systems - Misbhauddin
15
Dimension
• Sets the height and width of an element
– width: <length> | <percentage-parent-width>% | auto
– height: <length> | <percentage-parent-width>% | auto
– overflow: hidden | visible | scroll | auto
This is a block of text. The main
Intention behind this box is to
Demonstrate the overflow property
When it comes to displaying an
Element inside a box
Overflow
– Can also use properties to restrict minimum and
maximum dimensions
• min-width, min-height
• max-width, max-height
Web-Based Systems - Misbhauddin
16
Shorthand Properties
• Backgrounds
– background: <background-color> <background-image> <backgroundrepeat> <background-attachment> <background-position>
• Borders
– border: <border-width> <border-color> <border-style>
• Padding & Margins
– 1 value: used for all sides
– 2 values: <top/bottom> <left/right>
– 4 values: <top> <right> <bottom> <left>
• Note: If any value for a property is missing in the shorthand, the
next one will be assumed
Web-Based Systems - Misbhauddin
17
Announcement
• Reminder
– Quiz-1 (Thursday 15/10/2015)
– Material: HTML and CSS
– Duration: 15 mins.
– Starts-at: 09:05am (No extra time for latecomers)
Next on Web-based Systems
• Cascading Style Sheets
– Layout in CSS
– Navigation in CSS