All Entries in the "CSS Tutorials" Category
Styling for Print
You can use a specific style sheet to style content for print.You know the differences between length units used for a computer screen and length units used for print. This is one of the key reasons that separate style sheets for print exist. Specifying measurements designated for computer screens, such as [...]
Using Shorthand Properties in CSS
Your body rule should now look like this:
body {
font: 100%/1.5 “Helvetica Neue”, Helvetica, Arial, sans-serif;
background: #7F98C3;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
If you look at the font property, you may notice that your CSS may not look like ours. If you have individual font values on each line instead of all in one line, it is due [...]
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 [...]