>> 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

Web-based Systems | Misbhauddin 4

Types of Elements (display type)

Inline

Elements

Block

Web-Based Systems - Misbhauddin 5

The”BOX” Model

• CSS treats each element as a rectangular box– Eg. <h1>Welcome</h1>

WelcomePadding Area

Border Area

Content Area

Margin Area

Web-Based Systems - Misbhauddin 6

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-bottomborder-left border-right

Web-Based Systems - Misbhauddin 7

TRY NOWAdd an h1 element with “your name”Add a paragraph element with “Student at CCSIT-KFU”

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}

Edit CSS File

Web-Based Systems - Misbhauddin 8

Padding• Padding: Space between the content and the border• Padding Properties

– padding: <length> | <percentage-box-width>%

• Separate paddings for each side

Content of the Box

padding

box

Content

padding-top

padding-bottompadding-right

padding-left

Web-Based Systems - Misbhauddin 9

TRY NOW

Add padding to your paragraph tag

Edit CSS File

Web-Based Systems - Misbhauddin 10

Margin• Margin: Space between the border and other

elements• Margin Properties– margin: <length> | <percentage-box-width>%

• Separate Margin for each side

Contentmargin

margin-top

margin-bottommargin-right

margin-leftContent

border

Web-Based Systems - Misbhauddin 11

TRY NOW

Increase or decrease the margin between the h1 tag and the p tag

Edit CSS File

Web-Based Systems - Misbhauddin 12

Display• Display Properties– display: inline | block | none

Element 1

Element 2

Element 3

Element 1 Element 2 Element 3

Element 1

Element 3{display: block; }

{display: inline; }

Element2{display: none; }

Web-Based Systems - Misbhauddin 13

Visibility• Visibility Properties– visibility: visible | hidden

Element 1

Element 2

Element 3

{visibility: visible; }

Element 1

Element 3

Element 2{visibility: hidden; }

Web-Based Systems - Misbhauddin 14

TRY NOW

Change the display of h2 to “none”Change the visibility of h2 to “hidden”

Edit CSS File

Add an h2 tag between the h1 and the p tag

Web-Based Systems - Misbhauddin 15

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 16

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 mainIntention behind this box is to Demonstrate the overflow propertyWhen it comes to displaying an Element inside a box

Overflow

Web-Based Systems - Misbhauddin 17

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

Announcement

• Reminder– Quiz-1 (Thursday 15/10/2015)– Material: HTML and CSS – Duration: 15 mins.– Starts-at: 09:05am (No extra time for late-

comers)

Next on Web-based Systems

• Cascading Style Sheets– Layout in CSS– Navigation in CSS