|
| C S S |
|
|
|
| Cascading Style Sheets |
|
|
 |
|
| This document takes 20 to 30 minutes to read |
|
|
As a critical and powerful partner of the Html language, Cascading Style Sheets live up to everything the creators of the specifications had intended. Everything from text to images to headings and links can be affected by Style Sheet commands. Images may be swapped to create a more dynamic and professional feel to your page. Text colors may be changed; backgrounds may be changed slightly or replaced in their entirety. The Style Sheet is key to the functionality of Dynamic Html.
To explain a Style Sheet we must first begin by reviewing a few basic rules of how a tag and its attributes affect the content of a page. The tag is specified, then the attributes you desire. Those tags and attributes are remembered as objects and values within your browser. Each of these objects has a series of properties that can define their appearance within the rendered document. In order to access these properties, you would place commands within your document HEAD. The tag used for this is the STYLE tag, which will be explained in depth later. For now, all you need to know is that Style Sheet commands are nested within it.
The Cascading Style Sheet is used to set the rules used within your web page for the display of what you have to say. That is, with Style Sheets you specify values such as borders, colors, and fonts. You may also specify the values to be used for backgrounds, margins, padding, and some special image display attributes. Using your Style Sheet wisely, you can minimize the amount of code that goes into generating your web page without degrading your presentation. Often the use of Style Sheets actually enhances the presentation of your creation while making it a more streamlined and efficient Html entity.
The Style Sheet is used throughout your entire web site to enforce certain rules for the display of your content. The Style Sheet rules are normally placed within a file that is labeled with the .CSS extension, standing of course for Cascading Style Sheets. This contains the rules you specify for the display of your web site. The file may be as large or as small as you have a use for, though I'd recommend a file of a maximum fifteen lines. The importance of this will become clear later as we discuss how the Style Sheet decreases the amount of bandwidth needed to generate your web page. Although the Style Sheet rules may be placed within the HEAD of your document or as a tag attribute using the STYLE, the more common method is to place the rules within the external .CSS file. We'll of course touch on all three methods as we delve into the Cascading Style Sheet specifications.
The rules used in your style sheet can be separated into eight different groups, each group representing the function or functions it is intended to perform. Those groups are as follows.
 Backgrounds
Borders
Margins
Padding
Positioning
Classifications
Fonts
Text
Each group has a clearly defined set of functions it performs. You'll be familiar with the capabilities of each as we progress through the CSS specifications. While each of the eight groups performs a different function, they are all presented using the same methods. That is, they are all stated with the same rules in mind. The W3C did a phenomenal job in designing the CSS specifications.
The Style Sheet works by enforcing the rules you define within it. The browser, when rendering your Html document, reads these rules and displays them accordingly. Every page of your web site must have a link which references the Style Sheet, or must contain the rules for the Style Sheet stated as an attribute within a tag, or within the document HEAD.
|
|
|
|
Style Sheet Syntax
Stating a style sheet rule is a simple thing to do, though it will have implications across your entire web site, no matter how large or small it may be. Examine the below sample of a style sheet rule.
BODY {background-color: "red"}
This rule states that the background color of the document is to be 'red' in color. Notice that the rule is enclosed within the opening and closing braces. The value itself is enclosed within quotes, the value for this rule being 'red'. The style sheet rule and the value will always be separated by a colon. The BODY statement before the style sheet rule tells the browser that the rule is to be applied to every instance of the BODY tag within your document. There is, of course, only one BODY tag within an Html document, and the values assigned to the BODY tag apply to the entire document. Therefore the background-color style sheet rule will apply to the entire document: the background will be red in color.
You may state the colors used within your style sheet rules using one of the three methods of stating a color: decimal RGB, hexadecimal #RRGGBB, or named colors. Examine the below example which shows the use of the hexadecimal color, red.
BODY {background-color: "#FF0000" ; color: "blue"}
Hexadecimal color values are always preceded with the pound (#) symbol. The hexadecimal value, because of the BODY statement, still applies to the entire document, and the background is still red in color. A full list of named colors and their hexadecimal and decimal equivalents are listed in the appendices at the back of this book. Notice that I stated two rules here - one for the background color and one for the foreground, or text, color. The rules are separated with a semi-colon. This applies to all style sheet rules that are stated within the same opening and closing braces.
The BODY tag was used in the examples stated above. Any valid Html tag you wish to use in your Html document may be assigned a style sheet rule by simply stating the tag before the style sheet rule you wish to apply. The style sheet is meant to take the place of tag attributes, which must be stated for every instance of the tag. The style sheet works by replacing the typed attributes, encapsulating the attributes (rules) for the entire document in one statement or a series of individual statements.
Stating the attributes for every instance of a tag within your document is great, but what if you have many different tags, and want the same rules applied to each of them, or just a few of them? The answer is the ID and CLASS attributes, which you'll notice are available for almost every tag within the Html language.
The ID attribute is used, with style sheets, to assign an individual identity to a tag. That is, the browser will see it as an individual entity within your Html document, and as such will have a series of properties associated with it. These properties may include style sheet rules. Examine the below style sheet rule.
#heading {font-size: "14pt"}
This style sheet rule states that the font-size of '14pt' should be applied to every instance if the ID 'heading'. That is, every time the ID attribute has a value of 'heading' (ID="heading"), the browser will apply that style sheet rule. Notice the pound (#) sign in front of the rule. This indicates to the browser that the rule is to be made available to every instance of the ID="heading" attribute and value. You may state any wording you wish, with the preference being for something descriptive.
The ID attribute is not the only identifier in the Html language. The second identifier is the CLASS attribute, which works much in the same way as the ID attribute. The difference between the two is that the CLASS attribute is meant to apply the style sheet rule to groups of tags while the ID attribute applies the style sheet rule to only that one instance of the tag. I personally use the ID attribute more than the CLASS attribute because it gives me more control over the individual elements of the Html document I am working with.
Yet another way of describing where your style sheet rules are to be placed can be achieved by the use of a combination of the tag name and an identification selector, as in the following example.
P.verbatim {color: "blue" ; font-family: "arial"}
This example will apply its rules to all instances of the P (paragraph) tag which include the CLASS attribute of 'verbatim'. This is useful in long documents where there are many different formatting options wanted. Any tag and any identification may be used. Notice the period (.) which is used to separate the two statements. This method can be further extended to include the following.
P SPAN {color: "blue" ; font-family: "arial"}
This statement will make the browser display the given rules only when the SPAN tag is present, or nested, within a P tag. If the SPAN tag is used outside a P tag, the rule will not be enforced.
Consider yet another way of stating your style sheet rules: the Pseudo-Element contained within the STYLE tag.
<STYLE TYPE="text/css">
P:first-letter {color: "blue" ; font-family: "arial"}
P:first-line {color: "red" ; font-family: "times new roman"}
</STYLE>
The first line after the initial STYLE tag tells the browser to capitalize the first letter of every paragraph defined with the P tag. The second line tells the browser to capitalize the first line of every paragraph defined with the P tag.
Other Pseudo-Elements are :after and :before, which are used to insert a space directly 'after' and 'before' the first letter of a block of text, usually defined by the use of the P tag.
|
|
|
|
Style Sheet Rules as an Attribute - The STYLE Attribute
In discussing the specifications of style sheets, I mentioned that there are three ways in which to state a style sheet rule. The first we'll cover is the use of the STYLE attribute. The Style attribute is used when you have a situation where you want a certain style to be applied to an element only once or twice within your entire web site. You wouldn't want to waste space in your external .CSS file, or clutter up your document HEAD, so you place the style sheet rule in your document body as an attribute of a tag. Examine the sample below.
<P STYLE="color: 'blue' ; font-family: 'arial' ">
This example uses the P (paragraph) tag to apply a font color of 'blue' and a font type, or family, of Arial. As with all style sheet rules, a colon separates the rule and the value, and the separate style sheet rules are separated with a semi-colon. Using the STYLE attribute in this way is a good way to apply 'one-shot' style sheet rules. Although in this example the rule will apply to the entire paragraph content, the rule will not be inherited by other P tags which occur after the closing () P tag. Notice that in this method the style sheet rules as a whole are enclosed in double quotes. The style sheet values, however, are enclosed within single quotes. This is a good convention to follow, though it is not necessary.
Style Sheet Rules Within the HEAD
The second method of stating a style sheet rule is to place the rule or rules within the opening and closing instances of the STYLE tag within the document HEAD. That is, between the opening and closing instances of the HEAD tag. The browser will see the STYLE tag and render the document contents according to your rules and values stated within the STYLE tags. Any amount of style sheet rules may be stated, with an eye for practicality and efficiency. This method is used mainly when you have an instance of a tag or a group of tags that occur several times in only that one document - the rules are not implemented across your entire web site. Examine the example below.
<STYLE TYPE="text/css">
BODY {background-color: "#FF0000" ; color: "blue"}
#heading {font-size: "14pt"}
</STYLE>
In this example, the style sheet rules are nested within the opening and closing STYLE tags. They are valid only for this document, no other. Any valid style sheet rules may be stated within the document HEAD, in any amount.
Style Sheet Rules in an External File
The third method of including your style sheet rules is to place the rules within an external .CSS file. This is the most functional and widely used method of including your style sheet rules. The rules are imported or linked to the document you wish to display. The browser imports or links to the rules, and implements them. This is the most efficient way to state style sheet rules.
There are two ways in which to link your external style sheet to your document, those methods being the use of the LINK tag and the @import method.
|
|
|
|
The @import Command
The @import command is fairly simple to use, and is very functional. It takes up very little space within your document and has been around since the early versions of the Html language. The @import command is placed within the opening and closing STYLE tags, which themselves are located within the opening and closing HEAD tags, and appears as follows.
<STYLE TYPE="text/css">
@import: url(rules.css);
</STYLE>
While this command is very functional and easy to use, it has been replaced in the latest versions of the Html language by the LINK tag, which is the more widely preferred method.
The LINK Tag
The LINK tag is the other method used to link to the rules contained within your style sheet. It is located within the opening and closing document HEAD tags, and has its own list of attributes, which you can see below
HREF="URL" - This attribute is used to specify the location of a relative or absolute location (URL) of a file to which you want to provide a hyperlink. A hyperlink can point to a different document, another location within the same document, or to any image or program file the browser or operating system supports.
MEDIA=" ... " - This attribute is used to set the destination medium for style information, and may contain more than one MEDIA type. The MEDIA types are: SCREEN, PRINT, PROJECTION, BRAILLE, SPEECH, and ALL.
NAME=" ... " - This tag is used to mark a location within a document with a unique name. This named location can then be quickly moved to by means of a hyperlink using the HREF="#URL" attribute. Note the pound (#) sign before the URL. The pound sign used in this way indicates to the browser that the target location has been defined by the NAME=" ... " attribute.
REL=" ... " - This attribute is used to define relationship hyperlinks.
REV=" ... " - This attribute is used to define reverse relationship hyperlinks.
TARGET=" ... " - This attribute indicates the name of the frame in which the linked document, image, or program file will be loaded. Frame names are defined with the FRAME tag.
TITLE=" ... " - The TITLE attribute is used to display a note or information in a popup window pertaining to the object to which it was assigned. The popup window is invoked by holding the mouse pointer over the object.
TYPE=" ... " - Specifies the MIME type of a style sheet to import with the LINK tag. A full list of MIME types is available in the appendices at the back of this book.
You see that the LINK tag is of limited functionality. You'll use it to link to external .CSS or .JS (JavaScript) libraries. More on JavaScript external libraries in a later chapter. Examine the example below of the use of the LINK tag.
<LINK REL="stylesheet" TYPE="text/css" HREF="rules.css">
You see that it is a fairly simple tag to use, though is very functional and critical to your implementation of the Cascading Style Sheet specifications.
A Sample External Style Sheet
In order to give you an idea what a functional and complete style sheet would look like, examine the 'rules.css' style sheet given below.
th {background-color: "#1E90FF"}
#head {color: "red" ; font-size: "18"}
#head2 {color: "blue" ; font-weight: "600"}
#head3 {color: "green" ; font-weight: "600"}
#head4 {color: "blue" ; font-weight: "600" ; cursor: "hand"}
#head5 {color: "black" ; font-size: "20pt"}
font {color: "black" ; font-size: "10pt"}
li {color: "blue"}
#main {background-color: "black"}
#hand {cursor: "hand"}
body {background-color: "lightblue" ; font-family: "arial"}
p {color: "black" ; font-size: "10pt"}
td {font-size: "10pt"}
h4 {color: "blue"}
Examine the individual statements. They are, for the most part, very intuitive as to what each rule does. In the chapters ahead, we'll begin working with the individual statements within each group of style sheet rules. In examining this sample style sheet, you'll see that the amount of lines does not exceed the recommended fifteen lines in length. The length of your style sheet is important for rendering speed reasons. Every time the browser encounters a style sheet rule, the external file containing your style sheet rules is read, or parsed, by the rendering engine. If there are twenty instances of a style sheet rule within your document, the file will have to be parsed fifteen times. With fifteen lines getting parsed twenty times, the total amount of lines being parsed is 300. The browser can handle this, but you wouldn't want the total number to be anything higher. In short, a large number of lines and instructions within your style sheet can slow rendering, increasing the ever-present user frustration level.
|
|
|
|
The DIV and SPAN Tags as Style Sheet Containers
Eventually you'll need a tag that will help you logically separate and apply certain characteristics to a specific block of text or section of you document. There are two tags available which will do just that - divide and apply characteristics to the tags you want, where you want. They are the DIV and SPAN tags. We'll begin by explaining why these tags are a necessary part of the mental planning you must put into every Html document before you actually put the code into place within your document.
A Style Sheet rule may be assigned to affect every instance of a given tag within your document. This, sometimes, is not enough to accomplish what you have in mind with efficiency. Occasionally you'll have to apply a specific style sheet rule to a block of your Html document. To do this you'd use the DIV and SPAN tags within your document as containers for the block of Html code. The code is nested within the opening and closing tags, with an ID or CLASS attribute which references a style sheet rule you have previously set up either in the document HEAD or in an external style sheet. You may also assign a style sheet rule to affect every instance of the SPAN or DIV tags. Examine the below example.
<SPAN ID="head3">
<P> - - - Insert Desired Text or Tags Here - - -
</SPAN>
In this example, we applied the 'head3' style sheet rule to the contents of the SPAN tag. The contents may be any you have a use for, in this case the tag being the P tag. It is important you use the closing tag in the right place to achieve the effect you're looking for. Also, try to avoid nesting SPAN tags with style sheet rules inside other SPAN tags with style sheet rules - you'll find that some funky things happen when you attempt to do this because of the inheritance, or cascading, effects of the Cascading Style Sheet.
A bonus to using the DIV tag is its array of positioning and alignment attributes, which can be set to align your content as well as apply a style sheet rule or rules to. Consider the following example.
<DIV ALIGN="center" ID="head3">
- - - Insert Desired Text or Tags Here - - -
You see that the DIV tag not only applies the style sheet rules to the block of code, but it also aligns the contents nested within the tag to be center justified. That is, all of the code within the opening and closing DIV tags will be centered, even if the code represents text, horizontal rules, or images. Using the alignment and positioning attributes of the DIV tag with a style sheet rule can be an extremely efficient and affective means of creating the presentation you are looking for, with a minimal amount of coding.
Including Backgrounds
In working with backgrounds, you'll no doubt see that the background of your document or web page can make all the difference. The Cascading Style Sheet specifications have provided a rule for just about every background option you can think of. You may have to combine several style sheet rules to achieve the desired result, but the result can almost always be obtained.
There are six different style sheet rules that can be applied to your document. Each will be explored in depth as we delve into working with backgrounds. I think you'll be pleased at the results that can be obtained by the use of just these six rules. They are as follows.
Background-Image
Background-Attachment
Background-Color
Background-Position
Background-Repeat
Background
As with all style sheet rules, the rule itself is separated from the rule value by a colon. A semi-colon separates the individual rules. All style sheet rules are enclosed within opening and closing braces. In all of the examples we'll be reviewing, the style sheet rules will be applied to the BODY tag. This is because background rules are applied most often to the BODY tag, since the rules represent a background for the entire document.
|
|
|
|
Background-Image
The background-image rule is used to specify the image to be used as the background of your document. The image may be of any type your browser supports, though for widespread use across the Internet you should use the GIF, JPG, or BMP types of image. This rule is used to specify the image to be used in the background. The default for this property is to have the image placed in the upper left corner of the window. The image will not be tiled or repeated in any way, and will be attached to the page, not the element. Examine the values for this rule, shown below.
none - This is the default, and causes no background image to be displayed. Since it is the default, it is mostly used to over-ride a previous background-image statement.
url - URL stands for Uniform Resource Locator, and is used to specify the location of the image file to be used.
The two values are all there is to this rule. Examine an example for this rule, seen below.
BODY {background-image: url("background.gif")}
This example will assign the image file 'background.gif' to be the background image. Notice that the image is within parentheses, with the 'url' placed just before it. This is necessary to the functionality of this rule, and may not be left out. The actual location of the file may of the absolute or relative type of URL.
Background-Attachment
The background attachment rule is used to fix the background image to one spot in your background. That is, the background image, specified with the background-image rule, will be either held in place (FIXED), or will scroll (SCROLL) with the document content. The two values, FIXED and SCROLL are all you would need to specify to make the image stay stuck to the background or to scroll with the document content. Examine a couple of examples, seen below.
BODY {background-image: url("background.gif"); background-attachment: "fixed"}
This example will cause the image 'background.gif' to remain fixed while the rest of the content of the page scrolls normally.
BODY {background-image: url("background.gif"); background-attachment: "scroll"}
This example uses the image 'background.gif' within a paragraph. The 'scroll' value of the document-attachment property shows that the image will scroll with the paragraph text.
Background-Color
This property is used to specify the background color for individual elements, or for the entire document. Inheritance rules are in effect for this property when used with the BODY class. It should be noted that this property sets only a background color. It is not used to specify an image to be used for the background. See the background-image property for this functionality. It should be noted that in some browsers the background color will be rendered before any images used for the background 'wallpaper' (such as a .gif file) are loaded. It is recommended you use a color that will fit well with the background image. Background properties can be set for individual elements or as a global (default) property which will effect the entire contents of the page. If a background property is not specified, the browser will implement the default color scheme (which is rather dull), which will almost certainly not look the way you intended. Examine the examples, seen below.
BODY {background-color: "#FF00FF"}
This example sets the background color of the area defined by the heading level H1 to the numeric hexadecimal value '#FF00FF', which is the color fuchsia.
BODY {background-color: "lightblue"}
This example sets the background color of the area defined by the P (paragraph) as the named color 'lightblue'.
Background-Position
The background position rule is used to position the background in the box defined by the tag used. The position of the image or object to be used is indicated in relation to the area of the element box. The values for this rule specifies the measurement options for the placement of the background element. The measurement indicates the distance from the box border where the browser starts to render the image. The measurement options for this value are available in the CSS language reference section of this book. Length measurements may be specified as an absolute value or as a percentage of available space. When stating the positioning of an image, two numbers may be used to indicate the vertical and horizontal starting point. The first will be the vertical, the second the horizontal.
Length or percentage values may be used. There is, however, some difference between using a percentage value and a measured value: The percentage will apply to both the image and the element in the same way. The measured length value will begin its measurement from the point at which the top left corner of the image appears. A value of '0% 0%' is the same as using a value of top left. A value of '50% 50%' will cause the positioning to begin at the middle of the element and the image. If the image is larger than the element box, the overlapped parts of the image aren't displayed. A value of '50% 2.5cm' would cause the starting point for measuring the placement of the image at the middle of the box and to start rendering the image at its middle. The image would begin to appear at 2.5 centimeters below the top of the element box. Decimal, positive, or negative numbers may be used when specifying the length.
You see that this rule can be a powerful positioning tool for your web page. Examine the examples, seen below.
body {background-image: url("banner.gif"); background-position: "50% 50%"}
This example causes the image file 'banner.gif' to be positioned at the exact center of the document, since the background-position and background-image properties were used with BODY.
H1 {background-image: url("headingback.gif"); background-position: "top left"}
This example cause the image 'headingback.gif' to be displayed as the background within the area of the heading level H1. The image will be positioned in the top left corner of the H1 element box.
Background-Repeat
The background-repeat rule is a fairly useful rule, used mainly to specify whether or not the image used as the background should be 'tiled' to fit the available space or displayed just once. The values for this rule are 'repeat-x' to repeat the image on the X-Axis, 'repeat-y' to repeat the image on the Y-Axis, 'repeat' to repeat the image on both the X and Y Axes, and 'no-repeat' to show the image just once, with no tiling or repetition. As with all style sheet rules, you would normally use many rules together to achieve the desired result. The example below shows how to use many rules at once.
P {background-image: url("watermark.gif");
background-color: "white";
background-positon: "top left";
background-repeat: "repeat-x"}
This example causes the paragraph element, when called, to have the 'watermark.gif' image displayed as the background. The image will be positioned starting at the top left of the element box and will repeat across the horizontal plane (across the top) of the element box until it runs out of space. If for some reason the image is not available, the background will be displayed as white, due to the background-color: white value. Notice the semi-colons used to separate the individual rules. Also note that all values are within quotes.
|
|
|
|
Background
This rule is used to encapsulate the five individual background properties into one easy to use statement. The rules covered by the use of this one statement are Background-Image, Background-Attachment , Background-Color, Background-Position, and Background-Repeat. The rules are space delimited, and enclosed within quotes. The common style sheet rules still apply - a colon separates the rule from the value, and the rule is enclosed within opening and closing braces. Consider the following examples.
BODY {background: "white"}
This example sets the default background of the document to 'white', which as a hexadecimal value is '#000000', the color 'white' being an absence of color, hence the zero's.
P {background: "logo.gif blue top right"}
This example sets the background of the space specified by the P tag to display the logo.gif image, which will be positioned in the top right corner of the H1 area. If the image logo.gif isn't available, the background color will be blue.
You see now that the background properties specified within the Cascading Style Sheet specifications are formidable as well as easy to use and understand. Read on.
Working with Borders
The border used within your document is an important part of your web site's presentation. Borders can be any color you wish, with a large array of styles to choose from. The border of an element resides between the padding and margin areas of the element container. Border properties may be set as a single value for all four sides, or as individual values for each side. Border values are not inherited: they are valid only in that instance of the element. The individual Border rules are as follows.
Border-Bottom-Width
Border-Bottom
Border-Color
Border-Left-Width
Border-Left
Border-Right-Width
Border-Right
Border-Style
Border-Top-Width
Border-Top
Border-Width
Border-Bottom-Width, Border-Left-Width, Border-Right-Width, and Border-Top-Width
These rules are used to set the individual widths of the bottom, left, right, and top borders surrounding the given tag, and are by default a value of 'medium' thickness. There are many measurement options for these rules, which can be found in the CSS language reference section of this book. These values are stated as follows.
P {font-size: "12pt";
font-style: "arial, sans serif;";
border-style: "ridged";
border-color: "blue";
border-bottom-width: "0.5em"}
This is a good example of how to group your border rules. This example sets the paragraph contents to 12 point text with an Arial primary font. The border will be of the ridged type, blue, and with a width of 0.5 em units, which in this case will be 6 points wide.
#banner {border-style: "solid";
border-color: "#FF00FF";
border-bottom-width: "thin"}
This example will set the class associated with the style 'banner' to have a border of the solid style which is #FF0FF (fuchsia) in color with a width designated as 'thin'.
Border-Bottom, Border-Left, Border-Right, and Border-Top
These rules are used to set the values of the individual borders using one statement. Values for the width, style, and color may be defined for each side around the given tag. Notice in the examples that each value is separated, or delimited, by one space. This is required for the browser to understand what it is you intend your border to look like. There is no real order which the values must be stated - the browser will know what you intend by the rule value itself, as each is uniquely presented.
img.logo {border-left: 15px solid #FF000}
This example applies to the image represented by the CLASSID 'logo'. It assigns a border of 15 pixels along the left side of the image. The border is solid, and its color is red, which is represented by the RRGGBB value '#FF0000'.
P {border-bottom: 2em ridge yellow}
This example puts a border along the bottom of the paragraph which is 2 EM units wide, with a ridged effect. The 'yellow' is a named color, and will obviously be the color of the border.
Border-Color
This rule is used to specify the color of the border surrounding the element or object. The foreground color of the document is used as the default setting for this property. The value for the color may be a named color, a decimal RGB color, or an #RRGGBB value expressed in the hexadecimal numbering system. If a single color is specified, that color will represent the entire element border color. If two values are used, the first value will specify the top and bottom border colors, and the second color value will represent the right and left border colors. If three values are used, the first will represent the top border color, the second will represent the right and left border colors, and the third will represent the bottom border color. If four values are used, the first will represent the top border color, the second the right, the third the bottom, and the fourth the left. Examine the given examples.
P {border-width: "10px";
border-color: "red";
border-style: "solid"}
This example will display a solid style border 10 pixels wide, which is colored red.
img.banner {border-style: "solid";
border-width: 15px;
border-color: "#FF00FF blue #FF00FF blue"}
This example will display a border around the image 'banner' of the solid style 15 pixels wide. The top and bottom border colors are represented by the #RRGGBB value #FF00FF, which is Fuchsia. The right and left borders are represented by the named color 'blue'.
Border-Style
This rule is used to display a border style other than the normal solid color. The default for border styles is 'none'. In order for the border to be made visible, a border-style and a border-width statement must be made. I recommended you experiment with these settings to get a feel for them. As many as four style values may be used around the border of an element. It should be noted that some browsers might not be able to display the groove, ridge, inset, or outset values. If these values are encountered, a solid line will most likely be displayed as a substitute. Varying the width, style and color for each value will produce some interesting effects.
none - This is the default, and causes no border to be displayed. It is used to revert back to the default 'none' state.
dotted - This value will obviously display a dotted line for the border.
dashed - This value will display a dashed line for the border.
solid - This value will display the border as a solid color.
double - This value will display the border as two solid lines. The area between the solid lines will be the color of the background.
groove - This value sets the border to an indented 3-D 'grooved' effect.
ridged - This value will display the border as a raised 3-D 'peaked' effect, like a mountain ridge.
inset - This is another 3-D effect that causes the contents of the element to appear as though it were recessed deeper in the page than the surrounding content.
outset - This value produces the 3-D effect of having the contents of the element to appear as though it were raised to a higher level than that of the rest of the screen.
Consider the following examples.
P {border-width: "10px";
border-color: "red";
border-style: "solid"}
This example will display a solid style border 10 pixels wide, which is colored red.
#banner {border-style: "solid";
border-color: "#FF00FF";
border-bottom-width: "thin"}
This example will set the class associated with the style 'banner' to have a border of the solid style which is #FF00FF (fuchsia) in color with a width designated as 'thin'.
|
|
|
|
Defining Margins
The margin is what is used to set the box size around the element. It is the area between the borders to the edge of the box. The margin is colored the same color as the background of your document. It is what is used to separate the given tag's area from the surrounding content. It is used to separate an image from the text surrounding it, for example. There are five rules that allow you to this. They are as follows.
Margin-Bottom
Margin-Left
Margin-Right
Margin-Top
Margin
Using these five rules, you can create an ordered, aesthetically pleasing appearance to you Html document.
Margin-Bottom, Margin-Left, Margin-Right, and Margin-Top
The use of these rules is fairly straightforward. They are stated individually to represent the margin around the bottom, left, right, and top of the given tag. They represent the space between the tag's area and the surrounding content. Examine the below examples.
P {margin-bottom: 10px}
This example will set the margin along the bottom of the element to a width of 10 pixels.
P {margin-left: 10px}
This example will set the margin along the left of the element to a width of 10 pixels.
P {margin-top: 10px}
This example will set the margin along the top of the element to a width of 10 pixels.
Margin
This rule is used to state the values for the top, bottom, left, and right margins using one efficient, easy to use statement. Using a single value will result in a margin that is equidistant on all sides. The rules for specifying more than one value are easy to understand. If you use two values, the browser will use the first value for the top and bottom margins, and the second value for the left and right margins. If you use three values, the browser will use the first value for the top, the second value for the left and right, and the third for the bottom. If four values are used, the browser assigns the first value to the top, the second to the right, the third to the bottom, and the fourth to the left. These values may be a mixture of absolute values (such as millimeters or pixels), or relative values (such as em or ex units).
P {margin: 10px}
This example will set the margin around the entire element to a width of 10 pixels.
P {margin: 10px 20px}
This example will set the top and bottom margins to a width of 10 pixels, and the right and left margins to a width of 20 pixels.
P {margin: 10% 20% 10% 20%}
This example will set the width of the top and bottom margins to 10 percent of the element width, and the right and left to 20 percent of the element width.
|
|
|
|
Defining Padding
The padding of an element refers to the distance between the element itself and the border which surrounds that element. The element can be any object such as text or an image. Padding values are not inherited. Although decimal values are valid, negative values are not allowed. The five padding rules are as follows.
Padding-Bottom
Padding-Left
Padding-Right
Padding-Top
Padding
Padding-Bottom, Padding-Left, Padding-Right, and Padding-Top
These rules are used to define the padding space between the edges of the element and the inner edge of the border around it. Values for the padding-bottom, Padding-Left, Padding-Right, and Padding-Top rules may be relative or absolute values. Consider the following examples.
P {padding-bottom: 10px}
This example will set the padding border around the paragraph to 10 pixels in width.
img.logo {padding-bottom: 10%}
This example will set the padding border around the image assigned the CLASS ID of logo to 10 percent of the total height of the image.
Padding
This property is used to set the distance of all four padding directions (top, bottom, right, left). Using a single padding value will result in a border that is equidistant on all sides. The rules for specifying more than one value are fairly simple, and are universal to all of the 'shorthand' rules of this type. If you use two values, the browser will use the first value for the top and bottom padding, and the second value for the left and right padding. If you use three values, the browser will use the first value for the top, the second value for the left and right, and the third for the bottom. If four values are used, the browser assigns the first value to the top, the second to the right, the third to the bottom, and the fourth to the left. These values may be a mixture of absolute values (such as millimeters or pixels), or relative values (such as em or ex units). As you can see from the examples given below, the padding of an object's document area can be an important part of your visual presentation.
H1, H3 {padding: 15pt, 10pt, 15pt, 10pt}
This example will set the padding around the heading elements H1 and H3 to be 15 points for the top and bottom, and 10 points for the right and left.
P {font-size: 2em; padding: 0.5em}
This example will set the padding for the paragraph to be 1em on all sides. The 1em value is derived from multiplying the font size of 2em by 0.5.
Understanding Positioning
Absolute and Relative positioning is an important part of the CSS-P specifications, the 'P' standing of course for 'Positioning'. Sometimes the browser, in rendering your document, positions your document object in an undesired location. This is because of the cascading, or bubbling, effect of rendering many document objects at once. In order to over-ride the normal cascading rules, you would use the CSS-P rules, which can be used to place an object pretty much anywhere you like within your document. The object can be placed exactly where you specify regardless of its location within the bubbling order of the document.
Using positioning rules in JavaScript functions, you can make the objects within your Html document fly around the page, center themselves in the screen regardless of the screen size, and even create draggable objects. An understanding of these concepts is crucial to achieving your desired result when constructing your Html documents.
When an object is said to be absolute-positioned, its location has been specified in relation to the top left corner of the browser frame or browser window. The positioning values for the object are specified in pixels, and are used within a STYLE statement. Consider the following.
<STYLE>
APPLET {position: "absolute" ; top: "20" ; left: "20"}
</STYLE>
This sample code tells the browser to render the applet stated with the APPLET tag to be twenty pixels from the top and left edges of the window or frame. While you experiment with positioning, you may run into some confusing results. For example, this sample of code assumes there would be only one applet within the entire document because of the use of the APPLET tag, which here is stated before the rule. If there were two applets defined by the APPLET tag, both would be rendered in the same location - twenty pixels from the top and left edges of the screen. Notice that the rule, as whole, conforms to the commonly used practices used when stating a style sheet rule. These practices are universal, and are not broken for any reason. The 'position' rule may be used in any of the three methods of invoking STYLE - as rules within a tag, rules within an external style sheet, or as an attribute within a tag, using the STYLE attribute.
There are five possible values for the 'position' rule. They are as follows.
absolute
relative
static
fixed
normal
You'll most likely use the 'absolute' value more than any other. The absolute value is used with the following tags.
APPLET
DIV
EMBED
FIELDSET
HR
IFRAME
INPUT
MARQUEE
OBJECT
SPAN
TABLE
TD
TR
TH
The 'relative', 'static', 'fixed', and 'normal' values can be used with just about any valid tag. The 'relative' tag is stated relative to the location of the previous tag's area. The 'static' value has the same functionality as the 'normal' value. 'Normal' is used within Internet Explorer exclusively. To avoid confusion, it is recommended you use the 'static' value instead, since both the major browsers, Internet Explorer and Netscape Navigator, recognize it.
There are eight different rules other than position that you may use in creating the desired positioning of your document objects, though without stating the 'position' rule they are useless. They are a follows.
top
left
height
width
clip
overflow
visibility
z-index
Used with the position rule, these eight rules can accomplish all that you need in the way of positioning your document objects. We'll now examine each of these rules in detail.
left and top
These two rules are used to position your object in reference to the top and left edges of your browser frame or window. The measurements options may be any of the following absolute or relative options.
mm millimeters.
cm centimeters.
in inches.
pt points, which is a way of measuring the font size. One point is 1/72 (one seventy-second) of an inch.
pc picas, which is yet another way of measuring font size. One pica is equal to 12 points.
px pixels, which is one screen element. The display you're looking at is comprised of thousands of individual dots, each of which can change in color and luminosity to achieve the desired image. Each of these dots is referred to as a pixel.
ex x-height settings, which is the height of the font's lower case letter 'x'.
em em setting. One em is equivalent to the width of a capital letter in the chosen font.
Millimeters, centimeters, inches, points, and picas are considered to be absolute lengths because you're specifying the exact size of the type.
Relative units such as em and ex are interpreted as references to the parent font size.
Percentage - This value sets the height for the element (the 'thing') as a percentage of the original height of that element.
height and width
Using any of the above measurement values, you may specify the height and width of the document object you are working with. This is most commonly stated when using images. The image will be expanded or contracted to fit the space specified by the use of this rule. It is recommended that you use the exact dimensions of the image so it appears as you intended. You would normally use pixels as your measurement option for this instance.
When using this rule with objects other than images, specifying the height and width using an option other than pixels can be beneficial to your application. Using the EM measurement option when specifying the height and width of a TEXTAREA box, for example.
clip
Image clipping can be a useful part of your CSS knowledge. Basically, it is used to display a part or parts of an image. That is, not the whole image as it was made, but how you want it to appear in your finished document. A clipping region is a rectangular area defined by you, the author.
Take, for example, an image that is eighty pixels high and two hundred pixels long. Suppose you don't want the entire image to appear in your finished document. You would specify a clipping area that 'cuts out', or 'clips' the image area down to the size or sizes you require to achieve your desired result. There is no limit to the amount of clipping regions you may specify.
It should be noted that if you require a border around your clipped image, your best bet is to nest the image within a tag that can display its own border, separate from the many types of image borders which can be specified. This is because the area being clipped will include the border around the image.
The clipping region is specified using four values that represent the sides of the clipping region. The values are specified in clockwise order, starting at the top edge of the image. The order of the values within your statement, then, would be top, right, bottom, and left. The values are presented in a space-delimited list enclosed within brackets, not braces. The example below shows a simple clipping region that is imposed on the image file 'banner.jpg'.
<SPAN STYLE="position: 'absolute' ; clip: 'rect (85px 85px 85px 85px)' ">
<IMG SRC="banner.jpg" HEIGHT="100" WIDTH="100">
</SPAN>
In this example, the image 'banner'jpg' is clipped fifteen pixels on all four sides of the image. The actual size of the image is one hundred pixels square, as defined by the HEIGHT and WIDTH attributes of the IMG tag. The area that is 'clipped' will appear the same color as the document background, somewhat like the padding area which can be specified to encompass the image.
overflow
Suppose you have an image, one hundred pixels square, which you intend to show in your document. Suppose also that you don't have the necessary space to accommodate this image, for some reason, and the image itself does not need to be whole - the user will get the gist of the image from just a portion of it. In this case, you would use the overflow rule. The overflow rule is used to set whether or not the image that overflows the area defined by the height and width will be displayed. It is similar to the clip rule in that it cuts off a portion of the viewable image's area. It works a bit different, however, as the following example illustrates.
<SPAN STYLE="position: 'absolute' ; height: '75' width: '75' ; overflow: 'hidden' ">
<IMG SRC="banner.jpg" HEIGHT="100" WIDTH="100">
</SPAN>
As you can see from the example, the image's actual size is one hundred pixels square although the height and width rules specify dimensions that are only seventy five pixels square. The overflow rule stated here will cause the portion of the image that 'overflows' the set image area to be clipped off as it runs out of space. The image file itself is not altered in any way - the rest of the image is simply not displayed. If the overflow rule weren’t invoked in this example, the image would be displayed at its actual size, which is one hundred pixels square, which is twenty five pixels larger than the area which is available.
visibility
This rule is used to set whether or not the element to which it is invoked will be visible. The rendered document will still include the space that the invisible object takes. It will simply be hidden from view. It should be noted that this contrasts from the display: 'none' rule which performs the same function, with the difference being that the document closes up the gap left by the invisible page object. Consider the following example of the use of the visibility rule.
<SPAN STYLE="position: 'absolute' ; height: '100' width: '100' ; visibility: 'hidden' ">
<IMG SRC="banner.jpg" HEIGHT="100" WIDTH="100">
</SPAN>
In this example, the image 'banner.jpg' has been hidden. The space of one hundred pixels square will still be rendered within the document, but the image itself will be invisible. Depending on which tag a border was specified, the border for the image may or may not be displayed around the image's area.
z-index
An element's 'z-index' value refers to its stacking order. That is, the order in which that layer of your document will be displayed. The 'Z' in z-index refers to the third dimension, called 'Z' (to put this into context, the other two dimensions are referred to as 'X' and 'Y'). This rule is used primarily with images that you want to overlap in your finished document. Setting the z-index to '1' will display that image below the image set to '2', or any higher z-index value. The general rule is that the element with the highest z-index value will be the element that is closest to you, the viewer. The lowest z-index value is zero, not one.
The values of this rule may be changed via scripting means to react to a user's actions. This is the most commonly used function of this rule. If you do not define a z-index value to your elements, the order will be determined by the order that the elements appear within your document source code. Even so, within Netscape Navigator there is at least one exception to this rule - you cannot place a form element behind a positioned element.
clear
This rule is used to specify which elements or items on the page will be allowed to be positioned in relation to the element to which it was invoked. For example, you can allow or disallow whether an image will have another image placed next to it, on either side. This property and its values cannot be used by inline elements. The entire set of values for the clear rule may be found in the CSS reference section of this book.
P {clear: both}
This example will not allow an element of any type to be placed on either side of the element to which this value was invoked.
H1 {clear: left}
This example will disallow any items to be placed on the left of the element, which in this case is a horizontal rule.
float
The float property is used to specify the placement of an element in relation to the other elements of the page. This property is not inherited. The value of 'none' is the default setting. With the float property set to the value of 'none', the element will be placed according to where it appears in the HTML document. With the float value set to a value of 'left' or 'right', the rest of the document content will be rendered to the left or right of the document object. Consider the following.
P {float: right}
This example will cause the element to which this value was invoked to be placed on the right hand margin of the document. The other elements of the page will wrap around this element on the left hand side.
IMG.logo {float: left}
This example will cause the image assigned the class id of 'logo' to be placed on the left hand margin of the document. All other elements of the document will wrap around the right side of this element.
|
|
|
|
height and width
This property is used to control the height and width of an element on the page, and is mostly used with images. You would normally use the height and width of the image itself for this setting. If an image is larger or smaller than the height or width specified with this rule, the image will be scaled by the browser to fit the specified dimensions. A negative value will not be allowed.
IMG.logo {height: auto; width: auto}
This example will cause the image associated with the 'logo' class to be placed on the page using its original height and width.
IMG.logo {height: 200%; width: 200%}
This example will cause the image associated with the 'logo class to be placed on the page at twice (200%) its original height and width.
Understanding Classifications
The classification properties of your document refer to the element type that is being used. Examples of this are inline elements, block elements, and list items. With these rules, the element type can be changed. This property will give you more control over the presentation and functionality of your document. There are six commonly used classification rules, listed below.
Display
List Style Image
List Style Position
List Style Type
List Style
White Space
These rules conform to common style sheet syntax of a rule being enclosed within braces, the individual rules being separated from each other by a semi-colon. The rules are separated from the rule values by a colon, and are enclosed within single or double quotes.
display
This rule is used to change the display values of an element, and can be used to change the element's type from inline, block, and list item. Examine its values, listed below.
block
compact
inline
inline-table
list-item
none
run-in
table
table-caption
table-cell
table-column-group
table-footer-group
table-header-group
table-row
table-row-group
You see that there is a wide array of different element types that you can use to achieve your desired result. Some of these values are never used because there are easier ways of achieving the proper classification and context of any given element. The values used most often include the following.
none - This value will prevent the element to it was invoked from being displayed. When this value is set, the surrounding document elements behave as if it weren't there, closing up the space the element previously occupied.
block - This value will insert the equivalent of a line break before and after the element in which it was invoked.
inline - This value is used to remove the line breaks from the element to which it is invoked, and forces that element into the flow of a parent element.
list-item - This value will set the element as a list-item. That is, it will appear as a list-item in an ordered or unordered list.
#image {display: none}
This statement will force the browser to not display the image or object referred to by the identification (stated by the ID or CLASS attributes) of 'image'. The document area it would normally take is closed upon by the surrounding content, as if the element or object was never there.
|
|
|
|
list-style-image
This value is used to specify an image to be used as the bullet. Any image may be used, provided you have the necessary space and it fits with what you intend your page to look like. While it might occur to you to use the IMG tag to identify your bullets, using this rule with the UL tag inherits the textual placement attributes of the common listed item, taking the guesswork and hassle out of positioning your text beside each of the individual IMG tags you'll have to define to make your list. Examine the values of this simple to use yet handy rule.
none - This value will suppress the image bullets the element may have inherited from a previous list-style-image statement (a parent element).
url - This value is used to specify the location (url) of the image to be used as the bullet.
This rule and its values are used with the UL tag, which signifies an unordered list. That is, a list which uses bullets, not numbers, to identify each list item. An example is given below.
OL {list-style-image: url('bigbullet.gif')}
This example will cause the bullet to be displayed as the image file 'bigbullet.gif'. Again, you'll notice that the common style sheets rule still apply.
list-style-position
This property is used to set the positioning of the bullet relative to the line of the text being used as the list item. The options are inside and outside, and are used to control the positioning of the bullet with respect to the surrounding text.
inside - Using the 'inside' option will produce a bulleted paragraph where the text is aligned with the bullet. For example:
This is the paragraph text.
This is the paragraph text.
outside - Using the outside option will produce a bulleted paragraph where the bullet is outside the text area. For example:
This is the paragraph text.
This is the paragraph text.
The bullets themselves may be specified as 'disc', 'square', and 'circle', which conforms to the attribute values of the UL tag. The values are space delimited, and enclosed within single or double quotes. Examine the samples below.
UL {list-style: squares inside}
This example will set the unordered list bulleted with squares, with the bullet displayed inline with the text.
OL {list-style: upper-roman outside}
This example wil display the ordered list bulleted with upper case roman numerals, with the bullet displayed outside the line of text.
list-style-type
This value is used to set the type of bullet used in an ordered or unordered list. The options for an unordered list are disc, circle, square, and none. The options for an ordered list are decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, or none. The default for an unordered list is to use the 'disc' bullet. The default for an ordered list is to use the 'decimal' option. Examine the values for this rule.
none - This value is mainly used to over ride any inherited list-style-type statements.
disc - This value will display a shaded circle for the bullet.
circle - This value will display an empty circle for the bullet.
square - This value will display a shaded square for the bullet.
decimal - This value will display a decimal integer (1, 2, 3, ... etc.) for the bullet.
lower-roman - This value will display a lower case roman numeral for the bullet.
upper-roman - This value will display an upper case roman numeral for the bullet.
lower-alpha - This value will display a lower case letter for the bullet.
upper-alpha - This value will display an upper case letter for the bullet.
Using the list-style-type rule can decrease the amount of code, and therefore the time spent typing, of your document. Placing this rule within an external style sheet will help to make your web site more efficient and less bandwidth intensive.
OL {list-style-type: lower-roman}
This example will cause the bullets to be displayed as lower case roman numerals.
UL {list-style-type: circle}
This example will cause the bullets to be displayed as circles.
list-style
This property is can be used to set all available display values using one statement. It is a shorthand type of applying your desired style sheet rules for the placement and type of list bullet or numbering. The individual values are space delimited, and enclosed within single or double quotes. The rules encompassed by this rule are the list-style-type, list-style-position, and list-style-image rules. Since each rule has individual properties that don't overlap, worrying about how the browser will interpret your commands is not a problem. Consider the given examples.
UL {list-style: "squares inside"}
This example will set the unordered list bulleted with squares, with the bullet displayed inline with the text.
OL {list-style: "upper-roman outside"}
This example will display the ordered list bulleted with upper case roman numerals, with the bullet displayed outside the line of text.
|
|
|
|
white-space
This rule is used to control the wrapping of text within an element, thus controlling the 'white space' of that element. It is useful when using text within an element container.
normal - This is the default setting for the white-space property. This value will allow regular display of the document.
pre - This value will cause the browser to display all whitespace entered as is within the HTML source document.
nowrap - This value tells the browser to ignore all line breaks in the source text, breaking them on the page only where a break statement (BR) is inserted.
Consider the following example.
P {white-space: pre}
This example will cause the text within the paragraph to be displayed as is, inserting page breaks, indenting, and other formatting which occurs in the source text.
Using Font Rules
There are various ways in which you can provide formatting to your text. Using these simple rules alone and in combination can be an effective way of achieving the presentation you desire for your web page. There are five common font-formatting rules that we'll be exploring. They are as follows.
Font Family
Font Size
Font Style
Font Variant
Font Weight
Each of these rules may be used alone or in combinations, and can be used to set just about any type of font formatting you might have a use for.
font-family
The font-family rule is used to specify the primary and secondary fonts to be used to render the page. The secondary font (or third, or fourth) is specified in the event that the first isn't available on the visitors' system. A comma separates font entries, and it is recommended you end each font-family list with a generic font-family. Also, font names that contain spaces must be enclosed within quotes, or the browser will look for font names that are the individual words of the multi word font. For example, if 'Times New Roman' were used without quotes around it, the browser would look for fonts called 'Times', 'New', and 'Roman', three nonexistent fonts. Examine the examples of the use of font-family, given below.
BODY {font-family: Arial, Helvetica, "Times New Roman", sans-serif;}
This example sets the first font to be used as Arial. If Arial doesn't exist, Times New Roman is used. Notice that Times New Roman is enclosed within quotations due to the spaces in the font name.
P {font-family: "courier sans ms", "lucida sans"}
This statement sets the P tag to use the Courier Sans MS first, then Lucida Sans if the first isn't available.
|
|
|
|
font-size
This property is used to set the size of the displayed text. Relative or absolute sizes may be used to specify the font size. A full listing of the measurement options used with rule can be found in the CSS reference section of this book.
The absolute size value is dependant on the existing text size settings of your visitor's browser. That is, if your visitor has the browser text size set to 14, the medium font-size takes on the value of 14 as well. All other text sizing, whether larger or smaller, will be proportional to this default (medium) value.
The relative font-size values are similar to absolute sizing, though with less control. The options are larger or smaller, and are measured in relation to the parent container in which it was first used, regardless of any BODY font-size settings. That is, the relative font-size settings are measured on inherited values. Relative values scale easier than the other font-size types.
Consider the following.
OL {font-size: 1.5em}
This example specifies that the text content of the ordered list is to be one and a half times larger than the normal, unaltered size of the font.
BODY {font-size: 15pt}
This example sets the base font size of the entire document to 15 point text. This is an absolute size. All relative sizes (ex, em, percentage) will be rendered in relation to this font size.
font-style
This property is use to add italicized, oblique, or normal text to the document. Values are inherited, and can be used within lists and tables, as well as within the BODY tag of the document. You would use this rule when you want a large block of text set in the oblique or italicized style, or when you want the text block to be displayed in the normal font after a block of italicized text, since values for this rule are inherited - the 'normal' value would return the altered text back to the original font style.
BODY {font-style: italic}
This statement will set the base BODY to an italicized version of the font you're using. Because of its placement in the BODY tag, the default text style for the entire document will be italic unless another font-style statement is used.
BODY {font-style: italic}
This statement will set all instances of the EM (emphasis, similar to BOLD) tag within the document to the italic style.
font-variant
This property is used to switch between normal and small case text within the document. A full list of values that can be used with this rule can be found in the CSS reference section of this book. The text displayed may be changed from the form of a capital letter followed by lower case letters to the form of all the text being changed to all capitals or all lowercase regardless of how it appears within your document source code.
P {font-variant: small-caps}
This statement will set all instances of the heading level H3 to small-caps style.
Body {font-variant: small-caps}
This statement will set all instances of the text within the BODY tag to small-caps style.
font-weight
This property is used to display lighter or darker versions of the font used, and can be set as a numeric (absolute) or relative value. font-weight values are inherited. The statement in which the value is first used is referred to as the Parent Element. All other instances of the value below the Parent are referred to as Child Elements. When you set the font-weight for an element, the child elements inherit that weight as their normal weight. Since the child elements see this as their normal weight, you can increase or decrease the font weight based on this inherited weight.
The values for this rule may be one of the following relative, worded measurements.
bold
bolder
light
lighter
The values for this rule may be one of the following absolute, numbered values.
100
200
300
400
500
600
700
800
900
The font weight of 400 is considered the normal font weight. Applying a 'bold' statement to the weight of 400 will result in a display of the font that will be the same size of the absolute font weight of 500. That is, using 'bold' will increase the font weight by an absolute value of 100. Using 'bolder' will result in an increase of the font weight of 200. Conversely, a value of 'light' will decrease the font weight by 100, while a font weight of 'lighter' will decrease the displayed font weight by 200.
BODY {font-weight: 500}
Because the font-weight statement is attached to the BODY tag, this example sets the font-weight for the entire document to a level slightly higher than normal, since the font-weight value of 400 is considered the normal weight. This statement is of the Gradient type, which is a numeric value. It should be noted that all values are multiples of 100. That is, a value of 330 would not be interpreted as a valid value.
P {font-weight: bolder}
This statement sets the contents of the P tag to a BOLDER weight, which will appear darker than the previously set level, regardless of what that level is. However, since a numeric (Gradient Type) value of 900 is the heaviest weight supported, applying a BOLDER font-weight statement will produce an un-noticeable result: There will be no change in the appearance of the font.
|
|
|
|
Formatting Text
Whereas Font Properties control the display options of the type of your document, Text Properties control the options pertaining to the layout and appearance of the paragraphs in which the text is presented. Some text properties include text capitalization and minor effects such as blinking and underlined sections of text. Most often you'll use the default text layout, but on occasion you'll find that you'll need to apply one or more of the rules we'll be discussing in this chapter.
There are eight commonly used text-formatting rules which we'll be discussing. These rules are normally used in conjunction with one another to achieve your vision of the finished product - a well-designed and aesthetically pleasing web page. Those eight rules are listed below.
Letter Spacing
Line Height
Text Align
Text Decoration
Text Indention
Text Transformation
Vertical Alignment
Word Spacing
The rule names themselves are fairly self-explanatory. As with all CSS rules, these rules comply with the syntax that is universal to all CSS rule statements - the rule statement is enclosed within braces, the rule is separated from the value by a colon, the value is enclosed within quotes, and individual rule statements are separated by a semi-colon.
letter-spacing
This rule is used to specify the amount of space that appears between individual characters, the default being the values within the font being used. A complete listing of measurement options is included in the CSS reference section of this book.
On occasion you'll find that the default letter spacing is not what you have in mind for the presentation and layout of your web page. You may apply the letter-spacing rule to your web page as a whole or to parts of your page. Using the ID and CLASS attributes, you may specify the block of text that will use the letter spacing values you define in your style sheet statements. The values of the statements being used may be positive or negative values, as shown in the below examples.
P {letter-spacing: "-0.5em"}
This example will reduce the letter spacing by half within the opening and closing instances of the paragraph (P) tags.
P {letter-spacing: "2em"}
SPAN {letter-spacing: "2em"}
This example will cause the contents of the P tag to have a letter spacing of 2 times that of the parent container. The contents of the SPAN tag will have a letter spacing twice the width of the capital 'M' of the font used, which is specified by the parent container.
Letter spacing rules are inherited, so be watchful about where you apply your values. In the above example that utilizes a P tag and a SPAN tag, there is the possibility that you'll achieve a letter spacing effect that was not your intention. Nesting the SPAN tag within the P tag will result in a letter spacing which is the product of the two individual values. That is, the product of the two values will result in a letter spacing of 4 em, which might not be the value you are looking for.
line-height
This rule is used to set the line spacing. Single or double-spaced, for example. The values for this property are inherited not only from parent to child, but from child to child as well. That is, a setting of 2 (double spaced) in one instance and a setting of 2 (double spaced) in the next instance will result in the second instance having a line spacing of four; the value assigned to the second instance was multiplied by the inherited value of the first.
The normal value sets the spacing back to the value specified by the font or the value specified by the parent container, since inheritance plays a large factor in line spacing. Using a numbered value, you may set the space between the baselines (bottoms of) the lines of text. It is a misconception that the line spacing is measured from the bottom of the upper line to the top of the lower line. This value is symbiotic with the value of the text size. That is, specifying a line height of 1.5 with a text size of 10 points will result in a total line height of 15 points.
It should be noted that a negative line-height value may cause text to overlap and become unintelligible. It should also be noted that it is a good convention to specify a font-size with the line-height. Examine the following example.
P {line-height: "2em" ; font-size: "10pt"}
This example will set the line height to 20 points, which is twice the size of the font, the given font size being 10 points.
text-align
This rule sets the alignment, or justification, of the text within whichever element it is invoked. The values are left justified, right justified, centered, and equally justified (sometimes called left-right justification, or simply justified). The alignment may be set on any block level element, the default being set by the browser properties. Text alignment values are inherited from parent to child and from child to child. The text-align values and a brief explanation of each may be found below.
left alignment - This value aligns text along the leftmost side of the element in which it was invoked. It will normally follow the leftmost side, even along indentations. The default for the English language is left justified, since text is read left to right.
right alignment - This value aligns text along the rightmost side of the element in which it was invoked. It will normally follow the rightmost side, even along indentations.
center alignment - This value will place the text in the center of the element in which it was invoked, regardless of its size and the amount of text being centered. The text will be spaced uniformly from the left and right margins.
justified - This property places text in a column, like a newspaper. The text is aligned precisely along both the right and left margins. Text is spaced on the line according to the length of the word and the space available.
Consider the following.
P SPAN {text-align: "center"}
This example sets the text within both the P tags and the SPAN tags to be centered in the document window or frame.
P {text-align: "right"}
This example causes the contents of the opening and closing P tags to be aligned flush with the right margin.
|
|
|
|
text-decoration
This simple rule is used for the minor text effects of underlining and overlining, line through (strikeout), and blinking. The default is to have no effects: plain text. All the effects may be combined in one statement (excepting, of course, the value 'none'), though I can't see why you would combine more than one, other than for blinking. To each his own.
SPAN {text-decoration: "overline" ; text-decoration: "underline"}
Since text-decoration values can be used together, this statement will cause the contents of the opening and closing SPAN tags to display a line above (overline) and a line below (underline) when invoked.
P {text-decoration: "blink"}
This example will cause the contents of the opening and closing P tags to blink when invoked.
text-indent
The indentation of your block of text may also be set from the initial default values to something more pleasing to your eye. This property is used to indent the first line of a paragraph, and can be expressed as a relative or absolute value. The default is 0 (zero), for no indentation. This property inherits settings from its parent. Negative values may be used to achieve a hanging indentation effect. In using a break (BR) statement in a paragraph, the portion of the paragraph following the break statement will not be indented: the text-indent property must again be invoked. Using the indentation rule is a simple thing, since the values are only forms of measurement. A full listing of measurement options may be found for this rule is the CSS reference section of this book.
P {text-indent: "20%"}
This example will set all paragraph statements to have an indentation which is twenty percent (20%) of the total line length available.
BODY {text-indent: "2.5cm"}
This example will cause all indentations within the entire document to be 2.5 cm. Because this value was set in the BODY, which defines the default or base setting, all relative values will be referenced from this value.
text-transform
The text-transform rule is used to set the formatting standard for a block of text. With this property you can set the text block it is invoked upon to be displayed as all lowercase, upper case, or have a capital as the first letter of each word.
P {text-transform: "uppercase"}
This example will set all text within the paragraph tags (P) to be displayed in uppercase text.
SPAN {text-transform: "capitalize"}
This will cause all instances of the text within the opening and closing SPAN tags to have a capital letter as the first letter of each word.
vertical-align
This rule is used to set inline text to a different vertical alignment than that of its parent. If this property is not invoked, inheritance will cause the text to have the same vertical alignment as that of its parent. The default setting is for vertical alignment to be measured from the baseline of the individual elements. This property can be used to set the alignment properties of text as well as document objects such as images or embedded objects. For a full listing of the values used with this rule, see the CSS reference section of this book. The samples of code below illustrate the use of this rule.
img.logo {vertical-align: -10%}
This example will display ten percent (10%) of the image to which the class LOGO has been assigned to be displayed below the baseline of the parent container.
.object {vertical-align: "super"}
.object2 {vertical-align: "sub"}
This example will cause the object CLASS to be displayed shifted upwards to the level of superscript, while the object2 CLASS will be shifted down to the subscript level.
word-spacing
This rule sets the amount of space that appears between words. The values invoked in a child element add to the values of the parent element. For example, a child element is declared with a value of 2em. The default for the document, stated in the BODY, is also 2em. The resulting value for the child, then, is 4em. The value of the parent element (the default, in this case) has been added to the value of the child element. Decimal numbers, percentages, and negative numbers may be used when assigning a word-spacing value, with some surprising results.
P {word-spacing: 2em}
This example sets the word spacing of the text within the paragraph (P) statement(s) to be twice that of the parent or default value.
H2 {word-spacing: 0.5}
This example will cause the heading level H2 to have a word-spacing value half (0.5) that of the default or parent value.
|
|
|
|
|
|
| | |
