CSS Box Model. What is the Box Model? Each XHTML element appearing on our page takes up a "box" or "container" of space. Each box size is affected not.

Slides:



Advertisements
Similar presentations
9-May-15 More CSS. 2 A different emphasis CSS is the same for XML as it is for HTML and XHTML, but-- XML contains no display information If you want your.
Advertisements

Today’s objectives Site performance Padding, Margins, Borders
Week 9 Using the Box Properties. 9-2 The CSS Visual Formatting Model Describes how the element content boxes should be displayed by the browser –Based.
Tutorial 4: Creating page layout with css
CSS: Class 1 Background Images, Controlling Position of Background Images, Add Padding to Page Elements, Add Borders to Elements on a Page.
方框的CSS樣式.
 2003 Prentice Hall, Inc. All rights reserved. Chapter 6 - Cascading Style Sheets™ (CSS) Outline 6.1 Introduction 6.2 Inline Styles 6.3 Embedded Style.
1 Lesson Style Sheets Box Model Content (text,image,table) Margin Padding Border Box.
Text Properties, Line Box, CSS. Text Properties Properties related to the display of text. Text-align : left, right, center I like FSU!
Cascading Style Sheets Part 3 Fall, 2007 Modified by Linda Kenney Nov. 12, 2007.
Tutorial 3 Working with Cascading Style Sheets. XP Objectives Review the history and concepts of CSS Explore inline styles, embedded styles, and external.
Introduction to Web Site Development Steven Emory Department of Computer Science California State University, Los Angeles Lecture 6: Cascading Style Sheets.
4.01 Cascading Style Sheets
14-Jul-15 CSS Applications to XML. 2 A different emphasis CSS is the same for XML as it is for HTML, but-- HTML already does a pretty good job of layout.
Selectors thru Borders. CSS – Cascading Style Sheets – is a way to style HTML HTML is the content base of a web page CSS provides the presentation qualities.
Slide 1 of 83 Table Borders To specify table borders in CSS, use the border property. The example below specifies a black border for table, th, and td.
CSS Box Model. What is the CSS Box Model? The “Box Model” is a tool we use to lay out our web pages in a number of individual "boxes" or "containers".
CSS Dvijesh Bhatt.
Dreamweaver -- CSS. Dreamweaver -- MX New icons are added in MX Most of the features commonly used in web design, and are same as FrontPage. New feature.
ITP 104.  While you can do things like this:  Better to use styles instead:
CSS The Definitive Guide Chapter 8.  Allows one to define borders for  paragraphs  headings  divs  anchors  images  and more.
Tutorial 3 Working with Cascading Style Sheets (CSS)
 This presentation introduces the following: › 3 types of CSS › CSS syntax › CSS comments › CSS and color › The box model.
Unit 5 – HTML Tables Instructor: Brent Presley.
CIS 1315 – Web Development for Educators CIS 1315 HTML Tutorials 3 & 4: Working With CSS.
WRT235: Writing in Electronic Environments CSS Classes, IDs, divs.
CSS Border.
Today’s objectives  Assignment 1  Padding, Margins, Borders  Fluid Layout page  Building accessible Table  Element size with padding and border 
Lecture # 33 Cascade Style Sheets (CSS). Cascade Style Sheets (CSS): Preserving a consistent “look and feel” of a website across multiple pages.
INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 10: A Deeper Look at CCS- Spring 2011.
COMP213 – Web Interface Design
LITTLE BOXES Controlling size of boxes Box model for borders, margin and padding Displaying and hiding boxes.
Lesson 03 // Cascading Style Sheets. CSS Stands for Cascading Style Sheets. We’ll be using a combination of Html and CSS to create websites. CSS is a.
Chcslonline.org Text –wrapping around Images. chcslonline.org To wrap text around an image, lets set up a style in our style sheet. open a new notepad.
Part 4 Introduction to CSS. CSS Table Table Borders table, td, th { border:1px solid black; } Firstname Lastname Bader Ali Paul Manuel The example below.
Creating Your Own Webpage COSC Cascading Stylesheets Think of: HTML: content of your webpage HTML has tags CSS: presentation and appearance of your.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
Web Foundations THURSDAY, OCTOBER 3, 2013 LECTURE 6: CSS CONTINUED.
>> 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.
 2004 Prentice Hall, Inc. All rights reserved. Chapter 6 - Cascading Style Sheets™ (CSS) Outline 6.1 Introduction 6.2 Inline Styles 6.3 Embedded Style.
1 CS428 Web Engineering Lecture 08 Border, Margin, Padding … (CSS - III)
CSS Fun damentals The Document Hierarchy Element Relationships The Box Model.
CSS Layout Cascading Style Sheets. Lesson Overview  In this lesson, you will learn:  CSS Box Model  CSS properties for border  CSS properties for.
11/12/2015 Box Model Reed Crouch. 11/12/2015  HTML elements can be considered as boxes. In CSS, the term "box model" is used when referring to layout.
Web Design (12) CSS Introduction. Cascading Style Sheets - Defined CSS is the W3C standard for defining the presentation of documents written in HTML.
Extra-simplified.  Only truly happen when the CSS and HTML are defined as separate files (external style sheet) Introduction The main idea of CSS is.
5 th ed: Chapter 4 4 th ed: Chapter 5 SY306 Web and Databases for Cyber Operations SlideSet #5: Advanced CSS.
CSE 154 LECTURE 4: PAGE SECTIONS AND THE CSS BOX MODEL.
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring 2016 CSS Positioning 1.
Coding with HTML {. THE BASICS { What is HTML and how can you use it to make websites?
HTML and Dreamweaver November 11th. Agenda Box Model Displaying and positioning elements – Padding – Margin – Float – Display – Position HTML Demo.
CSS Table Styling. Up to this point, as we haven't applied any CSS styling to our tables, our example tables have not been too pleasing to the eye. CSS.
End User Computing Applied CSS: Building our course homepage Sujana Jyothi Department of Computer Science
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,
CS 120: Introduction to Web Programming Lecture 10: Extra Features and Website Design Part 1 Tarik Booker CS 120 California State University, Los Angeles.
HTML & CSS Contents: the different ways we can use to apply CSS to The HTML documents CSS Colors and Background CSS Fonts CSS Text CSS box model: padding,
Chapter 3 Designing Your Web Pages. Objectives What is CSS and Why it is needed How CSS looks and how to write it The different ways to add CSS code to.
Laying out Elements with CSS
CSS Box Model.
CSS Box Model.
CSS Box Model.
CSS Table Styling.
CSS Layouts: Grouping Elements
Cascading Style Sheets (Layout)
CSS Table Styling.
CSS Box Model.
CSS Box Model.
CSS Box Model.
CSS Box Model.
Presentation transcript:

CSS Box Model

What is the Box Model? Each XHTML element appearing on our page takes up a "box" or "container" of space. Each box size is affected not only by content but also by padding, borders, and margins. By knowing how to calculate the dimensions of each box, we can accurately predict how elements will lay out on the screen. As we build a new page, we can arrange these boxes on the screen, creating a balanced layout with white space around the content. The importance of the box model concept cannot be overemphasized. It would be difficult and frustrating to create a website without understanding this concept. The box model is a tool we use to understand how our content will be displayed on a web page.

Box Components Each element on the page has the following components: Margin Border Content Padding The easiest way to understand these components is to use one of the most versatile tools available to us as web designers: the element.

Introducing the Element The ("division") element groups other elements on the screen. By setting the width and height attributes via CSS, we can reserve a precise amount of space on our page for specific content. The actual content is nested and contained within the opening and closing tags. When we apply CSS styling directly to the element, all the elements contained within that will inherit that style. By using multiple elements as building blocks, we can design an entire web page layout.

Let's create a box on the screen and add a border around it: Example Element.box200 { width: 200px; height: 200px; border: 1px solid black; color: blue; }... This is before the box. This is a 200 by 200 pixel box with a 1px border. This is after the box.... With the border set, we can see the exact space taken up on the page. Notice that there is almost no space separating the text from the box border. Elements such as paragraphs, headers, and lists automatically insert padding and margins, but plain text does not do so.

Let's create some space between elements by adding both padding and margin: Adding Padding and Margin.box200 { width: 200px; height: 200px; border: 1px solid black; color: blue; padding: 10px; margin: 10px; }... The 10 pixel padding adds buffer space, on all four sides, between the content and border. The 10 pixel margin adds buffer space, on all four sides, between the border and surrounding elements. Let's examine this a bit closer up to see exactly what is happening.

Padding and Margin Illustrated The dotted red line shows the margin's outer boundary and the dotted green line shows the padding's inner boundary. 242px high 242px wide When we define the width and height of a element, these dimensions apply only to the actual content, not to the padding, border, or margin.

Calculating Total Dimensions When we are planning our page, we have to calculate exactly how much screen space a or any other element will use. The formula is: Total element width = defined width + left padding + right padding + left border + right border + left margin + right margin. Total element height = defined height + top padding + bottom padding + top border + bottom border + top margin + bottom margin. In our previous example: Total width = 200px + 10px + 10px + 1px + 1px + 10px + 10px = 242px. Total height = 200px + 10px + 10px + 1px + 1px + 10px + 10px = 242px. Padding, borders, and margins do not have to be the same on all four sides, as they are in this example. Let's see how to set these individually.

Setting Individual Margins We can set the specific margin sizes by using these four properties: Sets all four margins to be 10px. margin-top: margin-right: margin-bottom: margin-left: In practice, few web designers use these properties, preferring a shorthand method that condenses the declaration to a single line: margin: 20px 10px 5px 15px; Sets the top and bottom margins as 10px and the left and right margins as 5px. Sets the top margin as 20px, the right margin as 10px, the bottom margin as 5px, and the left margin as 15px. margin: 10px 5px; margin: 10px;

Setting Individual Padding We can set specific padding sizes by using these four properties: Sets padding as 5px on all four sides. padding-top: padding-right: padding-bottom: padding-left: Again, these are rarely used. Instead, the same shorthand method is employed: padding: 50px 10px 15px 5px; Sets top and bottom padding as 25px and left and right padding as 5px. Sets top padding as 50px, right padding as 10px, bottom padding as 15px, and the left padding as 5px. padding: 25px 5px; padding: 5px;

Setting Individual Borders Customizing borders is more involved. Since they are visible on the page, we have to specify style, thickness, and color. Accordingly, there are more properties available: border-top-width: border-right-width: border-bottom-width: border-left-width: border: 5px solid blue; border-top-style: border-right-style: border-bottom-style: border-left-style: border-top-color: border-right-color: border-bottom-color: border-left-color: To make things easier, we can use the shorthand method as before: border-width: 10px; border-style: solid dashed; border-color: blue red orange gray; If the three border properties will be identical on all four sides, we can use a single-line border shorthand, as we did in an earlier lesson:

Here we have set custom padding, borders, and margins: Example of Customized Settings.box200 { width: 200px; height: 200px; color: blue; padding: 40px 10px 0px 10px; margin: 25px 5px; border-width: 2px 5px; border-style: solid dotted; border-color: red blue green maroon; } A helpful way to remember the order of shorthand settings is that it starts at noon and goes clockwise around: top, right, bottom, left.