Bangladesh doesn't support the most popular internet transfer medium paypal still now. So Bangladeshi Freelancers facing problems in paypal transaction. Thinking about paypal solution in bangladesh. You can trust on Paypal Bangladesh . Paypal bangladesh is a reliable and instant organization of Bangladesh providing paypal solution.
Showing posts with label in. Show all posts
Showing posts with label in. Show all posts
Tuesday, December 21, 2010
Saturday, October 23, 2010
Key Font Properties in Css
The following properties are often used for tighter control. Most are self-explanatory, so let’s
breeze through them; we’ll combine them all in a sample template at the end of the chapter.
breeze through them; we’ll combine them all in a sample template at the end of the chapter.
font-weight
The font-weight property sets how thick or thin characters in text should be displayed. Typically,
the declaration will either be normal or bold, although some browsers support numeric values
in increments of 100. These are 100 (lightest), 200, 300, 400 (same as normal), 700 (same as bold),
800, and 900 (even bolder!).
font-style
Again, this property is pretty obvious. The default is normal, but typically you would use this
property to declare any text that needs to be rendered in italics. Values are normal, italic, and
oblique. When you specify an oblique font style, the browser looks for any available font with
“oblique” in its name or, failing that, one with “italic” in its name.
font-variant
The font-variant property is used to display text in a small-caps font, which means that all the
lowercase letters are converted to uppercase letters, but all the letters in the small-caps font
have a smaller font size compared to the rest of the text. This is useful for secondary, lessimportant
info such as stats, figures, or footer information. Possible values are simply normal or
small-caps.
Note that the browser will use a proper small-caps font if one is available; otherwise the
effect is done computationally. You can see an example of small caps a little later in Figure 4-9.
text-transform
Not strictly a font property, but it controls the font, so it is included here. This property is a
natural antidote to font-variant, where all characters can be rendered uppercase without
reducing font size. The text-transform:uppercase declaration is especially useful for headings,
where it is semantically incorrect to type using uppercase characters in the markup.
Please, Please Use line-height in Css!
Adjusting the spacing between lines of text makes a huge difference to the look of your text, and
it is almost always required to enhance legibility. Please, please use it!
The line-height property is easy to understand, simple to implement, but most often
forgotten about. With careful color, size, and font-family properties set, and the text placed
within a beautifully executed section of the page, it is easy to consider the job done. The revelation
that something as simple as adjusting line-height can then bring to what is considered
finished is something one never forgets, and once you see this for yourself, you will use it in
every subsequent design.
it is almost always required to enhance legibility. Please, please use it!
The line-height property is easy to understand, simple to implement, but most often
forgotten about. With careful color, size, and font-family properties set, and the text placed
within a beautifully executed section of the page, it is easy to consider the job done. The revelation
that something as simple as adjusting line-height can then bring to what is considered
finished is something one never forgets, and once you see this for yourself, you will use it in
every subsequent design.
Define Your Style Sheet in Css
The first step is to override the browser’s default style sheet with one of your own. In Chapter
1, you learned how to apply an external style sheet, so repeat that process and apply a style
sheet called text.css using the following link element within the head of the document:
<head>
<title>Chapter 4: Text</title>
<link rel='stylesheet' media="screen" type='text/css' href='text.css' />
</head>
Reload text.html in your browser. Nothing looks different, but text.css is now higher in
the cascade than the browser style sheet. As there are no rules in text.css to override the
browser style sheet yet, the latter’s rules currently still take precedence.
1, you learned how to apply an external style sheet, so repeat that process and apply a style
sheet called text.css using the following link element within the head of the document:
<head>
<title>Chapter 4: Text</title>
<link rel='stylesheet' media="screen" type='text/css' href='text.css' />
</head>
Reload text.html in your browser. Nothing looks different, but text.css is now higher in
the cascade than the browser style sheet. As there are no rules in text.css to override the
browser style sheet yet, the latter’s rules currently still take precedence.
font-size in Css
Now since you learned the various uses of the preferred
measurements, namely pixels, ems, and percentage. In particular, we looked briefly at sizing
text with ems, and the general consensus is that this is by far the best approach.
However, when it comes to discussing CSS and learning its ways stage by stage, I prefer to
use the pixel measurement, as it is the most easily understood and ensures those who simply
cannot get their head around the concept of ems can still sit at the table with everyone else. Just
to recap, using ems to resize text ensures compatibility with IE6, which cannot resize text defined
with pixels (jump back to Chapter 2 for a full overview of the woes and virtues of the various
units of measurement).
In the following example, a new declaration is added to the body to define the size of the
text in that and all child elements:
/* Specify blanket rules for all elements */
body {
font-family: "Lucida Grande", Arial, Sans-serif;
font-size: 12px;
}
By declaring font-size:12px in combination with the font-family declaration, you will
ensure that all elements will be sized to 12px regardless of any inheritance (unlike ems, which can be influenced heavily through cascading rules), and will of course be rendered in the fonts
you specified earlier.
There are exceptions to this blanket font-size declaration, however. Note that all headings
(<h1>, <h2>, <h3>, and so on) will retain their default font sizes as declared by the browser style
sheet unless you redefine them. In other words, just because you specify a size of 12px in the
body does not mean that level 2 headings will also be 12px, as the browser style sheet has its
own correctly formatted CSS rules such as h1 {font-size:2em}. In any case, why on earth would
anyone want headings to be of equal size to their body text? This is another great example of
the creators of CSS ensuring common sense is not compromised.
measurements, namely pixels, ems, and percentage. In particular, we looked briefly at sizing
text with ems, and the general consensus is that this is by far the best approach.
However, when it comes to discussing CSS and learning its ways stage by stage, I prefer to
use the pixel measurement, as it is the most easily understood and ensures those who simply
cannot get their head around the concept of ems can still sit at the table with everyone else. Just
to recap, using ems to resize text ensures compatibility with IE6, which cannot resize text defined
with pixels (jump back to Chapter 2 for a full overview of the woes and virtues of the various
units of measurement).
In the following example, a new declaration is added to the body to define the size of the
text in that and all child elements:
/* Specify blanket rules for all elements */
body {
font-family: "Lucida Grande", Arial, Sans-serif;
font-size: 12px;
}
By declaring font-size:12px in combination with the font-family declaration, you will
ensure that all elements will be sized to 12px regardless of any inheritance (unlike ems, which can be influenced heavily through cascading rules), and will of course be rendered in the fonts
you specified earlier.
There are exceptions to this blanket font-size declaration, however. Note that all headings
(<h1>, <h2>, <h3>, and so on) will retain their default font sizes as declared by the browser style
sheet unless you redefine them. In other words, just because you specify a size of 12px in the
body does not mean that level 2 headings will also be 12px, as the browser style sheet has its
own correctly formatted CSS rules such as h1 {font-size:2em}. In any case, why on earth would
anyone want headings to be of equal size to their body text? This is another great example of
the creators of CSS ensuring common sense is not compromised.
Primary Font Properties in Css
Initially, it might seem that the manipulation of text on the Web is severely limited, but
designers are constantly pushing the envelope with new and exciting methods of treating it.
Later we’ll delve into some more complex CSS properties, but for now it’s important to understand
the basic font syntax.
designers are constantly pushing the envelope with new and exciting methods of treating it.
Later we’ll delve into some more complex CSS properties, but for now it’s important to understand
the basic font syntax.
Specifying Fonts
First, you’ll want to override some of the browser’s default CSS properties, specifically the typeface
and the font size. This is really straightforward, but there are a few interesting issues to be
aware of. The following properties would typically be declared in the body selector, allowing all
following elements to inherit the values unless you specify otherwise.
font-family
The font-family property is a list of font family names and/or generic family names for an
element, specified in priority order. The browser will use the first available font on the user’s
machine. There are two types of font-family values: • Family name: The name of a font family, like Times, Georgia, or Arial.
• Generic family: The name of a generic family, like serif, sans-serif, cursive, fantasy,
or monospace.
Each value must be separated with a comma, and you should always suggest a genericfamily
name as the final option in the list.
If a family name contains whitespace, such as the family name Lucida Grande, it should be
enclosed in quotes ("Lucida Grande"), although single quotes need to be used if embedding the
style in HTML.
In the following example, defining the family names and generic family for the body
element will ensure that all child elements will inherit the font-family declaration, unless
specifically overridden.
/* Specify blanket rules for all elements */
body {
font-family: "Lucida Grande", Arial, Sans-serif;
}
Note also that Lucida Grande is specified first, and due to its whitespace character it is
contained within quotes. Any machines with Lucida Grande will display text with that font, and
if it isn’t available, the display will default to Arial. If neither Lucida Grande nor Arial are available,
the browser knows to use whatever appropriate sans serif font it can find next, as the generic
family sans-serif is specified.
To overrule this blanket declaration, just specify a different font family for the appropriate
element. For example, many designers like to display headings and block quotes with larger,
more classic serif fonts.
Why Is Text So Important in Css
Well, it tells people things, for a start. Without words, your images have an awful lot of work to
do. Aside from this flippant point, it should go without saying (although I’ll say it anyway) that
your text should be legible, to the point, and within easy reach. Visitors are rarely coming to a
web site to sit back and admire your graphics—it is most often information they are seeking.
Graphic embellishments are often mere decoration.
The issue of accessibility is an important one here. Responsible web developers spend a lot
of time ensuring that their designs are not compromised under user-defined viewing situations.
For example, if a style sheet is not available, or images are turned off, the image-based
buttons in the navigation bar will need replacement text to assist navigation. Equally important
is replacement text for general images, especially images that convey a particular message
or act as a link to another page, and there are many circumstances where background colors
can conflict with text of the same color when images are absent. Issues such as these need consideration at every stage of the design process. Essentially,
your web site should make just as much sense with or without all images, and the hierarchy of
your content should remain apparent in any situation.
do. Aside from this flippant point, it should go without saying (although I’ll say it anyway) that
your text should be legible, to the point, and within easy reach. Visitors are rarely coming to a
web site to sit back and admire your graphics—it is most often information they are seeking.
Graphic embellishments are often mere decoration.
The issue of accessibility is an important one here. Responsible web developers spend a lot
of time ensuring that their designs are not compromised under user-defined viewing situations.
For example, if a style sheet is not available, or images are turned off, the image-based
buttons in the navigation bar will need replacement text to assist navigation. Equally important
is replacement text for general images, especially images that convey a particular message
or act as a link to another page, and there are many circumstances where background colors
can conflict with text of the same color when images are absent. Issues such as these need consideration at every stage of the design process. Essentially,
your web site should make just as much sense with or without all images, and the hierarchy of
your content should remain apparent in any situation.
Monday, October 4, 2010
border Setting Four Borders in one
Using border and the border-top, border-right, border-bottom, and border-left properties
allows you to further shorten the given border-style and border-width and border-color
values into one property. Let’s look at an example of this shorthand.
Using the CSS from the previous example, again the same border-color, border-style,
and border-width values are assigned in that order:
/* Container for centering all our content */
#container {
width: 400px;
margin: 10px auto 10px auto;
padding: 20px;
border-top: #000 thin dashed;
border-right: #999 20px dotted;
border-bottom: #333 medium solid;
border-left: #CCC thick ridge;
}
which gives us the same results, but with just four properties in the rule. If all values were to be
the same, the properties can be further combined into one using border:
/* Container for centering all our content */
#container {
width: 400px;
margin: 10px auto 10px auto;
padding: 20px;
border: #000 thin dashed;
}
allows you to further shorten the given border-style and border-width and border-color
values into one property. Let’s look at an example of this shorthand.
Using the CSS from the previous example, again the same border-color, border-style,
and border-width values are assigned in that order:
/* Container for centering all our content */
#container {
width: 400px;
margin: 10px auto 10px auto;
padding: 20px;
border-top: #000 thin dashed;
border-right: #999 20px dotted;
border-bottom: #333 medium solid;
border-left: #CCC thick ridge;
}
which gives us the same results, but with just four properties in the rule. If all values were to be
the same, the properties can be further combined into one using border:
/* Container for centering all our content */
#container {
width: 400px;
margin: 10px auto 10px auto;
padding: 20px;
border: #000 thin dashed;
}
Margin, Padding, and the Body in Css
Back to good old browser default style sheets again. In order to ensure your page content sits
exactly as you desire on all browsers and doesn’t inherit browser defaults, it is important to
consider resetting the page margin and padding in the body selector.
Netscape and IE place a default margin of 8px around the <body> element. The Opera browser
confuses things further by applying a default padding of 8px. Therefore, until all browsers agree
and can settle on either margin or padding to provide this default spacing, it is recommended
that margin and padding be given the values you desire in the body selector:
/* Define default values for the whole site */
body {
margin: 0;
padding: 0;
}
Obviously values of 0 will remove the default spacing entirely, so it may be that you prefer
to set the margin to 10px, 20px, or whatever you need.
Other methods are available that will reset all margins and padding to a defined value that
is inherited throughout unless you declare otherwise. Such methods should be used with caution however, as all headings, paragraphs, lists, and so on will also inherit the value, and if the value
is 0, you might end up in trouble, with all of your page elements bunched together. This would
then require margin and/or padding values to be declared for all headings, paragraphs, and other
elements that typically have sensible default spacing values.
exactly as you desire on all browsers and doesn’t inherit browser defaults, it is important to
consider resetting the page margin and padding in the body selector.
Netscape and IE place a default margin of 8px around the <body> element. The Opera browser
confuses things further by applying a default padding of 8px. Therefore, until all browsers agree
and can settle on either margin or padding to provide this default spacing, it is recommended
that margin and padding be given the values you desire in the body selector:
/* Define default values for the whole site */
body {
margin: 0;
padding: 0;
}
Obviously values of 0 will remove the default spacing entirely, so it may be that you prefer
to set the margin to 10px, 20px, or whatever you need.
Other methods are available that will reset all margins and padding to a defined value that
is inherited throughout unless you declare otherwise. Such methods should be used with caution however, as all headings, paragraphs, lists, and so on will also inherit the value, and if the value
is 0, you might end up in trouble, with all of your page elements bunched together. This would
then require margin and/or padding values to be declared for all headings, paragraphs, and other
elements that typically have sensible default spacing values.
Padding Shortcuts in Css
The same shortcuts used for margin values are also available for padding.
/* Basic container */
#container {
padding: 20px 1em 0 10%;
}
As with the margin property, order is top (20px), right (1em), bottom (0), and right (10px).
Likewise, if all four values are the same, the padding declaration can also be shortened like so:
/* Basic container */
#container {
padding: 20px;
}
/* Basic container */
#container {
padding: 20px 1em 0 10%;
}
As with the margin property, order is top (20px), right (1em), bottom (0), and right (10px).
Likewise, if all four values are the same, the padding declaration can also be shortened like so:
/* Basic container */
#container {
padding: 20px;
}
Padding : Padding Declarations in Css
Padding
Padding is the distance between the edges (borders) of an (X)HTML element and the content
within it, and can be applied to any element.
Padding Declarations
Both length and percentage values are available, although there is no auto value, and negative
values cannot be declared for padding.
Let’s take the container div again, and this time add custom padding to each side:
/* Basic container */
#container {
width:300px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 1em;
border: 1px solid #000;
padding-top: 20px;
padding-left: 10%;
padding-right: 1em;
padding-bottom: 0;
background: #CCC;
}
Figure 3-7 shows how the paragraph within the container (highlighted by a thin border) is
spaced away from each edge by the given padding value.Percentage in this case refers directly to the parent element’s width. So if padding-left:
10% is declared, that equates to 10% of the parent element’s given width.
values cannot be declared for padding.
Let’s take the container div again, and this time add custom padding to each side:
/* Basic container */
#container {
width:300px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 1em;
border: 1px solid #000;
padding-top: 20px;
padding-left: 10%;
padding-right: 1em;
padding-bottom: 0;
background: #CCC;
}
Figure 3-7 shows how the paragraph within the container (highlighted by a thin border) is
spaced away from each edge by the given padding value.Percentage in this case refers directly to the parent element’s width. So if padding-left:
10% is declared, that equates to 10% of the parent element’s given width.
Dimensions: Width and Height in Css
Before moving on, it is worth mentioning two very important properties that can be declared
for any element—width and height.
It might seem a little patronizing to mention them, as their uses must seem obvious. However,
these two properties have already appeared in several examples, and will continue to be used
throughout the book.
Both properties are essential for setting specific heights and widths of elements. Consider
that an element will expand widthwise to fit its container and heightwise to encompass its
content—you will start to realize before long that, in some situations, a certain amount of
control is missing. By applying width and/or height rules, you can regain control.
Values can be given as a length, percentage, or auto. Note that all of these values can be
influenced adversely by other rules within the style sheet, and also by the (X)HTML elements
they might contain. For example, the resulting display can be affected by a number of knockon
values from margin, padding, border, or child elements.
for any element—width and height.
It might seem a little patronizing to mention them, as their uses must seem obvious. However,
these two properties have already appeared in several examples, and will continue to be used
throughout the book.
Both properties are essential for setting specific heights and widths of elements. Consider
that an element will expand widthwise to fit its container and heightwise to encompass its
content—you will start to realize before long that, in some situations, a certain amount of
control is missing. By applying width and/or height rules, you can regain control.
Values can be given as a length, percentage, or auto. Note that all of these values can be
influenced adversely by other rules within the style sheet, and also by the (X)HTML elements
they might contain. For example, the resulting display can be affected by a number of knockon
values from margin, padding, border, or child elements.
Divisions (Divs) in Css
Divisions—<div> elements, widely referred to as divs—are (X)HTML elements used to define
areas of an (X)HTML file. A division can, if you choose, encompass everything else within the
<body> of the page, be it additional elements, text, graphics—anything in fact, or more typically
be used for distinct areas such as headers, footers, navigation bars, and so on.
Most often, the (X)HTML in your templates does not provide enough hooks upon which to
hang your styles. For example, you know how to apply basic styling to a paragraph or header,
but turn paragraphs or headers into boxes, and you’ll find it impossible to enclose other (X)HTML
elements inside the box without compromising your code and causing extreme complications.
This is where divisions (I’ll refer to them mostly as divs from now on) are most useful—
invaluable in fact. Using divs is not unlike magically inventing your own (X)HTML tags, whenever
and wherever you need them.
areas of an (X)HTML file. A division can, if you choose, encompass everything else within the
<body> of the page, be it additional elements, text, graphics—anything in fact, or more typically
be used for distinct areas such as headers, footers, navigation bars, and so on.
Most often, the (X)HTML in your templates does not provide enough hooks upon which to
hang your styles. For example, you know how to apply basic styling to a paragraph or header,
but turn paragraphs or headers into boxes, and you’ll find it impossible to enclose other (X)HTML
elements inside the box without compromising your code and causing extreme complications.
This is where divisions (I’ll refer to them mostly as divs from now on) are most useful—
invaluable in fact. Using divs is not unlike magically inventing your own (X)HTML tags, whenever
and wherever you need them.
Grouping in Css
Another key principle for creating well-organized CSS is grouping. Consider the following CSS,
used to apply styles to the first three (X)HTML headings:
/* Heading styles */
h1 {
font-family:Helvetica,Arial,sans-serif;
line-height:140%;
color:#333;
}
h2 {
font-family:Helvetica,Arial,sans-serif;
line-height:140%;
color:#333;
}
h3 {
font-family:Helvetica,Arial,sans-serif;
line-height:140%;
color:#333;
}
Note that aside from the selector, every rule is the same. The rules are using 13 lines and
are bloating the style sheet unnecessarily. Thankfully, the three rules can be grouped to save
space and keep things manageable:
/* Heading styles */
h1, h2, h3 {
font-family:Helvetica,Arial,sans-serif;
line-height:140%;
color:#333;
}
That’s now just five lines! The three selectors (h1, h2, and h3) are grouped in a commaseparated
list, and this technique can be used to group any selectors with common values. If
later you should decide to treat h3 differently, simply remove it from the list and isolate the
h3 style.
used to apply styles to the first three (X)HTML headings:
/* Heading styles */
h1 {
font-family:Helvetica,Arial,sans-serif;
line-height:140%;
color:#333;
}
h2 {
font-family:Helvetica,Arial,sans-serif;
line-height:140%;
color:#333;
}
h3 {
font-family:Helvetica,Arial,sans-serif;
line-height:140%;
color:#333;
}
Note that aside from the selector, every rule is the same. The rules are using 13 lines and
are bloating the style sheet unnecessarily. Thankfully, the three rules can be grouped to save
space and keep things manageable:
/* Heading styles */
h1, h2, h3 {
font-family:Helvetica,Arial,sans-serif;
line-height:140%;
color:#333;
}
That’s now just five lines! The three selectors (h1, h2, and h3) are grouped in a commaseparated
list, and this technique can be used to group any selectors with common values. If
later you should decide to treat h3 differently, simply remove it from the list and isolate the
h3 style.
Using the Cascade in Css
CSS. Cascading Style Sheets. Cascading. Lovely word. Hmm. Many never stop to think about
that first word, and we are all guilty of just referring to CSS as style sheets. It is a shame that
many ignore the first part of the acronym, when it is the cascade that gives CSS developers the
most power.
Remember that a class value will override that of a base CSS rule. Well, there is also a hierarchy
to be embraced with multiple style sheets dependent on the order and method by which
they are applied to the (X)HTML. That is the cascade.
If you are applying CSS only from one external style sheet, then there is no cascade, as
nothing is applied before or after that style sheet. Things get interesting when you begin to
combine style sheets or methods of application. Let’s look at three examples.
that first word, and we are all guilty of just referring to CSS as style sheets. It is a shame that
many ignore the first part of the acronym, when it is the cascade that gives CSS developers the
most power.
Remember that a class value will override that of a base CSS rule. Well, there is also a hierarchy
to be embraced with multiple style sheets dependent on the order and method by which
they are applied to the (X)HTML. That is the cascade.
If you are applying CSS only from one external style sheet, then there is no cascade, as
nothing is applied before or after that style sheet. Things get interesting when you begin to
combine style sheets or methods of application. Let’s look at three examples.
The Cascade Through Varying Methods of Application
In Chapter 1, you learned of the various methods for applying CSS—inline, embedded, external,
and importing. It is possible to combine these methods to have an effect on the cascade.
Let’s say that you are storing all of your CSS rules in an external style sheet that is dictating
the presentation across your vast web site. For whatever reason, you need to overrule some of
the external styles for just one web page.
Time to embrace the cascade. For that one web page, you could use embedded CSS in the
<head> of the page, redefining the appropriate rules right there. When that web page is loaded,
the browser will apply the CSS it first encounters—the embedded CSS—before looking at your
external CSS to apply the remaining rules. Any identical selectors in the external style sheet will
be ignored.
Need further control? No problem. At the top of the hierarchy are inline styles—the CSS
added directly to the (X)HTML elements. Whatever styles you apply inline will overrule any
declarations in the <head> of the page or in an external style sheet.
Example
To see this in action, you can run through the following simple example:
1. Open external.css and define the default paragraph color (as in Chapter 1) with
p {color#F00;} and save the file.
2. View external.html in your browser. Assuming you are still applying CSS using
external.css, any default paragraphs should be red.
3. Now open external.html and apply the embedded style <style type="text/css">p
{color: #333;}</style> in the head of the template and save the file.
4. Reload external.html in your browser. Now any default paragraphs should be dark
gray, as the embedded CSS is overriding the linked style sheet.
5. Finally, find a default paragraph in external.html and define it with an inline style, such
as <p style="color: #CCC">, and save the template.
6. Reload external.html in your browser. Now the paragraph to which you applied the
inline style should be light gray, as the inline CSS is overriding the embedded CSS and
the linked style sheet. Any other default paragraphs should still be dark gray based on
the embedded style.
Thus the hierarchy is in place. The browser performs the inline rule first, and then looks
to perform any other rules embedded in the <head>, and finally looks to any external files to
complete its understanding of the CSS you created.
The Cascade Through Multiple External Style Sheets
Another method of exploiting the cascade uses multiple external style sheets. You already
know how to link to one or more external style sheets for various platforms (such as printers
and mobile devices), and this approach is similar, except all the external files here are specifically
for the screen:
<link rel="stylesheet" media="screen" type="text/css" href="css/screen/one.css" />
<link rel="stylesheet" media="screen" type="text/css" href="css/screen/two.css" />
<link rel="stylesheet" media="screen" type="text/css" href="css/screen/three.css" />
Imagine that each of the three style sheets features a rule called #header. The declaration
for #header in each style sheet features the same properties (say height, width, and color),
although the value of each is different in some way.
In this instance, the browser will consider the last linked style sheet (three.css) as most
important and perform any rules it contains first of all. Any rules not defined in three.css will
be performed from the second style sheet (two.css). Any duplicate selectors in two.css will be
ignored, overridden by the selectors in three.css. Finally, the browser will perform any remaining
styles from one.css, assuming they are not also defined in the preceding style sheets.
So the rule for #header that was declared in three.css is performed, while any other instances
of it are ignored. Always remember that the later a rule is specified, the more weight it is given.
<link rel="stylesheet" media="screen" type="text/css" href="css/screen/two.css" />
<link rel="stylesheet" media="screen" type="text/css" href="css/screen/three.css" />
Imagine that each of the three style sheets features a rule called #header. The declaration
for #header in each style sheet features the same properties (say height, width, and color),
although the value of each is different in some way.
In this instance, the browser will consider the last linked style sheet (three.css) as most
important and perform any rules it contains first of all. Any rules not defined in three.css will
be performed from the second style sheet (two.css). Any duplicate selectors in two.css will be
ignored, overridden by the selectors in three.css. Finally, the browser will perform any remaining
styles from one.css, assuming they are not also defined in the preceding style sheets.
So the rule for #header that was declared in three.css is performed, while any other instances
of it are ignored. Always remember that the later a rule is specified, the more weight it is given.
The Cascade Through Imported Style Sheets
The hierarchy is also present with imported style sheets. As with the previous examples, it’s all
about the order in which the style sheets are specified. In Chapter 1, we looked at modular CSS,
where the CSS for a site is organized into relevant style sheets, such as default styles, layout
styles, navigation styles, and so on. Here’s a similar example where four modules are imported
via a master external style sheet called external.css. external.css contains the following lines:
@import url("default.css");
@import url("layout.css");
@import url("navigation.css");
@import url("forms.css");
As you’d expect from the order, forms.css is highest in the hierarchy, whereas default.css
is apparently lowest. Let’s assume that in navigation.css (second in the hierarchy) there is a
class called highlight, used to render text red. Let’s also assume that highlight appears in
default.css, but is used to render text orange. As navigation.css has more weight due to its
place in the hierarchy, the rendered text will be red.
Yet still, forms.css isn’t necessarily top of the tree. Remember that these style sheets are
being imported via a master external style sheet. In Chapter 1, you used external.css to call in
two modular sheets. Here external.css can be used again to import the modular sheets. If you
define highlight in external.css, the declared color will override either the red or the orange
specified in the imported style sheets.
Even then, the rule in external.css can still be overridden using embedded or inline CSS
in the (X)HTML template. It’s up to you when you stop the cascade, but be careful not to get
washed away by the cascade and tie yourself in knots.
**■Note If another style sheet were to be imported through one of the modular style sheets using @import,
it would automatically be lower in the hierarchy. In a nutshell, a style sheet always has less weight than the
one calling it.
Class: Applying Classes in Css
A class can be used an infinite number of times per page, making it a very flexible method of
applying CSS. A class defines an element as belonging to a group, or as a reusable object or
style. Classes solve problems in the short term, but can provide less flexibility for more complicated
CSS designs.
applying CSS. A class defines an element as belonging to a group, or as a reusable object or
style. Classes solve problems in the short term, but can provide less flexibility for more complicated
CSS designs.
Applying Classes
The most common way to apply a class is to reference it in the (X)HTML using a class="name"
attribute of an element. As with our ID example, the two classes are named highlight (for red
text) and default (for dark gray text):
<p class="highlight">This paragraph has red text.</p>
<p class="default">This paragraph has dark gray text.</p>
<p class="default">This paragraph also has dark gray text.</p>
Note that as the identifiers are classes, they can be used more than once, hence in the
example two paragraphs have been identified as default, so will be styled the same way. That
would not be acceptable if using IDs.
The corresponding CSS uses a full stop (.) character to denote the rule is a reusable class.
The full stop is combined with the class name to start the rule, followed by the property
declarations:
/* Define highlight class */
.highlight {
color:#F00;
}
/* Define default class */
.default {
color:#333;
}
example two paragraphs have been identified as default, so will be styled the same way. That
would not be acceptable if using IDs.
The corresponding CSS uses a full stop (.) character to denote the rule is a reusable class.
The full stop is combined with the class name to start the rule, followed by the property
declarations:
/* Define highlight class */
.highlight {
color:#F00;
}
/* Define default class */
.default {
color:#333;
}
When to Use and Avoid an ID
When to Use an ID
Only one element on each page can be styled by each unique ID, and therefore IDs should be
reserved for unique, single-use elements such as a header or sidebar, or the main navigation or
page footer. This makes scanning your markup easier, as all ID attributes will denote unique
content areas or special regions of the page, while also providing greater flexibility for more
complex CSS application. Later in this chapter, further uses for IDs will be discussed in the
“Contextual Selectors” selection.
When to Avoid an ID
IDs must be avoided when there is more than one requirement for the CSS rule. Do not use an
ID for anything you are likely to multiply in the future, such as multiple images, link styles, or
paragraphs where more than one will need to be styled a particular way.
Only one element on each page can be styled by each unique ID, and therefore IDs should be
reserved for unique, single-use elements such as a header or sidebar, or the main navigation or
page footer. This makes scanning your markup easier, as all ID attributes will denote unique
content areas or special regions of the page, while also providing greater flexibility for more
complex CSS application. Later in this chapter, further uses for IDs will be discussed in the
“Contextual Selectors” selection.
When to Avoid an ID
IDs must be avoided when there is more than one requirement for the CSS rule. Do not use an
ID for anything you are likely to multiply in the future, such as multiple images, link styles, or
paragraphs where more than one will need to be styled a particular way.
IDs in Css
An ID can only be used once per page, and is a unique identifier to an element. Typically, an
ID is used for any unique page element such as the header, main navigation, footer, or other
key part of the user interface.
Applying an ID
The most common way to apply an ID is to reference it in the (X)HTML using the id="name"
attribute immediately after the opening tag within an element. In this case, our two IDs are
named highlight and default, respectively, and are applied to two paragraphs:
<p id="highlight">This paragraph has red text.</p>
<p id="default">This paragraph has dark gray text.</p>
The corresponding CSS uses the hash (#) character to denote the rule is a unique ID. The
hash is combined with the ID name to start the rule, followed by the property declarations:
/* Define highlighted text */
#highlight {
color:#F00;
}
/* Define default text */
#default {
color:#333;
}
ID is used for any unique page element such as the header, main navigation, footer, or other
key part of the user interface.
Applying an ID
The most common way to apply an ID is to reference it in the (X)HTML using the id="name"
attribute immediately after the opening tag within an element. In this case, our two IDs are
named highlight and default, respectively, and are applied to two paragraphs:
<p id="highlight">This paragraph has red text.</p>
<p id="default">This paragraph has dark gray text.</p>
The corresponding CSS uses the hash (#) character to denote the rule is a unique ID. The
hash is combined with the ID name to start the rule, followed by the property declarations:
/* Define highlighted text */
#highlight {
color:#F00;
}
/* Define default text */
#default {
color:#333;
}
Flagging Rules in Css
Basic comments are of great benefit when scrolling through a style sheet, but there is a quicker
way to track down a rule—vital with large style sheets. Douglas Bowman (www.stopdesign.com)
introduced the idea of flags, where a character not typically found in style sheets is used at the
beginning of a comment to aid retrieval in conjunction with your text editor’s Find tool. It
should also be noted at this point that some CSS-specific software such as TopStyle and CSSEdit
have selector searches built into their feature sets.
Doug suggests adding an equals sign at the beginning of the comment, immediately
followed by the selector to act as a flag. Doing a search in the style sheet for p would typically
find all instances of p, either alone or within other words, and would be pretty useless. However,
searching for =p would bring the rule into focus immediately, as that character combination is
unlikely to appear anywhere else
. /* =p Default styling for paragraphs
-------------------------------------------------------- */
p {
color: #F00;
font-size: 12px;
}
This technique requires discipline, and is something to either adopt completely or leave
well alone. You could end up searching for something you think you’ve flagged, but haven’t.
Therefore I recommend that you flag all rules in this way if you intend to make use of this method.
way to track down a rule—vital with large style sheets. Douglas Bowman (www.stopdesign.com)
introduced the idea of flags, where a character not typically found in style sheets is used at the
beginning of a comment to aid retrieval in conjunction with your text editor’s Find tool. It
should also be noted at this point that some CSS-specific software such as TopStyle and CSSEdit
have selector searches built into their feature sets.
Doug suggests adding an equals sign at the beginning of the comment, immediately
followed by the selector to act as a flag. Doing a search in the style sheet for p would typically
find all instances of p, either alone or within other words, and would be pretty useless. However,
searching for =p would bring the rule into focus immediately, as that character combination is
unlikely to appear anywhere else
. /* =p Default styling for paragraphs
-------------------------------------------------------- */
p {
color: #F00;
font-size: 12px;
}
This technique requires discipline, and is something to either adopt completely or leave
well alone. You could end up searching for something you think you’ve flagged, but haven’t.
Therefore I recommend that you flag all rules in this way if you intend to make use of this method.
Commenting in Css
Defining rules is one thing, but consider how unmanageable a style sheet can become once
it holds 20 or 30 rules. This is where commenting becomes invaluable. The following example
includes simple comments that remind us what the rules are there for:
/* Default styling for paragraphs */
p {
color: #F00;
font-size: 12px;
}
/* Make all top-level headings gray and 16px high */
h1 {
color: #333;
font-size: 16px;
}
Introducing some plain English into the style sheet makes things much more friendly
immediately. All comments begin with a forward slash and asterisk (/*), and end with the
asterisk followed by the forward slash (*/). This is a very simple and easy to remember method
that you may prefer to use in more complicated or important styles, so you can work out what
does what when you return to your style sheets at a later date. Also bear in mind that adding
comments will increase file sizes, but this shouldn’t have a significant impact, especially as
browsers only have to the load the style sheet file once.
A method preferred by many designers further highlights the rule by adding a dashed line
with the comment—a great way of carving up the style sheet and making it more visually
manageable:
/* Default styling for paragraphs
-------------------------------------------------------- */
p {
color: #F00;
font-size: 12px;
}
Again this is very easy to add on the fly, and is arguably the best approach to commenting.
Without question, commenting makes troubleshooting and revisits to old designs much more
bearable, and is a huge timesaver.
it holds 20 or 30 rules. This is where commenting becomes invaluable. The following example
includes simple comments that remind us what the rules are there for:
/* Default styling for paragraphs */
p {
color: #F00;
font-size: 12px;
}
/* Make all top-level headings gray and 16px high */
h1 {
color: #333;
font-size: 16px;
}
Introducing some plain English into the style sheet makes things much more friendly
immediately. All comments begin with a forward slash and asterisk (/*), and end with the
asterisk followed by the forward slash (*/). This is a very simple and easy to remember method
that you may prefer to use in more complicated or important styles, so you can work out what
does what when you return to your style sheets at a later date. Also bear in mind that adding
comments will increase file sizes, but this shouldn’t have a significant impact, especially as
browsers only have to the load the style sheet file once.
A method preferred by many designers further highlights the rule by adding a dashed line
with the comment—a great way of carving up the style sheet and making it more visually
manageable:
/* Default styling for paragraphs
-------------------------------------------------------- */
p {
color: #F00;
font-size: 12px;
}
Again this is very easy to add on the fly, and is arguably the best approach to commenting.
Without question, commenting makes troubleshooting and revisits to old designs much more
bearable, and is a huge timesaver.
Subscribe to:
Posts (Atom)