All Entries in the "CSS Basic" Category
Using Cascade Order
CSS allows you to assign the same rule to the same element multiple times. I call these competing rules. Browsers use the cascading order to determine which rule in a set of competing rules gets applied. For example, a browser assigns default rules to each element. When you assign a rule to an element, your [...]
Using Property Values
Property values come in the following forms: constant text, constant numbers, lengths, percentages, functions, comma-delimited lists of values, and space-delimited series of values. Each property accepts one or more of these types of values. I have included all common types of values in Example 1-6. But first, I have listed them here along with an [...]
CSS Syntax & Syntax Details
CSS syntax is easy. A stylesheet contains styles; a style contains selectors and rules; and a rule contains a property and a value. The following is the design pattern for a style:
SELECTORS { RULES }
The following is the design pattern for a rule:
PROPERTY:VALUE;
For example, p{margin:0;} is a style. p is the selector, which selects all [...]
Using Stylesheets
You can place styles in three locations: stylesheets, <style>, and style. A stylesheet is an independent file that you can attach to an HTML document using the <link> element or CSS’s @import statement. <style> is an HTML element that you can embed within the HTML document itself. style is an attribute that can be embedded [...]
List margins and padding
Browsers don’t seem to be able to agree on how much padding and margin to place around lists by default, and also how margin and padding settings affect lists in general. This can be frustrating when developing websites that rely on lists and pixel-perfect element placement. By creating a list and using CSS to apply [...]
Working with lists,Unordered lists,Ordered lists,Definition lists & Nesting lists
This post concludes with the last of the major type elements: the list. We’ll first look at the different types of lists—unordered, ordered, and definition—and also see how to nest them. Then we’ll move on to cover how to style lists in CSS, list margins and padding, and inline lists.
Unordered lists
The unordered list, commonly referred [...]
Styling semantic markup
The exercises in this section will combine the elements discussed so far in this post, showing how to use the knowledge gained to style some semantic markup. Three different examples are on offer, showing how rapidly you can create great-looking text when working with CSS, and also how you can easily restyle a page of [...]
Creating alternatives with classes and spans
It’s common in web design to define alternatives to the rules set for tag selectors (h1, h2, p, etc.). This tends to happen most often in one of two situations. The first is when creating alternate styles for a portion of a web page (as in print, it’s often beneficial to use different text for [...]