wdv101 intro to website development n.
Skip this Video
Download Presentation
WDV101 Intro to Website Development

Loading in 2 Seconds...

play fullscreen
1 / 24

WDV101 Intro to Website Development - PowerPoint PPT Presentation

  • Uploaded on

WDV101 Intro to Website Development. Tutorial #5 Working with the Box Model. Tutorial #4 Review - CSS. Create a homework page Final Project Discussion Exam on Blackboard Styling Lists (List-style-type, list-style-image, list-style-position)

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'WDV101 Intro to Website Development' - orsen

Download Now An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
wdv101 intro to website development

WDV101 Intro to Website Development

Tutorial #5 Working with the Box Model

tutorial 4 review css
Tutorial #4 Review - CSS
  • Create a homework page
  • Final Project Discussion
  • Exam on Blackboard
  • Styling Lists (List-style-type, list-style-image, list-style-position)
  • Group Selectors, Descendant Selectors, Inheritence
  • Nav Element, Span Element
  • Classes (Dependent and Independent)
  • Pseudo-Class Selectors for Links
  • Margins
working with the box model
Working with the Box Model
  • Box Model – describes the imaginary boxes that are formed around elements
  • In HTML every element is treated as a box
  • Box is 4 parts
    • Content – Image, Text, Etc. There is no white space
    • Padding – White space that surrounds the box content
    • Border – Visible solid or decorated line around padding
    • Margin – White space outside of the border.
working with the box model1
Working with the Box Model
  • http://www.w3schools.com/css/css_boxmodel.asp
padding and margin
Padding and Margin
  • Can be adjusted with em, px, %, or other measurements
  • Set in CSS as the following for the same amount for each side:

padding: width;

  • Can set an individual side
    • Padding-top
    • Padding-right
    • Padding-bottom
    • Padding-left
padding and margin1
Padding and Margin
  • Can be adjusted with em, px, %, or other measurements
  • Set in CSS as the following for the same amount for each side:

margin: width;

  • Can set an individual side
    • Margin-top
    • Margin-right
    • Margin-bottom
    • Margin-left
padding and margin shorthand
Padding and Margin - Shorthand
  • One value – All four sides Equally
  • Two Values – First value is Top and Bottom, second for left and right
  • Three Values – Top, Left + Right, Bottom
  • Four Values – Clockwise Top, Right, Bottom, Left

Padding: 4px;

Margin: 10px 4px;

Padding: 4px 10px 4px;

Margin: 0 0 0 4px;

border properties
Border Properties
  • Border – Decoration around Content and Padding
  • Can change color, style, and width
  • May look different on the different browsers
  • Can set border-style for all 4 styles or one side

border: dotted thin red; /*sets border style, width and color all in one*/



(plus bottom and left)

border properties1
Border Properties
  • Border Styles – Page 247 shows examples
    • Solid
    • Double
    • Dotted
    • Dashed
    • Groove
    • Ridge
    • Inset
    • Outset
    • None
border width property
Border Width Property
  • Border width can be set in
    • Thick
    • Thin
    • Medium
    • Pixels, em, or %
  • Recommended to use Pixels due to different browser rendering

Border-width: 3px; /*sets all four sides*/

  • Border-top-width, Border-right-width, Border-bottom-width, border-left-width
border color
Border Color
  • Can set as Hex, RGB, or named color
  • Like style and width can set all 4 or a specific side

Border-color: red;

Border-top-color: # 8C6B71;

border shorthand
Border Shorthand
  • Border-color, border-style, border-width settings for all four sides
  • Border-top, border-right, border-bottom, border-left
    • Sets style, width, and color for the side specified.
  • Just use Border to set all for sides with color, width, and style

Border: solid thin red;

float and clear
Float and Clear
  • Float is used to position boxes on the page
  • Can float left or right
    • Floated elements are moved to the edge of the containing element (which could be the browser window)
  • If multiple elements are floated and will not fit the browser will stack it right below the last floated element

Float: right;

float and clear1
Float and Clear
  • Clear is used to specify whether or not an element can have another floating element beside it
  • Specifically the clear property specifies the sides where floating elements are not allowed
  • Tells the browsers to “Clear” the previous float
  • Options: Right, Left, Both, None

Clear: both;

float and clear2
Float and Clear
  • Can setup independent class for each float and clear


float: right;


.left {

float: left;


.clear {

clear: both;


  • Get Tutorial5_start.html from Class_info/lab
  • Add a dotted medium red border for h3
  • Add 10 pixel padding for h3
  • Make the image float to the left
  • Add a 10 pixel padding to the right of the image
  • Add a double thick black border to the image
background properties
Background Properties
  • Background-image – Places an image behind the contents of an element
  • Background-color – Places a color behind the contents of an element
  • Background-position – Positions an image within an element. Set in pixel, em, or percent
  • Background-repeat – Repeats and image to fill the contents of an element
  • Background-attachment – Sets a background image to scroll with the cursor, or fixes the background with only elements on top of the background scrolling
background properties1
Background Properties
  • Shorthand:

Background: image color position repeat attach

background properties2
Background Properties
  • Background-position – allows you to position a background image in different locations within its container element
  • Keywords or % pairs (horizontal vertical)
background repeat
  • Use background-repeat to display copies of the image appear on the background
background attachment
Background Attachment
  • Allows you to set the behavior of the background image with respect to scrolling
  • Defaults to image scrolling with the rest of the page
  • Two values
    • Scroll – Default
    • Fixed
  • Get the smile.png from the class_info/labs/images
  • Add a background Image to the footer element. The footer CSS section already exists.
  • Set the url to images/smile.png
  • Set the position to 100% 100%
  • Set the repeat to only the y axis
css precedence
CSS Precedence
  • If there are conflicts in the CSS due to multiple styles there is a precedence to determine what is displayed
  • The order of precedence from highest to lowest:
  • User-defined style – set by the user in web browsers
  • Inline styles
  • Embedded style sheets
  • External style sheets
  • Brower defaults
pathnames project
Pathnames Project
  • Zip available on blackboard
  • Also available on http://www.dmaccwebdev.org/CIS204%20Summer%202013/CLASS_INFO/labs/