Style Sheets Are A Very Powerful Tool For The Web Site Developer
This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA
Overview
Download & View Style Sheets Are A Very Powerful Tool For The Web Site Developer as PDF for free.
More details
- Words: 4,204
- Pages: 16
Style sheets are a very powerful tool for the Web site developer. They give you the chance to be completely consistent with the look and feel of your pages, while giving you much more control over the layout and design than straight HTML ever did. Invented in 1997, Cascading Style Sheets (CSS) are just now starting to be widely used among browsers and Web developers are learning to be more comfortable with them. Those of you who use HomeSite 4.0 know that they are eventually going to take the place of tags such as , which have been deprecated in HTML 4.0. There are three parts to CSS: the styles, their placement, and the fact that they can cascade.
The Styles One of the more common styles applied to HTML is the color and size of text. In HTML 3.2 you would create a blue H4 headline like this:
Style rules are comprised of two things, the selector and the declaration. • •
selector - The HTML tag that will be affected by the rule declaration - The specific style calls that will affect the selector
The complete syntax for a style rule is: selector {property : value;} So, to set all bold text to be the color red, you would write: b {color: red;} One of the things that makes CSS so easy to use, is that you can group together components that you would like to have the same style. For example, if you wanted all the H1, H2 and bold text red, you could write:
b {color: red;} h1 {color: red;} h2 {color: red;} But with grouping, you put them all on the same line: b, h1, h2 {color: red;} You can also group together rules (separated by a semi-colon (;) ). For example, to make all h3 text blue and Arial font, you would write: h3 { font-family: Arial; color: blue; } By convention, we put separate rules on separate lines, but this is not required. Style sheets can be place in three places in a document, in the , in an external file, or within an individual tag. Style calls placed within an individual tag will only affect that tag, while other style calls affect the entire page or any page that loads the style sheet.
Styles Within the Tags For the above example, while the demonstration showed a style call used within a style sheet created either in the head of the document or on another page, the actual style use was within the h4 tag itself. For example:
Styles Within the Head of the Document To create a style sheet within the header of your HTML document, you enclose it in <style> tags. It is a good idea to define the mime type of the styles you are creating
(usually text/css), and then to put the style rules within comment tags so that older browsers do not display them as text on the page. For example: <style type="text/css"> Finally, you can create a separate document with all of your style information in it and either link or import it into your document. If you have a large site and would like to maintain consistency across it, then external style sheets are the way to go. They provide you with a simple way to dictate how all instances of various tags will be displayed.
Linking a Style Sheet The benefit to linking a style sheet into your document is that it is supported by both the major 4.0 browsers. You call a linked style sheet like this:
Importing a Style Sheet Importing style sheets are only currently supported by Internet Explorer 4.0. They allow you to keep all your style information in the same place, within the <style> element, while also loading external files as style commands. For example: <style> @import URL (http://yoursite.com/stylesheet.css); H4 { color: #0000ff; } Cascading is something that makes CSS even more powerful. Style sheets cascade when The Web Writer or user (or both) have created an order of precedence for the browser to apply the style rules in multiple sheets. The style rule or sheet that has the highest precedence is the one that is used. The following list is a simplification of how your browser decides precedence for a style: 1. Look for the style element that is created, if it is not in the document, use the default rules in the browser 2. Determine if any of the style rules are marked as important and apply those to the appropriate elements 3. Any style rules in the document will have precedence over the default browser settings 4. The more specific the style rule, the higher the precedence it will have
5. Finally, if two rules apply to the same element, the one that was loaded last will have the highest precedence As HTML becomes more and more a description of the content of Web pages and less the look and feel, you need a tool to describe how your pages should look. That's where Cascading Style Sheets (CSS) come in. CSS is not hard, in some ways it's almost easier than HTML. The trickiest part is remembering the many different choices you have to choose from. Let's start with a simple style sheet that includes some of the more common styles.
Fonts The most common adjustment to Web pages is to the fonts on the page. You can change the color, style, size, and face of your fonts, and you can do it all with CSS.
Creating a Style Sheet The first key to writing a style sheet is to decide what you want your text to look like. You should decide the color, the font, the style and so on. You also need to decide what the different styles should be for the different tags, headings, and so on.
My Proposed Styles • • • •
Standard paragraph text should be black, arial narrow, and medium sized Top level (h1) headings should be red, bold, and small-caps Second level headings (h2) should be blue and italic Notations should be standard text with a yellow background
These are the CSS elements that can change the font: •
•
•
•
font-family change the actual face of the font. You can use specific font names or generic terms such as serif, sans-serif, monospace, courier, fantasy font-family : arial, geneva, helvetica; font-size change the size of the font. Define the size as an absolute size, relative size, percentage, or length. font-size : small font-style changes the style from normal to italics or oblique. font-style : italic font-variant change the look of the text from normal to small-caps font-variant : small-caps
•
•
•
font-weight change the font to bold font-weight : bold color change the color of your text. Use either named colors or hexadecimal codes color : #ff0000 background-color change the color behind the text. Use either named colors or hexadecimal codes. background-color : yellow;
Once you've decided on the styles you want, you need to write your style sheet. Place the following in the of your HTML document: <style type="text/css"> The first three of the above styles will be set by using the tags: , , and
Inline Styles (Without a Stylesheet) Inline styles are styles set within one tag. They only affect the current tag, every other similar tag on the page will have the default styles. For example, if you want one paragraph to have a grey background, you can use an inline style Try this out on your Web page:
The style is defined by the "style" attribute on the element itself. The <span> and
The Styles One of the more common styles applied to HTML is the color and size of text. In HTML 3.2 you would create a blue H4 headline like this:
a blue headline
However, there was no way to ensure that all H4 headlines were blue except by typing in the font tag before and after each one. With CSS, you simply declare that all H4 headlines are blue, and for all pages that use that style sheet and all elements that use that style, they will be blue. Try adding this to your Web page:another blue headline
Style rules are comprised of two things, the selector and the declaration. • •
selector - The HTML tag that will be affected by the rule declaration - The specific style calls that will affect the selector
The complete syntax for a style rule is: selector {property : value;} So, to set all bold text to be the color red, you would write: b {color: red;} One of the things that makes CSS so easy to use, is that you can group together components that you would like to have the same style. For example, if you wanted all the H1, H2 and bold text red, you could write:
b {color: red;} h1 {color: red;} h2 {color: red;} But with grouping, you put them all on the same line: b, h1, h2 {color: red;} You can also group together rules (separated by a semi-colon (;) ). For example, to make all h3 text blue and Arial font, you would write: h3 { font-family: Arial; color: blue; } By convention, we put separate rules on separate lines, but this is not required. Style sheets can be place in three places in a document, in the , in an external file, or within an individual tag. Style calls placed within an individual tag will only affect that tag, while other style calls affect the entire page or any page that loads the style sheet.
Styles Within the Tags For the above example, while the demonstration showed a style call used within a style sheet created either in the head of the document or on another page, the actual style use was within the h4 tag itself. For example:
another blue headline
Creating styles as an attribute of a tag is a quick way to generate the style you would like without impacting your entire page. One common way this is used is to hide random links throughout the page. For the links you would like hidden, you would give them a style of "text-decoration: none". For example, put this HTML in your Web page: This link has the default decoration This link, while still a link, is not underlined and has a color of black.Styles Within the Head of the Document To create a style sheet within the header of your HTML document, you enclose it in <style> tags. It is a good idea to define the mime type of the styles you are creating
(usually text/css), and then to put the style rules within comment tags so that older browsers do not display them as text on the page. For example: <style type="text/css"> Finally, you can create a separate document with all of your style information in it and either link or import it into your document. If you have a large site and would like to maintain consistency across it, then external style sheets are the way to go. They provide you with a simple way to dictate how all instances of various tags will be displayed.
Linking a Style Sheet The benefit to linking a style sheet into your document is that it is supported by both the major 4.0 browsers. You call a linked style sheet like this:
Importing a Style Sheet Importing style sheets are only currently supported by Internet Explorer 4.0. They allow you to keep all your style information in the same place, within the <style> element, while also loading external files as style commands. For example: <style> @import URL (http://yoursite.com/stylesheet.css); H4 { color: #0000ff; } Cascading is something that makes CSS even more powerful. Style sheets cascade when The Web Writer or user (or both) have created an order of precedence for the browser to apply the style rules in multiple sheets. The style rule or sheet that has the highest precedence is the one that is used. The following list is a simplification of how your browser decides precedence for a style: 1. Look for the style element that is created, if it is not in the document, use the default rules in the browser 2. Determine if any of the style rules are marked as important and apply those to the appropriate elements 3. Any style rules in the document will have precedence over the default browser settings 4. The more specific the style rule, the higher the precedence it will have
5. Finally, if two rules apply to the same element, the one that was loaded last will have the highest precedence As HTML becomes more and more a description of the content of Web pages and less the look and feel, you need a tool to describe how your pages should look. That's where Cascading Style Sheets (CSS) come in. CSS is not hard, in some ways it's almost easier than HTML. The trickiest part is remembering the many different choices you have to choose from. Let's start with a simple style sheet that includes some of the more common styles.
Fonts The most common adjustment to Web pages is to the fonts on the page. You can change the color, style, size, and face of your fonts, and you can do it all with CSS.
Creating a Style Sheet The first key to writing a style sheet is to decide what you want your text to look like. You should decide the color, the font, the style and so on. You also need to decide what the different styles should be for the different tags, headings, and so on.
My Proposed Styles • • • •
Standard paragraph text should be black, arial narrow, and medium sized Top level (h1) headings should be red, bold, and small-caps Second level headings (h2) should be blue and italic Notations should be standard text with a yellow background
These are the CSS elements that can change the font: •
•
•
•
font-family change the actual face of the font. You can use specific font names or generic terms such as serif, sans-serif, monospace, courier, fantasy font-family : arial, geneva, helvetica; font-size change the size of the font. Define the size as an absolute size, relative size, percentage, or length. font-size : small font-style changes the style from normal to italics or oblique. font-style : italic font-variant change the look of the text from normal to small-caps font-variant : small-caps
•
•
•
font-weight change the font to bold font-weight : bold color change the color of your text. Use either named colors or hexadecimal codes color : #ff0000 background-color change the color behind the text. Use either named colors or hexadecimal codes. background-color : yellow;
Once you've decided on the styles you want, you need to write your style sheet. Place the following in the of your HTML document: <style type="text/css"> The first three of the above styles will be set by using the tags: , , and
. The final style notation is used with the class attribute. Since it is a notation, it would usually be used with the <span> tag. For example, put the following HTML into your Web page:
This paragraph would be in the p style. <span class="note">Note: inheritance means that this text will have the same styles as the paragraph itself
The styles set by the first tag will be inherited by any tag that is within it. This is why we don't have to redefine the font color or size for the note.Inline Styles (Without a Stylesheet) Inline styles are styles set within one tag. They only affect the current tag, every other similar tag on the page will have the default styles. For example, if you want one paragraph to have a grey background, you can use an inline style Try this out on your Web page:
This paragraph has an inline style to change the background color to grey.
The style is defined by the "style" attribute on the element itself. The <span> and
tags were introduced later in the HTML game that are very useful when dealing with Cascading Style Sheets. People tend to use them in similar fashion, but they serve different purposes.
The
tag defines logical divisions in your Web page. In terms of layout, the
tag does only one thing, it determines the alignment of that section of your page.
also gives you the chance to define the style of whole sections of HTML. You could define a section of your page as a call out and give that section a different style from the surrounding text. But that's not all it does! The
tag gives you the ability to name certain sections of your documents so that you can affect them with style sheets or Dynamic HTML. One thing to keep in mind when using the
tag is that it breaks paragraphs. It acts as a paragraph end/beginning, and while you can have paragraphs within a
you can't have a
inside a paragraph. The primary attributes of the
tag are: align (left|center|right|justify) style name Even if you don't use style sheets or DHTML, you should get into the habit of using the
tag. This will give you more flexibility when more XML parsers become available. Also, you can use the NAME attribute to name your sections so that your Web pages are well formed. Because the tag has been deprecated in HTML 4.0, it is a good idea to start using
align="center" to center your text and images. You can also use the textalign: center style tag. More About the
Tag
<span> The <span> tag has very similar properties to the
<span> The <span> tag has very similar properties to the
tag, in that it affects the style of the text it encloses. Items in the <span> can be aligned or given specific style attributes. The primary difference between the <span> and
tags is that <span> doesn't do any formatting of it's own. The
tag acts as a paragraph break, because it is defining a
logical division in the document. The <span> tag simply tells the browser to apply the style and align rules to whatever is within the <span>. The primary attributes of the <span> tag are: align (left|center|right|justify) style Use <span> when you want to change the style of elements without naming them in a separate division within the document. For example, if you had a Level 3 Heading () that you wanted the second word to be red, you could surround that word with <<span> style="color : #ff0000;">2ndWord> and it would still be a part of the
logical division in the document. The <span> tag simply tells the browser to apply the style and align rules to whatever is within the <span>. The primary attributes of the <span> tag are: align (left|center|right|justify) style Use <span> when you want to change the style of elements without naming them in a separate division within the document. For example, if you had a Level 3 Heading (
) that you wanted the second word to be red, you could surround that word with <<span> style="color : #ff0000;">2ndWord> and it would still be a part of the tag as well, just red. if you want to set up a stylesheet to affect one Web page, you can do that with a stylesheet in the head of your document. For this you use the <style> tag in the of your Web document.
Rules for Style Sheets 1. Style tags should be held in the While you can include style tags elsewhere in a document, browsers might not suport this. 2. All style information should be stored within the <style> and tags. This is how the browsers know that the information is for styles. 3. Always include a type attribute in your style tag. This attribute indicates what types of style rules you will be using. The most common type of style rule is CSS, but there are other types (XSL, JSS, and others).
Tips for Working with Style Sheets Here are some tips for working with these stylesheets: •
Start them out right Use attributes of the <style> tag to define what the browser should expect <style type="text/css">
•
Use comments Comment tags insure that older browsers don't display your stylesheets.
<style type="text/css">
•
think about your styles In many cases, you don't need to set a lot of different styles, just simple ones that cover how your text and other elements should be displayed on your page. If you don't plan to have any red, blinking, 36 point headlines on your page, then defining a style for that is a waste of bandwidth.
Sample sample head of an HTML document <style type="text/css"> Externally linked stylesheets allow you to use one stylesheet across your entire site. There are two ways to do this: 1. linking 2. importing (Internet Explorer only) <style type="text/css"> @import URL (http://www.yoursite.com/styles.css);
Advantages and Disadvantages of External Style Sheets One of the best things about Cascading Style Sheets is that you can use them to keep your site consistent. The easiest way to do this is to link or import an external style sheet. If
you use the same external style sheet for every page of your site, you can be sure that all the pages will have the same style. Some of the advantages to using external style sheets are: •
You can control the look and feel of several documents at once. This is especially useful if you work with a team of people to create your Web site. Many style rules can be difficult to remember, and while you might have a printed style guide, it is inefficient and tedious to be continuously flipping through it to determine if example text is to be written in 12 point Arial font, or 14 point courier.
•
You can create classes of styles that can then be used on many different HTML elements. If you often use a special Wingdings font to give emphasis to various things on your page, you can use the Wingdings class you set up in your style sheet to create them, rather than defining a specific style for each instance of the emphasis.
•
You can easily group your styles to be more efficient. All the grouping methods that are available to CSS can be used in external style sheets, and this provides you with more control and flexibility on your pages.
However, there are some good reasons for not using external style sheets: •
External style sheets can increase the download time, if they are extremely large.
•
If you only have a small number of styles, they can increase the complexity of your page.
•
Like with table rendering, you have to wait until the entire style sheet is loaded before the page can display.
How to Create an External Style Sheet External style sheets are created with a similar syntax to document level (in the ) style sheets. However, all you need to include are the selector and the declaration Just like in a document level style sheet, the syntax for a rule is: selector {property : value;} These rules are written to a text file with the extension .css. This isn't required, but it is a good habit to get into, so you can immediately recognize your style sheets in a directory listing. Once you have a style sheet document, you need to link it to your Web pages. This can be done in two ways:
1. Linking In order to link a style sheet, you use the HTML tag . This has the attributes rel, type, and href. The rel attribute tells what you are linking (in this case a stylesheet), the type defines the MIME-Type for the browser, and the href is the path to the .css file. For example: 2. Importing You would use an imported style sheet within a document level style sheet, so that you can import the attributes of an external style sheet while not losing any document specific ones. This is currently only supported in Internet Explorer. You call it in a similar way to calling a linked style sheet, only it must be called within a document level style declaration. For example: <style> @import URL (http://www.yoursite.com/styles.css); ... continue styles The fact that importing is only supported by Internet Explorer allows you to create multiple stylesheets that are browser independent, but without relying on DHTML and JavaScript to detect the browser. Create three stylesheets: •
a generic one that will cover most basic styles generic.css
•
one for Internet Explorer ie-styles.css
•
one for Netscape ns-styles.css
In the head of your document load them in this order: 1. The generic stylesheet 2. The Netscape stylesheet
3. The IE stylesheet (using the import command) <style type="text/css"> @import URL (http://www.yoursite.com/ie-styles.css); Because of cascading, the IE stylesheet will "overwrite" style rules found in the Netscape stylesheet, when viewed in Internet Explorer. And Netscape won't load the imported stylesheet at all. If you've read many other Web pages, you may have read that the tag has been deprecated. This means that the tag is no longer a part of the HTML specification. While browsers will still support it, most likely for a long time, it's a good idea to switch to the alternative.
What is The Alternative? Cascading Style Sheets. CSS can do all the same things that the tag can do, plus a lot more. Let's examine what the tag can do and compare how to do it with CSS.
Changing the Font Face The font face is the face or family of the font. With the font tag, you use the attribute "face". this font is not sans-serif In CSS instead of font "face", it's called the font "family", but otherwise, it's essentially the same as the font tag: <span style="font-family : garamond, times;">this font is not sans-serif
Changing the Font Color As with the face, you use the "color" attribute and hex codes or color names to change the color of your text: this font is purple The misleading part about changing the font color is that you don't have font in the CSS call: <span style="color : #9933ff;">this font is purple
One thing CSS can do that the font tag cannot, is CSS can change the background color behind the text. <span style="background-color : #9933ff;">this background is purple
Changing the Font Size There is only one way to change the font size with the font tag. Paste this into your Web page: this font is one size larger With CSS, you can change the font size relative to standard text. Paste this into your Web page: <span style="font-size : x-large;">this text is extra large You can also change the size to a specific pixel or point size. Paste these into your Web page: <span style="font-size : 14pt">this font is 14 points <span style="font-size : 14px">this font is 14 pixels Finally, there are some other tricks you can do with CSS that the font tag cannot do. Try pasting these into your Web pages: <span style="text-decoration : underline;">this text is underlined <span style="text-align : right;">this text is aligned to the right <span style="text-indent : 15px;">this text is indented 15 pixels <span style="text-transform : capitalize;">this text is capitalized <span style="text-transform : uppercase;">this text is uppercase When it comes right down to it, deprecating the font tag isn't so bad. With CSS to fill in the gaps and add extra tools to manipulate your text even more than the font tag ever did.
Font Properties There are many CSS properties to use in your style sheets. Here are some of the more popular properties and how to use them.
font-family Defines the font family that the text should be displayed in. (Note: if the computer viewing your page doesn't have the font specified, the browser will guess. This can cause strange effects. It is best to use standard fonts, or the generic font names.)
To define specific font families, write the family names in the order you would like them displayed (most accurate to your design first). Separate each family with a comma: font-family : arial,geneva,helvetica ; To define a generic font family: font-family : serif; Generic font families allow the browser to choose the font most appropriate that is included on the current system. These are: • • • • •
serif sans-serif monospace cursive fantasy
font-size Defines the size of the font. The font size can be specified as an exact size, a relative size, a length, or a percentage (of the existing space). To define the exact size, simply specify the size in one of the following measurements: • • • • • • •
ems (font-size : 13em;) pixels (font-size : 13px;) picas (font-size : 13pc;) points (font-size : 13pt;) inches (font-size : 13in;) centimeters (font-size : 13cm) milimeters (font-size : 13mm)
There are seven standard sizes in HTML and XML documents, you can define your fontsize based on those sizes as well (standard text is size medium): • • • • • • •
font-size : xx-small; font-size : x-small; font-size : small; font-size : medium; font-size : large; font-size : x-large; font-size : xx-large;
To define your font-size as relative to the surrounding text, you can simply say: •
font-size : larger;
•
font-size : smaller;
font-style Defines whether the font is italic, oblique, or normal. • • • •
font-style : italic; font-style : oblique; font-style : normal; (the default)
font-variant Defines whether the font is normal or small-caps. Try these styles in your Web page: • • •
font-variant : small-caps; font-variant : normal; (the default)
font-weight Defines how dark or light the text is. These are the options for font-weight. Try out these styles in your Web page. • • • • • • • • • • • • •
font-weight : bold; font-weight : bolder; font-weight : lighter; font-weight : 100; font-weight : 200; font-weight : 300; font-weight : 400; font-weight : 500; font-weight : 600; font-weight : 700; font-weight : 800; font-weight : 900; font-weight : normal; (the default)
Text Properties There are many CSS properties to use in your style sheets. Here are the text properties and how to use them.
word-spacing Defines the amount of space between the words.
• •
word-spacing : normal; word-spacing : +15mm;
Specify the length as you would the height of your font with ems, pixels, picas, points, inches, centimeters, or milimeters. (Note: many browsers don't currently support this style tag.)
letter-spacing Defines the amount of space between each letter. • • •
letter-spacing : normal; letter-spacing : +1mm; letter-spacing : -1px;
Specify the length as you would the height of your font with ems, pixels, picas, points, inches, centimeters, or milimeters. (Note: many browsers don't currently support this style tag.)
text-decoration Defines the decoration of the text. • • • • • •
text-decoration : none; (used on tags to remove the underline.) text-decoration : overline; text-decoration : underline; text-decoration : line-through; text-decoration : blink;
text-transformation Defines the case of the text. • • • •
text-transform : capitalize; text-transform : uppercase; text-transform : lowercase; text-transform : none;
text-align Defines how the text will be aligned on the page. • • •
text-align : left; text-align : right; text-align : center;
•
text-align : justify;
text-indent Defines how much the first line of the text should be indented. • •
text-indent : 15mm; text-indent : 5%;
Specify the length as you would the height of your font with ems, pixels, picas, points, inches, centimeters, or milimeters.
line-height Defines the amount of space between lines of text. • • •
line-height : 1.5; (the number of lines) line-height : 5mm; line-height : 10%;
There are many more styles, but hopefully, these will get you started using style sheets.
Rules for Style Sheets 1. Style tags should be held in the While you can include style tags elsewhere in a document, browsers might not suport this. 2. All style information should be stored within the <style> and tags. This is how the browsers know that the information is for styles. 3. Always include a type attribute in your style tag. This attribute indicates what types of style rules you will be using. The most common type of style rule is CSS, but there are other types (XSL, JSS, and others).
Tips for Working with Style Sheets Here are some tips for working with these stylesheets: •
Start them out right Use attributes of the <style> tag to define what the browser should expect <style type="text/css">
•
Use comments Comment tags insure that older browsers don't display your stylesheets.
<style type="text/css">
•
think about your styles In many cases, you don't need to set a lot of different styles, just simple ones that cover how your text and other elements should be displayed on your page. If you don't plan to have any red, blinking, 36 point headlines on your page, then defining a style for that is a waste of bandwidth.
Sample
Advantages and Disadvantages of External Style Sheets One of the best things about Cascading Style Sheets is that you can use them to keep your site consistent. The easiest way to do this is to link or import an external style sheet. If
you use the same external style sheet for every page of your site, you can be sure that all the pages will have the same style. Some of the advantages to using external style sheets are: •
You can control the look and feel of several documents at once. This is especially useful if you work with a team of people to create your Web site. Many style rules can be difficult to remember, and while you might have a printed style guide, it is inefficient and tedious to be continuously flipping through it to determine if example text is to be written in 12 point Arial font, or 14 point courier.
•
You can create classes of styles that can then be used on many different HTML elements. If you often use a special Wingdings font to give emphasis to various things on your page, you can use the Wingdings class you set up in your style sheet to create them, rather than defining a specific style for each instance of the emphasis.
•
You can easily group your styles to be more efficient. All the grouping methods that are available to CSS can be used in external style sheets, and this provides you with more control and flexibility on your pages.
However, there are some good reasons for not using external style sheets: •
External style sheets can increase the download time, if they are extremely large.
•
If you only have a small number of styles, they can increase the complexity of your page.
•
Like with table rendering, you have to wait until the entire style sheet is loaded before the page can display.
How to Create an External Style Sheet External style sheets are created with a similar syntax to document level (in the ) style sheets. However, all you need to include are the selector and the declaration Just like in a document level style sheet, the syntax for a rule is: selector {property : value;} These rules are written to a text file with the extension .css. This isn't required, but it is a good habit to get into, so you can immediately recognize your style sheets in a directory listing. Once you have a style sheet document, you need to link it to your Web pages. This can be done in two ways:
1. Linking In order to link a style sheet, you use the HTML tag . This has the attributes rel, type, and href. The rel attribute tells what you are linking (in this case a stylesheet), the type defines the MIME-Type for the browser, and the href is the path to the .css file. For example: 2. Importing You would use an imported style sheet within a document level style sheet, so that you can import the attributes of an external style sheet while not losing any document specific ones. This is currently only supported in Internet Explorer. You call it in a similar way to calling a linked style sheet, only it must be called within a document level style declaration. For example: <style> @import URL (http://www.yoursite.com/styles.css); ... continue styles The fact that importing is only supported by Internet Explorer allows you to create multiple stylesheets that are browser independent, but without relying on DHTML and JavaScript to detect the browser. Create three stylesheets: •
a generic one that will cover most basic styles generic.css
•
one for Internet Explorer ie-styles.css
•
one for Netscape ns-styles.css
In the head of your document load them in this order: 1. The generic stylesheet 2. The Netscape stylesheet
3. The IE stylesheet (using the import command) <style type="text/css"> @import URL (http://www.yoursite.com/ie-styles.css); Because of cascading, the IE stylesheet will "overwrite" style rules found in the Netscape stylesheet, when viewed in Internet Explorer. And Netscape won't load the imported stylesheet at all. If you've read many other Web pages, you may have read that the tag has been deprecated. This means that the tag is no longer a part of the HTML specification. While browsers will still support it, most likely for a long time, it's a good idea to switch to the alternative.
What is The Alternative? Cascading Style Sheets. CSS can do all the same things that the tag can do, plus a lot more. Let's examine what the tag can do and compare how to do it with CSS.
Changing the Font Face The font face is the face or family of the font. With the font tag, you use the attribute "face". this font is not sans-serif In CSS instead of font "face", it's called the font "family", but otherwise, it's essentially the same as the font tag: <span style="font-family : garamond, times;">this font is not sans-serif
Changing the Font Color As with the face, you use the "color" attribute and hex codes or color names to change the color of your text: this font is purple The misleading part about changing the font color is that you don't have font in the CSS call: <span style="color : #9933ff;">this font is purple
One thing CSS can do that the font tag cannot, is CSS can change the background color behind the text. <span style="background-color : #9933ff;">this background is purple
Changing the Font Size There is only one way to change the font size with the font tag. Paste this into your Web page: this font is one size larger With CSS, you can change the font size relative to standard text. Paste this into your Web page: <span style="font-size : x-large;">this text is extra large You can also change the size to a specific pixel or point size. Paste these into your Web page: <span style="font-size : 14pt">this font is 14 points <span style="font-size : 14px">this font is 14 pixels Finally, there are some other tricks you can do with CSS that the font tag cannot do. Try pasting these into your Web pages: <span style="text-decoration : underline;">this text is underlined <span style="text-align : right;">this text is aligned to the right <span style="text-indent : 15px;">this text is indented 15 pixels <span style="text-transform : capitalize;">this text is capitalized <span style="text-transform : uppercase;">this text is uppercase When it comes right down to it, deprecating the font tag isn't so bad. With CSS to fill in the gaps and add extra tools to manipulate your text even more than the font tag ever did.
Font Properties There are many CSS properties to use in your style sheets. Here are some of the more popular properties and how to use them.
font-family Defines the font family that the text should be displayed in. (Note: if the computer viewing your page doesn't have the font specified, the browser will guess. This can cause strange effects. It is best to use standard fonts, or the generic font names.)
To define specific font families, write the family names in the order you would like them displayed (most accurate to your design first). Separate each family with a comma: font-family : arial,geneva,helvetica ; To define a generic font family: font-family : serif; Generic font families allow the browser to choose the font most appropriate that is included on the current system. These are: • • • • •
serif sans-serif monospace cursive fantasy
font-size Defines the size of the font. The font size can be specified as an exact size, a relative size, a length, or a percentage (of the existing space). To define the exact size, simply specify the size in one of the following measurements: • • • • • • •
ems (font-size : 13em;) pixels (font-size : 13px;) picas (font-size : 13pc;) points (font-size : 13pt;) inches (font-size : 13in;) centimeters (font-size : 13cm) milimeters (font-size : 13mm)
There are seven standard sizes in HTML and XML documents, you can define your fontsize based on those sizes as well (standard text is size medium): • • • • • • •
font-size : xx-small; font-size : x-small; font-size : small; font-size : medium; font-size : large; font-size : x-large; font-size : xx-large;
To define your font-size as relative to the surrounding text, you can simply say: •
font-size : larger;
•
font-size : smaller;
font-style Defines whether the font is italic, oblique, or normal. • • • •
font-style : italic; font-style : oblique; font-style : normal; (the default)
font-variant Defines whether the font is normal or small-caps. Try these styles in your Web page: • • •
font-variant : small-caps; font-variant : normal; (the default)
font-weight Defines how dark or light the text is. These are the options for font-weight. Try out these styles in your Web page. • • • • • • • • • • • • •
font-weight : bold; font-weight : bolder; font-weight : lighter; font-weight : 100; font-weight : 200; font-weight : 300; font-weight : 400; font-weight : 500; font-weight : 600; font-weight : 700; font-weight : 800; font-weight : 900; font-weight : normal; (the default)
Text Properties There are many CSS properties to use in your style sheets. Here are the text properties and how to use them.
word-spacing Defines the amount of space between the words.
• •
word-spacing : normal; word-spacing : +15mm;
Specify the length as you would the height of your font with ems, pixels, picas, points, inches, centimeters, or milimeters. (Note: many browsers don't currently support this style tag.)
letter-spacing Defines the amount of space between each letter. • • •
letter-spacing : normal; letter-spacing : +1mm; letter-spacing : -1px;
Specify the length as you would the height of your font with ems, pixels, picas, points, inches, centimeters, or milimeters. (Note: many browsers don't currently support this style tag.)
text-decoration Defines the decoration of the text. • • • • • •
text-decoration : none; (used on tags to remove the underline.) text-decoration : overline; text-decoration : underline; text-decoration : line-through; text-decoration : blink;
text-transformation Defines the case of the text. • • • •
text-transform : capitalize; text-transform : uppercase; text-transform : lowercase; text-transform : none;
text-align Defines how the text will be aligned on the page. • • •
text-align : left; text-align : right; text-align : center;
•
text-align : justify;
text-indent Defines how much the first line of the text should be indented. • •
text-indent : 15mm; text-indent : 5%;
Specify the length as you would the height of your font with ems, pixels, picas, points, inches, centimeters, or milimeters.
line-height Defines the amount of space between lines of text. • • •
line-height : 1.5; (the number of lines) line-height : 5mm; line-height : 10%;
There are many more styles, but hopefully, these will get you started using style sheets.
Related Documents
Results Sheets - 4 Web Site
November 2019 8
Cascading Style Sheets
June 2020 15
Cascading Style Sheets
November 2019 45
Cascading Style Sheets (css)
December 2019 56More Documents from "satyanarayana"