>> The “Box” Model

Pre-requisite Create a new project in Netbeans 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 –

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) Web-based Systems | Misbhauddin 4 Inline Elements Block

The”BOX” Model CSS treats each element as a rectangular box – Eg. Welcome Web-Based Systems - Misbhauddin 5 Welcome Padding Area Border Area Content Area Margin Area

Border Web-Based Systems - Misbhauddin 6 Every element has a border around it Border Properties – border-width: | thin | medium | thick – border-color: | transparent – border-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset Can combine border properties with the side – Eg. border-style-top, border-color-bottom border-top border-bottom border-left border-right

TRY NOW Web-Based Systems - Misbhauddin 7 Add 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

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

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

Margin Web-Based Systems - Misbhauddin 10 Margin: Space between the border and other elements Margin Properties – margin: | % Separate Margin for each side Content margin margin-top margin-bottom margin-right margin-left Content border

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

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

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

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

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

Dimension Web-Based Systems - Misbhauddin 16 Sets the height and width of an element – width: | % | auto – height: | % | 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

Shorthand Properties Backgrounds – background: Borders – border: Padding & Margins – 1 value: used for all sides – 2 values: – 4 values: 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 (Sunday 26/10/2014) – Material: HTML and CSS (Selectors and Styling) – Duration: 10 mins. – Starts-at: 09:35am (No extra time for late- comers)

Next on Web-based Systems Cascading Style Sheets – Layout in CSS – Navigation in CSS Assignment (Important) – Edit the profile.html file – Add your own details with your own picture