Presentation is loading. Please wait.

Presentation is loading. Please wait.

 A style sheet is a single page of formatting instructions that can control the appearance of many HTML pages at once.  If style sheets accomplished.

Similar presentations


Presentation on theme: " A style sheet is a single page of formatting instructions that can control the appearance of many HTML pages at once.  If style sheets accomplished."— Presentation transcript:

1

2  A style sheet is a single page of formatting instructions that can control the appearance of many HTML pages at once.  If style sheets accomplished this and nothing else, they’d save millions of dollars worth of Webmasters’ time.  The HTML style sheet standard enables you to set a great number of formatting characteristics that were never malleable before with any amount of effort. .

3  These include exacting typeface controls, letter and line spacing, margins and page borders and expanded support for non- European languages and characters.  They also enable sizes and other measurements to be specified in familiar units such as inches, millimeters, points and picas.  You can also use style sheets to precisely position graphics and text anywhere on a Web page.

4  Despite their intimidating power, style sheets can be very simple to create.  Some of these properties, such as text color, background tile, and centered small print, are easy to achieve with ordinary HTML tags. Others, such as line spacing and wide margins, are beyond the scope of HTML.  All of them can now be achieved easily with style sheets.  Style sheet specification are really a separate language.

5  Of course, there are some familiar HTML tags in there.  As you might guess, body, p, h1, h2, a, and div in the style sheet refer to the corresponding tags in the HTML documents to which the style sheet will be applied.  In curly braces after each tag name are the specifications for how all text within that tag should appear.  The pt after each measurement means points (72points = 1inch).  If you prefer, you can specify any style measurement in inches (in), centimeters (cm), or widths-of-a-letter- m, which are called ems (em).  font size 3=12-point text, font size 1=6-point text, font size 7=24-point text

6  To link this style sheet to the HTML documents, you include a tag in the section of each document.  It contains the following tag:   This assumes the style sheet was saved under the name hhh.css in the same directory folder as the HTML document.

7  There are actually three different languages to choose from when you make a style sheet.  Cascading Style Sheets, level 1 (CSS1)  Cascading Style Sheets, level 2 (CSS2)  Cascading Style Sheets, level 3 (CSS3)

8  font: Lets you set many font properties at once. You can specify a list of font names separated by commas; if the first is not available, the next is tried, an so on. You can also include the words bold and/or italic and a font size. Each of these font properties can be specified separately with font-family:, font-size:, font-weight: bold, and font-style: italic if you prefer.  Line-height: Also known in the publishing world as leading. This sets the height of each line of text, usually in points.  color: Sets the text color, using the standard color names or hexadecimal color codes

9  text-decoration: Useful for turning link underlining off – simply set text decoration to none. The values of underline, italic, and line- through are also supported.  text-align: Aligns text to the left, right, or center (just like the HTML attribute. The CSS1 standard allows a value of justify for text aligned to both left and right margins.  text-indent: Indents beyond the left margin by a specified amount. You can say how far to indent in units (px, in, cm, mm, pt, pc), or you can specify a percentage of the page width (such as 20%)

10  margin: Sets the left and right margins to the same value, which can be in measurement units or a percentage of the page width. Use margin- left: and margin-right: if you want to set the left and right margins independently, and margin- top: to set the top margin.  background: Places a color or image behind text, either with a color or an url (address) where address points to a background image tile. Note that this can be assigned not only to the tag, but to any tag or span of text to “highlight” an area on a page.  a:link {color: red;} a:visited {color:red;} a:active {color: black;}

11  Each type of specially formatted text you define is called a style class.  A style class is a custom set of formatting specifications that can be applied to any passage of text in a Web page.  For example, suppose you wanted two different kinds of headings in your documents. You would create a style class for each one by putting the following text in the style sheet.  h1.silly {font: 36pt Comic Sans;}  h1.serious {font: 36pt Arial;}  To choose between the two style classes in an HTML page, you would use the class attribute, as follows:  Silly text  Serious text

12  In some situations, you might want to specify styles that will be used in only one Web page.  You can then enclose a style sheet between and tags and include it in the beginning of an HTML document, between the and tags.  No tag is needed, and you cannot refer to that style sheet from any other page (unless you copy it into the beginning of that document, too.)  If you want to specify a style for only a small part of a page, you can go one step further and a style attribute within a,, or tag.

13  and are dummy tags that do nothing in and of themselves except specify a range of text to apply any style attributes that you add.  The only difference between and is that forces a line break, while doesn’t.  Here’s how a sample style attribute might look:  This text is green, but this text is red. Back to green again, but… …now that green is over, and we’re back to the default color for this page.

14  For example, the following HTML would position the first image on the page exactly 50 pixels to the left and 40 pixels down from the top-left corner of the browser window.  It would then indent the text exactly 60 pixels from the left edge of the browser window.   This is a pretty picture.

15  The following line of HTML shows how to position an image with the top-left corner exactly 50 pixels from the left and 40 pixels down from the top edge of the browser window.   Along with left: and top: positioning, you can also optionally include width: and height: for text blocks.

16 TagAttributeFunction … Allows an internal style sheet to be included within a document. Used between and. Links to an external sheet (or other document type). Used in the section of the document. href=“…”The address of the style sheet. type=“…”The Internet content type. (Always “text/css”for a style sheets.) “rel=“…”The link type. (Always “stylesheet”for a style sheets.) … Does nothing at all, except provide a place to put style or other attributes. style=“…”Includes inline style specifications. (Can be used in,,, and most other HTML tags.)


Download ppt " A style sheet is a single page of formatting instructions that can control the appearance of many HTML pages at once.  If style sheets accomplished."

Similar presentations


Ads by Google