1 / 19

The CSS Box Model

The CSS Box Model. No More Table Layouts. Tables should not be used for layout in XHTML/CSS Tables are not deprecated – they are essential for the display of content Remember the reasons why they are a bad idea – especially for people not using a full-sized computer screen.

basil-black
Download Presentation

The CSS Box Model

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. The CSS Box Model

  2. No More Table Layouts • Tables should not be used for layout in XHTML/CSS • Tables are not deprecated – they are essential for the display of content • Remember the reasons why they are a bad idea – especially for people not using a full-sized computer screen.

  3. Last time in Dreamweaver • We created two paragraphs and used CSS to: • Add background colo(u)rs and borders • Set their widths and heights • ‘Float’ them to the left Now we’re going to see how this works!

  4. The Box Model • An HTML ‘paragraph’ <p>…</p> is an example of a block tag • If a block tag is not formatted with CSS it will be 100% wide and as high as required to contain its content • All block tags can have their heights and widths set in CSS • All block tags can have borders, margins and padding – just like tables

  5. What does this rule do? p { height: 200px; width: 400px; background-color: blue; color: white; border: 1px solid #000000; } Why would this rule be likely to be of little use in practise?

  6. Box Model CSS rules • Unless we want all of our paragraphs to be identically formatted (we don’t as we are going to be using CSS to position them soon) redefining the <p> tag in this way is not a good idea. • How else could we do this?

  7. Using Class Rules This is a better way of doing this as we can apply the class only to the block tags we want to format in this way BigBlueRectangleWithWhiteText { height:200px; width:400px; float:left; background-color:blue; color:white; border: 1px solid #000000; } <p class=“BigBlueRectangleWithWhiteText”>

  8. CSS rules – the end is nigh! • We’ve seen CSS used to: • Redefine XHMTL tags (like <p>) to change the appearance of all tags of that type. • Create classes that we can use when we want <p class=“myClass”> • Create pseudo-classes to modify the four separate states of the <a> tag • There’s only one more…

  9. CSS ID Rules CSS classrules start with a dot: .bigRed {font-size:24pt; color:red;} And are used like this: <p class=“bigRed”> CSS IDrules start with a hash: #para1{font-size:24pt; color:red;} And are used like this: <p id=“para1”> What’s the difference?

  10. CSS ID • ID rules are designed to apply only to a single block tag. Note the ID rule name on the previous slide • ID rules should be used only once in a page. • Web browsers are supposed to enforce this.

  11. Block Tags • Tags like <p>…</p> can contain inline tags (like <a>, <br /> and <img> but must not contain other block tags – this is an XHTML rule. • Block tags often have some form of formatting built into them. • What we need is a block tag that does nothing – except let you connect CSS rules to it.

  12. The <div> tag • <div>…<div> is a do-nothing block tag • You can attach CSS to it – use an ID rule! • You can enclose other block tags inside it <div id=“outer”>  ‘outer’ rule sets appearance/position of this div <div id=“title”>  ‘title’ rule sets appearance/position of this div <h1> This is the title of the page </h1> </div>  ‘title’ div finishes here <div id=“content”> ‘content’ rule applies here <p> Hi, I’m the content of this quite dull page </p> </div>  end of the ‘content’ div </div>  ‘end of the outer’ div

  13. Why use <div>? • Our first look at the box model in the last session formatted <p> tags which would have only allowed a single paragraph inside each <p>…</p> box. You can put what you like (including other <div> tags) in a <div> tag • CSS formatting is inherited. Consider the following: <div id=‘1’> <div id=‘2’> </div> </div> Formatting applied to <div id=‘1’> applies to <div id=‘2’> (unless replaced.) So CSS applied to the ‘outer’ parts is available to the ‘inner.’

  14. The <span> tag • Class and ID rules apply to an entire block. Remember <p class = ‘myclass’> and <div id=“para1”> • Use the <span> tag to apply a class to only part of a block. <p> This part is in <span class=“boldface”>Important</span> text</p>

  15. Exercise 1 Getting used to the box model

  16. The Box Explained Margin Padding Border Content (size defined by height and width) Total width = margin-left + border + padding-left + width + padding-right + border + margin-right

  17. Box Details • Margins, padding and borders are all optional • Separate top, bottom, left and right options are available for each • It is not possible to change the appearance (colour etc) of margins and padding. • Borders are available in several types and can be coloured

  18. CSS Text Sizing • By name: xx-small, x-small, small, medium, large, x-large, xx-large • By percentage e.g. 120% would be 20% larger than inherited size • By ems • By pixel size – possibly will not be user enlargable • By point size – possibly not user enlargable

  19. Exercise Create the Richmond pet foods layout using the box model

More Related