book

Getting StartED with CSS

Name: Getting StartED with CSS
Author: David Powers
ISBN: 9781430225430

by David Powers

November 2009

Beginner

571 pages

11h 17m

English

Apress

Read now

Unlock full access

Copyright
About the Author
About the Technical Reviewer
Acknowledgments
Introduction
Who this book is forUsing the files for this book
1. What Is CSS, and Why Should I Learn It?
1.1. A short history of CSS1.1.1. Why CSS has taken so long to be embraced by designers1.1.2. The time for CSS has finally come1.2. What are the advantages of CSS?1.2.1. Write simpler markup1.2.2. Turn into a quick change artist1.2.3. Gain greater control over the look of page elements1.3. So, how do I use CSS?1.3.1. Why are they called "cascading" style sheets?1.3.2. How do I write a style rule?1.3.2.1. Formatting CSS for ease of maintenance1.3.2.2. Adding comments to your CSS1.3.3. Where do I create my CSS?1.3.3.1. Using external style sheets1.3.3.1.1. Attaching a style sheet with a <link> tag1.3.3.1.2. Using an @import rule1.3.3.2. Using a <style> block1.3.3.3. Applying a style directly to an HTML element1.3.3.4. Don't forget the cascade1.3.3.5. Using Internet Explorer conditional comments1.3.4. Limiting which devices use your styles1.4. Learning to write CSS well1.4.1. Avoiding common mistakes1.4.2. Test your CSS early in several browsers1.4.3. Building a useful toolset for working with CSS1.5. Chapter review
2. How Do I Improve the Look of Text and Links?
2.1. Exploring the CSS text properties2.2. Changing the default font and color of text2.2.1. Using font-family to choose a range of alternative fonts2.2.2. Setting color values in CSS2.2.3. Selectively applying a different font and color2.3. Changing the size of fonts2.3.1. Setting length with pixels, ems, and other units of measurement2.3.2. Using percentages2.4. Changing the look of fonts2.4.1. Italicizing text2.4.2. Making text bolder or lighter2.4.3. Displaying text in small caps2.4.4. Switching between uppercase and lowercase2.5. Aligning and spacing text2.5.1. Aligning text horizontally2.5.2. Aligning text vertically2.5.3. Indenting the first line of text2.5.4. Adjusting the vertical space between lines of text2.5.5. Adding or removing space between words2.5.6. Increasing or decreasing the space between letters2.5.7. Controlling whitespace and line wrapping2.6. Styling text links2.6.1. Just remember it's a love-hate relationship2.6.2. Controlling underlines2.6.3. Making full use of the cascade2.7. Using the font shorthand property2.8. Chapter review
3. How Can I Improve the Layout of My Text?
3.1. Sliding boxes and blocks3.1.1. Two HTML tags that are the friends of CSS: <div> and <span>3.2. How CSS controls margins3.2.1. Understanding how vertical margins collapse3.2.2. Setting margin values3.3. Using margins to improve page layout3.3.1. Removing the default margins from your pages3.3.2. Centering page content3.3.3. Using margin-left to indent text3.3.4. Using negative margins3.3.5. Applying margins to inline elements3.4. Keeping your style sheet manageable3.4.1. Using the margin shorthand property3.4.2. Organizing your style rules for easier maintenance3.5. Chapter review
4. How Can I Flow Text Around Images?
4.1. CSS classes 1014.1.1. Creating and applying CSS classes4.2. Using float to flow text around images4.2.1. Creating generic classes to position images4.2.2. How do I center an image?4.2.3. What happens when the image is taller than the text?4.2.4. Using clear to force elements below a floated image4.2.5. What if an element is too wide to sit alongside a float?4.2.6. What happens to margins alongside a float?4.3. Using ID selectors to style unique elements4.3.1. Deciding whether to use a class or an ID4.4. Adding a caption to an image4.5. Chapter review
5. How Do I Add Backgrounds and Borders to Improve the Look of My Page?
5.1. Controlling backgrounds with CSS5.1.1. Changing the background color of an element5.1.2. Adding a background image5.1.2.1. Controlling how background images repeat5.1.2.2. Fixing a background image in relation to the browser viewport5.1.2.3. Adjusting the position of a background image5.1.3. Using the background shorthand property5.2. Controlling borders with CSS5.2.1. Setting a border color5.2.2. Setting a border style5.2.3. Setting a border width5.2.4. Using border shorthand properties5.2.5. Using borders to simulate embossing and indenting5.2.6. Understanding how borders affect layout5.2.7. How do I get rid of the blue border around link images?5.2.8. How do I prevent backgrounds and borders from displaying under floats?5.3. Chapter review

6. How Do I Solve the Mysteries of Width and Height?
6.1. Padding—the final piece of the CSS box model6.1.1. Choosing between margins and padding6.1.2. Using padding to add space around elements6.2. Controlling width and height6.2.1. Using a fixed height6.2.2. Using minimum and maximum lengths to scale images and text6.3. How do I stop content spilling out of its container?6.3.1. Controlling overspill with the overflow property6.3.2. Using overflow as an alternative to clear with floated elements6.3.3. Understanding the difference between visibility and display6.3.4. Displaying a message to users of old browsers6.4. Chapter review
7. How Do I Create Differently Styled Sections?
7.1. Adding a sidebar7.1.1. Giving the sidebar different styles7.2. Adding an accessible page heading7.3. Switching the sidebar to the other side7.4. Improving the image captions7.5. How do I tell which styles will be applied?7.5.1. A review of selectors in CSS2.17.5.2. Using specificity to work out which rule wins7.5.2.1. Specificity the easy way7.5.2.2. Specificity the official way7.6. Chapter review
8. How Do I Style Lists and Navigation Menus?
8.1. Styling unordered and ordered lists8.1.1. Changing the symbol or number8.1.2. Changing the position of the symbol8.1.3. Replacing the symbol with your own image8.1.3.1. Using a background image for greater control8.1.4. Using the list-style shorthand property8.2. Changing layout with the display property8.2.1. Setting display to inline8.2.2. Setting display to inline-block8.3. Creating a navigation bar from a list8.3.1. Creating a vertical text-based navigation bar8.3.2. Creating a horizontal text-based navigation bar8.3.3. Using CSS sprites in a navigation bar8.4. How do I continue a numbered list after a break?8.5. Using CSS to generate numbered sequences8.5.1. Adding content with :before and :after8.5.2. Adding images with pseudo-elements8.5.3. Generating content from an HTML attribute8.5.4. Using the content property to generate numbered sequences8.5.5. Using generated content with numbered lists8.5.6. Generating subsection numbers with nested lists8.6. Chapter review
9. How Do I Style Tables?
9.1. Understanding the anatomy of a table9.1.1. Basic table structure9.1.2. Using HTML tags to define sections of a table9.1.2.1. Defining table columns9.1.2.2. Defining table header and footer rows9.1.2.3. Grouping table rows into sections9.1.3. How browsers lay out tables9.2. Styling tables with CSS9.2.1. Using CSS for table borders9.2.2. Adding borders to table cells9.2.3. How do I stop border widths from being doubled?9.2.4. Adding borders to columns and rows9.2.5. Applying other styles to columns9.2.6. What's the CSS equivalent of cellspacing?9.2.7. What's the CSS equivalent of cellpadding?9.2.8. Controlling the position of the table caption9.2.9. Handling empty cells9.2.10. How can I control the width of my table?9.2.11. How do I create scrolling table cells that work in all browsers?9.2.12. How do I control the position of content in table cells?9.3. Chapter review
10. How Do I Position Elements Precisely on the Page?
10.1. How does CSS positioning work?10.1.1. Understanding the different types of positioning10.2. Fixing elements inside the browser window10.2.1. How do I keep my navigation onscreen all the time?10.2.2. Understanding the limitations of fixed positioning10.3. Using relative positioning to nudge elements10.3.1. Using relative positioning to create a containing block10.4. Moving elements precisely with absolute positioning10.4.1. Why do absolutely positioned elements move?10.4.2. How do I center a page and use absolute positioning?10.4.3. What happens if I nest absolutely positioned elements?10.4.4. How do I control which element is on top when they overlap?10.4.5. What are the drawbacks of using absolute positioning?10.4.6. Positioning elements against a background image10.5. Cropping an image nondestructively with CSS10.6. Chapter review
11. Are There Any Guidelines for Basic Page Layout?
11.1. Getting the basics right11.1.1. Who is the target audience?11.1.2. What size browser window should I design for?11.1.3. What type of layout is best—fixed or flexible?11.2. Creating a single-column layout11.2.1. Keeping a liquid display centered11.3. Creating a two-column layout11.3.1. Putting the sidebar first and floating it to one side11.3.2. Using a background image to simulate equal columns11.3.3. What happens if the sidebar is longer?11.3.4. Adding a "skip to main content" link for screen readers11.3.5. Putting the main content first11.3.5.1. Floating the main content11.3.5.2. Using absolute positioning for the sidebar11.3.5.3. Using a negative margin to float the sidebar into position11.3.6. How do I make a more flexible two-column layout?11.4. Creating a three-column layout11.4.1. Creating faux columns for a three-column layout11.4.1.1. Using a single image for a fixed-width layout11.4.1.2. Using multiple images for a hybrid layout11.4.2. Putting the main content first in a three-column layout11.4.3. Creating subcolumns11.5. Table-related display—the future of layout?11.6. Chapter review
12. How Do I Create Styles for Printing?
12.1. What's different about print CSS?12.1.1. What print style sheets cannot do12.1.2. Setting page margins with the @page rule and pseudo-classes12.1.3. Controlling where to break content between pages12.1.4. Displaying the URL of links12.2. Creating styles for printing12.2.1. Using the media attribute to specify where styles are applied12.2.2. Using the cascade for print styles12.2.3. Attaching independent style sheets12.3. The ones that got away—UI properties and quotes12.3.1. Changing the cursor12.3.2. Adding an outline12.3.3. Removing a default outline without destroying accessibility12.3.4. Curly quotes, anyone?12.4. Chapter review
A. CSS Properties and Selectors
A.1. Specifying property valuesA.1.1. Specifying color valuesA.1.2. Specifying sizesA.1.3. Specifying URLsA.2. CSS2.1 PropertiesA.2.1. Background propertiesA.2.1.1. background-attachmentA.2.1.2. background-colorA.2.1.3. background-imageA.2.1.4. background-positionA.2.1.5. background-repeatA.2.1.6. backgroundA.2.2. Border propertiesA.2.2.1. border-colorA.2.2.2. border-styleA.2.2.3. border-top, border-right, border-bottom, border-leftA.2.2.4. border-top-color, border-right-color, border-bottom-color, border-left-colorA.2.2.5. border-top-style, border-right-style, border-bottom-style, border-left-styleA.2.2.6. border-top-width, border-right-width, border-bottom-width, border-left-widthA.2.2.7. border-widthA.2.2.8. borderA.2.3. Box model propertiesA.2.3.1. heightA.2.3.2. margin-right, margin-left, margin-top, margin-bottomA.2.3.3. marginA.2.3.4. max-heightA.2.3.5. max-widthA.2.3.6. min-heightA.2.3.7. min-widthA.2.3.8. padding-top, padding-right, padding-bottom, padding-leftA.2.3.9. paddingA.2.3.10. widthA.2.4. Display and visibility propertiesA.2.4.1. displayA.2.4.2. overflowA.2.4.3. visibilityA.2.5. Float propertiesA.2.5.1. clearA.2.5.2. floatA.2.6. Generated content propertiesA.2.6.1. contentA.2.6.2. counter-increment, counter-resetA.2.6.3. quotesA.2.7. List propertiesA.2.7.1. list-style-imageA.2.7.2. list-style-positionA.2.7.3. list-style-typeA.2.7.4. list-styleA.2.8. Positioning propertiesA.2.8.1. bottom, left, right, topA.2.8.2. clipA.2.8.3. positionA.2.8.4. z-indexA.2.9. Print propertiesA.2.9.1. orphansA.2.9.2. page-break-afterA.2.9.3. page-break-beforeA.2.9.4. page-break-insideA.2.9.5. widowsA.2.10. Table propertiesA.2.10.1. border-collapseA.2.10.2. border-spacingA.2.10.3. caption-sideA.2.10.4. empty-cellsA.2.10.5. table-layoutA.2.10.6. text-alignA.2.10.7. vertical-alignA.2.11. Text propertiesA.2.11.1. colorA.2.11.2. directionA.2.11.3. font-familyA.2.11.4. font-sizeA.2.11.5. font-styleA.2.11.6. font-variantA.2.11.7. font-weightA.2.11.8. fontA.2.11.9. letter-spacingA.2.11.10. line-heightA.2.11.11. text-alignA.2.11.12. text-decorationA.2.11.13. text-indentA.2.11.14. text-transformA.2.11.15. unicode-bidiA.2.11.16. vertical-alignA.2.11.17. white-spaceA.2.11.18. word-spacingA.2.12. User interface propertiesA.2.12.1. cursorA.2.12.2. outline-colorA.2.12.3. outline-styleA.2.12.4. outline-widthA.2.12.5. outlineA.3. SelectorsA.3.1. CSS2.1 selectorsA.3.1.1. Universal selectorA.3.1.2. Type selectorsA.3.1.3. Class selectorsA.3.1.4. Pseudo-classesA.3.1.5. Pseudo-elementsA.3.1.6. ID selectorsA.3.1.7. Descendant selectorsA.3.1.8. Child selectorsA.3.1.9. Adjacent sibling selectorsA.3.1.10. Attribute selectorsA.3.1.11. Grouping selectorsA.3.1.12. Building complex selectorsA.3.2. Widely-supported CSS3 selectorsA.3.2.1. Matching an attribute that begins with a valueA.3.2.2. Matching an attribute that contains a substringA.3.2.3. Matching an attribute that ends with a valueA.3.2.4. General sibling combinator

Content preview from Getting StartED with CSS

Chapter 4. How Can I Flow Text Around Images?

It's time to bring the sample page alive with some images. The reason I have not used images so far is because HTML treats images as inline elements. As you saw in the previous chapter, inserting an image in a block of text forces the text to align with the bottom of the image. In order to get the text to flow around the image, you need to use the CSS property called float. In principle, using float is very simple, and it can be used on any HTML element, not just images. You float the element to the left or right, and everything moves up to fill the vacated space alongside, as illustrated in Figure 4-1.

Figure 4.1. The CSS float property is used, among other things, to wrap text around images.

This chapter ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

HTML and CSS: Visual QuickStart Guide, Eighth Edition

Publisher Resources

ISBN: 9781430225430Purchase book

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

Getting StartED with CSS

by David Powers

Chapter 4. How Can I Flow Text Around Images?

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.