>> The “Box” Model

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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