1. >> The “Box” Model

2. Pre-requisite 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”/>

3. Recall Styling in CSS Static Styling Dynamic 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

4. Types of Elements (display type)
Block
Inline
Web-based Systems | Misbhauddin

5. Web-Based Systems - Misbhauddin
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

6. Web-Based Systems - Misbhauddin
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
Can combine border properties with the side
Eg. border-top-style, border-bottom-color
border-top
border-left
border-right
border-bottom
Web-Based Systems - Misbhauddin

7. Web-Based Systems - Misbhauddin
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

8. Web-Based Systems - Misbhauddin
Padding
Padding: Space between the content and the border
Padding Properties
padding: <length> | <percentage-box-width>%
Separate paddings for each side
padding
Content of the Box
box
Content
padding-top
padding-left
padding-right
padding-bottom
Web-Based Systems - Misbhauddin

9. Web-Based Systems - Misbhauddin
TRY NOW
Edit CSS File
Add padding to your paragraph tag
Web-Based Systems - Misbhauddin

10. Web-Based Systems - Misbhauddin
Margin
Margin: Space between the border and other elements
Margin Properties
margin: <length> | <percentage-box-width>%
Separate Margin for each side
margin
Content
border
margin-top
margin-left
Content
margin-right
margin-bottom
Web-Based Systems - Misbhauddin

11. Web-Based Systems - Misbhauddin
TRY NOW
Edit CSS File
Increase or decrease the margin between the h1 tag and the p tag
Web-Based Systems - Misbhauddin

12. Web-Based Systems - Misbhauddin
Display
Display Properties
display: inline | block | none
Element 1
Element 1
Element 2
Element 3
Element 2
{display: inline; }
Element 3
Element 1
Element 3
{display: block; }
Element2{display: none; }
Web-Based Systems - Misbhauddin

13. Web-Based Systems - Misbhauddin
Visibility
Visibility Properties
visibility: visible | hidden
Element 1
Element 1
Element 2
Element 3
Element 3
{visibility: visible; }
Element 2{visibility: hidden; }
Web-Based Systems - Misbhauddin

14. Web-Based Systems - Misbhauddin
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

15. Web-Based Systems - Misbhauddin
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 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

16. Web-Based Systems - Misbhauddin
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
Can also use properties to restrict minimum and maximum dimensions
min-width, min-height
max-width, max-height
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
Web-Based Systems - Misbhauddin

17. Web-Based Systems - Misbhauddin
Shorthand Properties
Backgrounds
background: <background-color> <background-image> <background-repeat> <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

18. Next on Web-based Systems
Cascading Style Sheets
Layout in CSS
Navigation in CSS