HTML and CSS Reference
In-Depth Information
Note
At the time of this writing, only the development version of Chrome supports scoped styles.
Applying a Style Directly to an HTML Element
This goes in the opening tag of an HTML element, so it applies to that element alone. This is known as creating
an inline style and should be avoided because it's the least efficient way to apply CSS. As with all rules, there is an
exception: some email programs, notably Microsoft Outlook, don't understand style rules unless they're applied
this way.
Inline styles use the same properties and values as CSS rules that you put in an external style sheet or a
<style> block. However, you don't need a selector (the HTML tag itself acts as the selector), and the curly braces
are replaced by quotes. For example, you might create the following style rule for <h1> tags:
h1 {
font-family: Arial, Helvetica, sans-serif;
color: #900;
}
The equivalent inline style looks like this:
<h1 style="font-family: Arial, Helvetica, sans-serif; color: #900;" >Heading with an Inline
Style</h1>
Learning to Write CSS Well
The basics of writing a style rule are simple, but CSS can also be infuriatingly complex. The simplicity of CSS lies
in the limited number of properties you need to remember. The complexity lies in the fact that you can combine
the properties in an infinite number of ways.
My advice is not to rush. I learned CSS by adding or changing one property at a time and viewing the
results in a browser. It was a slow, tedious process, but it helped me understand the interaction of the different
properties. Once you appreciate the trickle-down, cumulative effect of the cascade, you'll be amazed at the power
of CSS. The time spent will be repaid many times over in increased efficiency and easier maintenance of your
websites.
Don't succumb to the temptation to skip ahead to later chapters until you have read at least Parts I and II
and the first two chapters of Part III.
Test Your CSS Early in Several Browsers
Don't design for just one browser. Get into the habit of checking your design at an early stage in several
browsers—and preferably on different operating systems, including mobile devices. Spotting a problem early
on makes it easy to troubleshoot. Not everyone will be viewing your sites in the most up-to-date browsers. If you
don't have access to older browsers, ask friends, colleagues, or online forums for help in checking your sites.
Also consider using an online browser capture service such as BrowserCam ( www.browsercam.com ) or Adobe
BrowserLab ( https://browserlab.adobe.com/en-us/index.html ) .
Use Browser Developer Tools to Inspect Your CSS
All the main browsers have built-in panels that let you inspect the styles not only of your own site but of any
public website, giving you a useful insight into how CSS works. In Google Chrome, Safari, or Firefox, right-click
 
 
Search WWH ::




Custom Search