| CSS | Harold Goldstein -- -- http://goldray.com/ http://goldray.com/css/safe-styles.htm |
|---|
Safe Style Properties
A Style is a set of display and positioning attributes that characterize the appearance and position of elements of your page. We use style sheets so that we can refer to a particular style again and again without repeating all the attributes of that style. WestCiv has a complete CSS guide. And see our CSS Resource page.
Our compendium of CSS resources has a range of references.
Style can be specified within a holder (or container) tag as a selector:
| <p> | <li> | <h1>-<h6> | <b> | <blockquote> | <body> | ... |
|---|---|---|---|---|---|---|
| <a> | <a.link> | <a.hover> | <a.visited> | |||
| <div> | <span> | are containers created for applying style | ||||
Browser/versions implement differently. Most Style Properties here are relatively SAFE (beware if marked !!) to use but see this CSS browser support table.
Wherever length units are used you may use pt (points - 72pts/in), pc (pica), px (pixels), em (% default font), in, cm or mm. You may use smaller/larger to change size and keywords from xx-small through small, medium and xx-large. You may also use a % of the previous font size or a negative value.
Recommended books include:
Cascading Style Sheets, Second Edition: Designing for the Web by Lie and Bos.
Style Sheets for HTML and XML by Boumphrey.
Text/Font Appearance Characteristics
font-family: arial, MS serif, Century Courier, serif, sans-serif, cursive;
font-weight: light, medium, bold, 100-900;
font-style: italic, oblique, normal;
font-size: 11pt;
color: #000000, black; (see my color page)
background-color: #ffffff, white;
background-image: url(background.gif);
background: url(safe-styles.gif) right center no-repeat fixed;
margin-left (or right, top): 2in;
text-align: left, right, center, justify;
text-indent: 1in;
text-decoration: underline, overline(!!), blink(!!), line-through, none (for links);
text-transform: uppercase, lowercase, Capitalize;
line-height: 20pt; (!!)
letter-spacing: 200%; (!!)
|
Specifying Style Inlining Style Style rules consist of specifying the selector and a declaration of style, each declaration having a property to be defined and a value. The style may be specified inline using the style attribute applied to any of the elements specified above. So the below blockquote uses a style specifed as: <blockquote style="font-family:sans-serif; font-size:14pt; font-weight:bold; font-style:italic; color:#ff00ff; line-height:15pt;"> Embedded Style You may use an embedded style sheet by placing the appropriate definitions in the <HEAD> section of the page. This is useful when a single document has a unique style with elements appearing throughout. For example, with the following in the <HEAD> the text on the left uses the <H6> tag and the text on the right uses the <p class=ex-1>. The class is identified by the period (.) before its name in the style specification. | |||
<HEAD>
|
|||
Note that our style sheet redefines the already existing <H6> speciifcation and is used wherever we use <H6> in the document. Our style sheet creates a new style class called ex-1 which may then be referenced in any of the html tags that take a style. We used <p class="ex-1"> but we could also have used <blockquote class="ex-1"> for example. | |||
|
External Style Sheets You can also put your style specifications in a separate file and link to it, in the <HEAD> as an external style sheet. This allows a style sheet to be used in multiple documents. We would first put a link statement in the <HEAD> of the file: (in this example we use <blockquote class=from-external> for this effect). <HEAD> And here is what the file styles.css looks like using <p class="x11">.
<style type="text/css"> We have defined 2 classes of paragraphs so now we can use the <p> tag in three ways, the non-styled way and with either of the defined classes. We also defined a separate class, from-external, for use anywhere. |
|
Importing a Style Sheet You may import a style sheet from the web directly into your inline STYLE or into your CSS file. <HEAD> <style type="text/css"> Other CSS rules may be included but the @import statements must come first. Rules in the style sheet itself override those imported and the last file imported overrides earlier files. The Body Tag You can assign style to the body and they become the default. You can also assign backgrounds: body {background: red url(image.gif); center center no-repeat fixed} which selects color, a background image, horiz. and vert. alignment, tiling (can use repeat-x, repeat-y) and action. (!!) |
|
Using Styles for Positioning and Boxes CSS allows exact Positioning of all elements on your web page. We show the basics; WebResource has a tutorial with the details. Beware! Older browsers ignore CSS and with Position Styles they may change the order of your elements and Netscape is totally unpredictable. So TEST.
The use of #posrule1 as an ID is similar to declaring a class with .posrule2. We'd say: <p ID=#posrule1> And the text that appears would then be positioned with respect to the top of the page (due to position: absolute;) 20 px from the top, 30 px from the left, in a space that is 15 px wide and 50 px high. If it overflowed the results would be visible. The text is green. Also: <p class=posrule2> And the text would be positioned relative to previously positioned elements on the page and would be 20 px below, 15 px to the left, etc. The overflow can also be defined as auto (scroll bar if needed) or scroll (scroll bar always). In this case posrule2 is more visible due to z-index. Boxes Any block of text can be contained in a box and this box is placed in your browser based on its box properties and the position properties mentionned above:
| ||||
 Copyright © 2012 The
Goldray Group, All Rights Reserved- - Version 1.11.12 http://goldray.com/css/safe-styles.htm |