Jump Start CSS

Jump Start CSS

Language: English

Pages: 150

ISBN: 0987467441

Format: PDF / Kindle (mobi) / ePub


This short SitePoint book provides readers with a fun and yet practical introduction to Cascading Style Sheets (CSS), the language used to style and lay out all web pages. This book will quickly get you up to speed with the fundamentals of CSS and give you the confidence to start experimenting on your own.

It covers:

  • Layout techniques
  • Images, backgrounds, text
  • Navigation
  • Getting fancy with CSS3

The book is built around a real-life example project: a recipe website design. It's a fun and easily understandable project that is used to demonstrate the concepts outlined in the book in a practical way.

This is a clear, approachable and very easy-to-follow book that will get you to to speed with CSS in no time.

The True Gold Standard: A Monetary Reform Plan without Official Reserve Currencies (2nd Edition)

Building Web Reputation Systems

Social Capital (Key Ideas)

Beginning COBOL for Programmers

The Limits to Growth Revisited (SpringerBriefs in Energy / Energy Analysis)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

. . . . . . . . . . . . . . . . . . 11 vi Attribute Selector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 Pseudo-class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Pseudo-element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 Using Multiple Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 The Cascade and Specificity . . . . . . .

max-width, and max-height. These work very similarly to the width and height properties except, instead of declaring the width or height explicitly, they set boundaries for them. For example, the first thing we’re going to change in our styles is the width value declared for the .center-global elements: .center-global { max-width: 1020px; margin: 0 auto; } Now, the width of .center-global will still be 1020 pixels, but when the browser window or device size is smaller, it will shrink to fit.

download the code from the code archive for this book. We can test RecipeFinder on a number of different devices to see if it works, or we can use an online tool that displays a URL in various widths, mimicking what happens in various devices sizes. One such tool is located at http://mattkersley.com/responsive/. Figure 5.15 shows us how RecipeFinder looks after adding our responsive styles. Figure 5.15. RecipeFinder displayed using an online responsive design testing tool Of course, a tool like

browser also comes installed with developer tools, as do Internet Explorer and Opera. For Firefox, you can download two add-ons to help with development: the Web Developer toolbar13 and Firebug.14 The Web Developer toolbar appears in Firefox below the address bar, and includes a number of options, including many CSS-related features. The Firebug add-on, seen in Figure 6.3, works much like Chrome’s developer tools, opening when you hit F12 or when you right-click (Command-Click on a Mac) an

what I mean when discussing precedence and overriding abilities. Assume the following two declaration blocks appear in a single CSS file: p { font-size: 20px; } 15 16 Jump Start CSS p { font-size: 30px; } Here we're using the exact same selector for both rule sets—the element type selector, which targets all paragraph elements. The difference between these two rule sets, however, is the value of the font-size property. Here we're defining the font-size twice for the same element. So what

Download sample

Download