Wdv101 intro to website development
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

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/