Basic CSS Rules. Part 2/2, which lists the major CSS rules and how to apply them to your pages.Last updated: May 17, 2007 This page lists and explains some of the CSS rules you can use to enhance your web pages. Most CSS rules have two ways to implement certain attributes. Using fonts as an example, you can define the font size using the specific 'font-size' property. However, you can also define it in the general 'font' property, along with all the other font properties. I will list the specific ones first, then give an example of using the general form. Also note that there is also a 'none' option for several properties, which overrides inherited properties (e.g. if one element is nested inside another). Font & text properties Here are several font properties you can use, and the values each one can take: font-family - the name of the font (e.g.
Whew! Note the following: Replace each property listed with a value for that property. List properties The following are list properties: Background properties Note: Basic Cross-browser Gradient Syntax. One thing that is quite nice is that we now have the ability to create gradients in our pages just from CSS code, and without the use of any images. Syntax options and web browser support The good news is that there is web browser support for CSS gradients in Firefox, Safari, Google Chrome and Internet Explorer (Opera will most likely add it soon too). The bad news is that, for a couple of reasons, the implementation in each web browser is different from the other. In IE’s case, it’s because it’s based on their ancient approach that stems form IE 5.5. For WebKit-based web browsers (like Safari and Google Chrome), they were the first ones to suggest it, based on the approach for canvas, but this was later changed by the CSS WG, and the new syntax is now the one implemented in Firefox (and I guess this syntax will later make into WebKit-based web browsers as well).
So, as of now, we have have CSS gradients support for: Firefox 3.6Safari 4Google ChromeIntenet Explorer 5.5 Examples 01. 02. 13. Hide page contents from printing. CSS generated content techniques - Opera Developer Community. Introduction The content property was introduced in CSS 2.1 to add generated content to the :before and :after pseudo-elements. This is now supported on all major browsers — Firefox 1.5+, Safari 3.5+, IE 8+, Opera 9.2+, Chrome 0.2+). In addition, Opera 9.5+ supports the content property on all elements, not just the :before and :after pseudo-elements. In the CSS 3 Generated Content Working draft, the content property has had a lot more features added – for example, the ability to insert and move content around a document to create footnotes, endnotes, and section notes.
But no browser has implemented the expanded functions of content yet. In this article, we will look at the basics of using generated content, and then break out into specific techniques you can employ it in. A few caveats Before we dive into the subject, it's worth pointing out that generated content will only work in modern browsers with CSS enabledis not available via the DOM. Generated content — the basics Conclusion. CSS shorthand properties. One of the main advantages of using CSS is the large reduction in web page download time. To style text, you used to have to use the <font> tag over and over again. You probably also laid out your site with tables, nested tables and spacer gifs. Now all that presentational information can be placed in one CSS document, with each command listed just once.
But why stop there? By using CSS shorthand properties you can reduce the size of your CSS document even more. Font Use: font: 1em/1.5em bold italic serif ...instead of font-size: 1em; line-height: 1.5em; font-weight: bold; font-style: italic; font-family: serif This CSS shorthand property will only work if you're specifying both the font-size and the font-family - omit either and the CSS rule will be completely ignored.
Background background: #fff url(image.gif) no-repeat top left background-color: #fff; background-image: url(image.gif); background-repeat: no-repeat; background-position: top left; Lists list-style: disc outside url(image.gif) Define color of bullets. Vertical List Tutorial. Tutorial 4 - Horizontal lists - all steps combined There are many methods that can be used to making a horizontal list. The main ingredient is "display: inline", applied to the "LI" element. HTML CODE <div id="navcontainer"> <ul> <li><a href="#">Milk</a></li> <li><a href="#">Eggs</a></li> <li><a href="#">Cheese</a></li> <li><a href="#">Vegetables</a></li> <li><a href="#">Fruit</a></li> </ul> </div> Step 1 - Make a basic list Start with a basic unordered list.
The list items are all active (wrapped in <a href="#"></a>) which is essential for this list to work. Some CSS rules are written exclusively for the "a" element within the list items. Step 2 - Remove the bullets To remove the HTML list bullets, set the "list-style-type" to "none". Step 3 - Remove padding and margins Standard HTML lists have a certain amount of left-indentation.
To remove this left-indentation consistently across all browsers, set both padding and margins to "0" for the "UL". Step 4 - Display inline Step 9 - Center the list.