Shaping Up With CSS


Published on

Published in: Business, Technology
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Shaping Up With CSS

  1. 1. Shaping up with CSS <understanding how true CSS layouts are built /> Advanced CSS Stephen Ireland
  2. 2. Understanding Elements • HTML elements • Marked up as <tags /> • Two types of HTML elements Block level elements Inline elements <h1>, <h2>, <h3> etc <span> <p> <strong> <div> <em> <blockquote> <a> <ul> and <ol> Advanced CSS Stephen Ireland
  3. 3. Block level Elements • Fundamental differences in use • Identified as normally displayed on its own line • Other elements appear above or below - not either side • Can be used as a container for one or more other elements The rules • A block level element can contain other block-level elements, as well as inline elements. • An inline element cannot contain block-level elements. Advanced CSS Stephen Ireland
  4. 4. Block Element Rule The rule x <div> <a href=”#”><h1>My link</h1></a> </div> ✓ <div> <h1><a href=”#”>My link</a></h1> </div> Advanced CSS Stephen Ireland
  5. 5. Inline Element Rule The rule It’s okay to nest one inline element inside another; <div> ✓ <h1> <a href=”#”><span>My link</span></a> </h1> </div> Advanced CSS Stephen Ireland
  6. 6. Element Symmetry Opening & closing XHTML tags <div> x <h1> <a href=”#”> <span>My link</span> ← </h1> </a> h1 element should not close before a </div> Can be checked using online validators ( Advanced CSS Stephen Ireland
  7. 7. Styling Elements Inline elements • Changing colour (text and background) • Changing font styles (size, typeface, bold, underline, etc.) Block-level elements • Set fixed width or height • Set padding or margin values • Position a block to any location on a web page, regardless of where it appears in the XHTML markup This is why block-level elements are more powerful Advanced CSS Stephen Ireland
  8. 8. Sizing Defaults Block-level elements • Will take 100% of available width • Available width could be parent element • Or could be browser window • Takes whatever height it needs Advanced CSS Stephen Ireland
  9. 9. Setting Heights & Widths Setting a width This CSS declaration will adjust a paragraph with the class value of ‘highlight’. The paragraph will become 50% the width of its containing element. CSS declaration p.highlight { width: 50%; } Advanced CSS Stephen Ireland
  10. 10. Units of Measurement When sizing and positioning elements we can use different units of measurement. Each unit type have their benefits and drawbacks. Although different unit types can be mixed within layouts, problems may occur. Units • Pixels (px) for fixed sizing / positioning • Percentages (%) for sizes relative to containing elements • Ems (em) for sizes relative to base font size • Points (pt) for print based styles Advanced CSS Stephen Ireland
  11. 11. Fixed Block-Level Sizing Setting a height as well as a width to a block-level element is just as simple, although be wary of possible consequences. CSS declaration #navigation { background-color: #cccccc; width: 200px; height: 400px; } Advanced CSS Stephen Ireland
  12. 12. Browser Behaviour If you set a height that is less than the room needed for the content of the element, that content will overflow. Firefox Internet Explorer Advanced CSS Stephen Ireland
  13. 13. Other Occurances If a visitor to your website increases the font-size, text may overflow the containing element of a fixed size. Advanced CSS Stephen Ireland
  14. 14. Overflow:Hidden There is a way to stop elements escaping the bounds of their containing element - set the CSS overflow property to ‘hidden’. Bad practice in this situation as text becomes unreadable anyway... #navigation { background-color: #cccccc; width: 200px; height: 300px; overflow: hidden; } Advanced CSS Stephen Ireland
  15. 15. Positioning Elements Full CSS layouts • Without intervention from CSS, a web browser will display elements in the order they appear in the source file. • By full CSS layouts, we mean layouts that use CSS entirely for positioning elements in the web browser window. • There are many different ways to create CSS layouts. • Best practice methods often harder to achieve. Advanced CSS Stephen Ireland
  16. 16. Full CSS Layouts Conventional layouts • Comprise of • A header • Two or three columns • A footer • Use <div> tags for layout hooks • Use XHTML property ‘id’ to style div elements individually XHTML CSS <div id=”banner”></div> #banner { width: 760px; } Advanced CSS Stephen Ireland
  17. 17. Layout Options Debate • Fixed-width • Fluid-width • Semi-fluid (one fixed width column, one fluid width) • Zoom (entire layout relative to font size) • Resolution-dependent (Made possible with Javascript) All types of layouts are dependent on methods of sizing and positioning of the block-level elements. Advanced CSS Stephen Ireland
  18. 18. Positioning Block-Level Elements CSS ‘position’ property • Static • Relative #banner { position: absolute; } • Absolute • Fixed CSS ‘float’ property • Left • Right #left-col { float: left; } • None Advanced CSS Stephen Ireland
  19. 19. Easiest positioning Method CSS ‘position’ property • Static • Relative ← #banner { position: absolute; } • Absolute • Fixed Its absolute positioning CSS ‘float’ property • Left • Right #left-col { float: left; } • None Advanced CSS Stephen Ireland
  20. 20. Position:Absolute Absolute positioning gives you total control where a block-level element appears in the browser window. This declaration positions a div with id of ‘banner’ 10 pixels from the top and left of the browser window. ← #banner { position: absolute; top: 50px; left: 50px; } Advanced CSS Stephen Ireland
  21. 21. Top, right, Bottom, Left • Absolute positioning relies on a position being set. • If you don’t provide positions, your elements will overlap one another. • Make sure to set one or two values • In most cases you will work from the top-left corner of the browser window. Therefore, most commonly used properties are ‘top’ and ‘left’. Advanced CSS Stephen Ireland
  22. 22. Handy Tips • Before moving on to more complex positioning schema, experiment with the control absolute positioning gives you. • Set background-color on the different main elements, or give each element a border temporarily until you have your layout how you intended. You’ll be able to see where each element starts and ends, without holding a ruler in front of the screen! • Nothing is ever nothing unless specified - most browsers have default margins and paddings which could upset your design. If in doubt - specify them with zero value. Advanced CSS Stephen Ireland