Upload
lester-knight
View
215
Download
0
Embed Size (px)
Citation preview
>> 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– <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-style-top, border-color-bottom
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 (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