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.

Android Wireless Application Development, Volume 2: Advanced Topics (3rd Edition) (Developer's Library)

The Edison Gene: ADHD and the Gift of the Hunter Child

Enyo: Up and Running

Designing Games: A Guide to Engineering Experiences











50% opaque (or, you could say, 50% transparent). Figure 3.9 displays a comparison of the logo before and after adding the opacity property at 50% transparency. Figure 3.9. The RecipeFinder logo with and without CSS transparency using the opacity property Internet Explorer versions prior to version 9 don't support the opacity property, but you can mimic the same effect using a special filter that works only in those older versions of IE. So, if you wanted full browser support for the opacity

and remove any redundant code. The box-shadow property accepts up to six values. Here are those values in detail: ■ a color value (RGB, HSLA, hex, etc), which defines the color of the shadow ■ a horizontal offset (set with a length value) ■ a vertical offset (length) ■ Blur (a length value defining how blurry the shadow should appear) ■ Spread (length defining how far the shadow should spread) ■ An optional inset keyword is also allowed, which tells the browser to place the shadow on the inside

url(../images/bg-column.png) no-repeat top right; } To position the shadow image (called bg-column.png), we'll use the "top" and "right" keywords, which you’ll recall from our discussion on backgrounds earlier in this chapter. This positions the image at the top right of the .latest section, giving us the look we want. What about text shadows? The design for RecipeFinder doesn’t incorporate any shadows on text, but if you want to apply shadows to text in your projects, you can do this easily

necessary even if you have paid for the font. Using Our New Fonts on RecipeFinder As we've seen from this chapter so far, web fonts are a complex matter to deal with. Now that we have our fonts embedded on our page, and ready to use, let’s see where we can identify some further uses for them. We’ll also make some other typographical adjustments and, in the process, cover a few new CSS properties. So far, we’ve applied the Lato Regular font (the non-bold version of Lato) on our element.

reset document at the top of your CSS file, you can reset all these styles to a bare minimum. To put it another way, it clears the ground before we start building something new. At this stage, it's not necessary to understand everything in a CSS reset. Most experts wouldn't be able to speak intelligently on every line of CSS in such a document. The important thing to understand is that it's a valuable tool in your CSS arsenal, and it's imperative that you use one on every project to avoid as many

Download sample