Log in to check your private messages 
Username: Password:   
  howtodoit.myfastforum.org
  Walkthough guides for myfreeforum phpbb 2 forums
Index  FAQ  Search  Memberlist  Usergroups  Profile

Text
Text
Friends
MYFF Support Forum
HOWTODOIT (PHPbb3)
portalogy
CGArts
ANNOUNCEMENTS
Complete List of templates Available
Please Read First Before Editing your template
Permissions
Admin Index
Sticky Articles
Latest Posts
Friends

Start | Stop
Stylesheets Guide .css
Jump to:  
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.    howtodoit.myfastforum.org Forum Index » General Information
Author Message
Symon
Guide Legend
Guide Legend



Joined: 11 Jun 2006
Posts: 911


Location: Berkshire,England
FLAGS
Add Comment
Show Comments
PostPosted: Wed Jul 05, 2006 11:28 pm  Reply with quote

What Is CSS?

CSS (cascading stylesheets) is a simple mechanism for controlling the style of a Web document without compromising its structure. By separating visual design elements (fonts, colors, margins, and so on) from the structural logic of a Web page, CSS give Web designers the control they crave without sacrificing the integrity of the data - thus maintaining its usability in multiple environments. In addition, defining typographic design and page layout from within a single, distinct block of code - without having to resort to image maps, <font> tags, tables, and spacer GIFs - allows for faster downloads, streamlined site maintenance, and instantaneous global control of design attributes across multiple pages.

Client-side support for the various CSS properties is uneven, even among browsers that support stylesheets. The CSS properties and values presented here are those supported by both Microsoft Internet Explorer 4 and Netscape Navigator 4.

How CSS Works

CSS overrides the browser's default settings for interpreting how tags should be displayed, letting you use any HTML element indicated by an opening and closing tag (including the <p> tag) to apply style attributes defined either locally or in a stylesheet.

Stylesheets contain rules, composed of selectors and declarations that define how styles will be applied. The selector (a redefined HTML element, class name, or ID name) is the link between the HTML document and the style. There are two different kinds of selectors: types (HTML element tags) and attributes (such as class and ID names).

A CSS declaration has two parts,

a property ("color") and a value ("red").
The basic syntax of a rule

selector {property 1: value 1; property 2: value: 2} "
An example (containing two declarations, as above)

P {font-size: 8pt; color: red}

Local, Global, and Linked Stylesheets

Local (inline) stylesheet declarations, specific to a single instance on a page, can be used instead of <font> tags to specify font size, color, and typeface and to define margins, leading, etc.

<p style="font size: small; color: red; font-weight: bold; font-family: Arial, Helvetica, non-serif">This is a local stylesheet declaration. </p>
Global (embedded) stylesheet declarations, applicable to an entire document, are defined within the <style> and </style> tags, which precede the <body> tag in the HTML document and are usually placed in the header.

To embed a global stylesheet in your HTML document:

<html>
<head>
<title>Title</title>
<style type="text/css">
<!--
[STYLE INFORMATION GOES HERE]
-->
</style>
</head>
<body>
[DOCUMENT BODY GOES HERE]
</body>
</html>

Linked stylesheet declarations use a single stylesheet (in a separate file, saved with the .css suffix) to define multiple pages. A typical .css file is a text file containing style rules, as here:

P {font-family: non-serif; font-size: medium; color: red}
H1 {font-family: serif; font-size: x-large; color: green}
H2 {font-family: serif; font-size: large; color: blue}

To apply a .css stylesheet ("style.css" in the example below) to an HTML page, a <link> tag is added to the page header:

<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>

Inheritance

In cases where local, global, and linked style definitions conflict, the most specific stylesheet will generally take precedence: local overrides global, global overrides linked. Similarly, inline style attributes override ID, ID overrides class, and class overrides stylesheet-defined HTML elements.


Units of Measure

Throughout this CSS reference guide, abstract values (notably values involving units of measure) appear between angle brackets: <color>. They should be replaced by actual values as indicated in the key below.

Length Units

<length> indicates a number followed by a unit of measure: 24px.

The number can be an integer or a decimal fraction, and can be preceded by + or -.

Units can be absolute or relative:

Absolute: mm, cm, in, pt, pc (millimeters, centimeters, inches, points, picas)

Relative: em, ex, px (the element's font height, the element's x-height, pixels)

Font size may be defined in points, pixels, inches, or centimeters (pt, px, in, cm) or as a percentage.

<absolute-size> can be: xx-small, x-small, small, medium, large, x-large, xx-large.

<relative-size> can be: larger, smaller.

Percentage Units

<percentage> indicates a number followed by a % sign: 50%.

In the text-indent, margin, padding, and width properties, percentage values are relative to the width of the parent element.

In the font-size property, percentage values are relative to the font size of the parent element.

In <color> values, percentages can be used to express RGB values.

Color Units

<color> can represent either <color-name> or <rgb> values, as defined below:

<color-name> can be: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

<rgb> can be: #<hex><hex><hex> rgb(<number>, <number>, <number>) rgb(<percentage>,<percentage>,<percentage>) <hex> represents a hexidecimal value, <number> a decimal value, and <percentage> a percentage.

CSS-P (Position)

CSS-P allows you to explicitly determine the position of HTML elements, providing powerful layout control both for static documents and for dynamic, animated HTML-based content.

There are two basic methods of positioning HTML elements using the position property. Absolute position lets you set an element's position arbitrarily - that is, relative to its parent container and independent of the document's flow. Relative position allows an element to be offset relative to its natural position in the document's flow.

Position is specified with the top and/or left properties using a <length> value (relative or absolute as appropriate).

The visibility property sets the display state of the element, but doesn't affect its position in the layout: An element takes up the same space whether hidden or visible.

Z-index is used to specify the stacking order of the positionable elements above or below other HTML elements. The number value may be positive or negative, and must be an integer. Default z-ordering of elements in a document is back-to-front in the order of their appearance in the HTML.

The overflow element is used to control the display of an element's contents in cases where they exceed its given dimensions. It applies only to elements with the position property of type "absolute."

Dynamic aspects of managing positioned elements, like hiding, displaying, and movement, are implemented using an external scripting language, such as JavaScript.

The top and left properties may be expressed as percentages. For other CSS-P properties listed, percentages do not apply.


Attributes

Class and ID

Classes let you create grouping schemes among styled HTML tags by adding the style definition of a particular class to the style definitions of several different tags. In the stylesheet, a class name is preceded by a period (.) to identify it as such:

.foo {property 1: value 1; property 2: value 2}
A very simple example:
<style>

P {font-family: sans-serif; font-size: 10pt}
H1 {font-family: serif; font-size: 30pt}
H2 {font-family: serif; font-size: 24pt}
.red {color: red}
.green {color: green}
.blue {color: blue}

</style>

The tags and classes can then be used in combination:

<h1 class="red">This is rendered as 30-point red serif text.</h1>

<p class="red">This is rendered as 10-point red sans-serif text.</p>

Or not:

<p>This is rendered as 10-point sans-serif text in the default color.</p>
The ID attribute is used for a uniquely defined style within a stylesheet. In the stylesheet, an ID name is preceded by a hash mark (#) to identify it as such:

#foo {property 1: value 1; property 2: value 2}
<h2 id="foo">Text rendered in the foo style.<h2>

Text-Level Attributes: <SPAN> and <DIV>

The <span> tag is generally used to apply a style to inline text:

<p><span class="foo">This text is rendered as foo-style</span> and this is not.
The <div> tag is generally used to apply a style to a block of text, which can also include other HTML elements:

<div class="foo">
<p>The "foo" style will be applied to this text, and to <a href="page.html">this text</a> as well.
</div>

The style attribute provides a way to define a style for a single instance of an element:

<p style="font-size: 10pt; color: red">This text is rendered as red, 10-point type</p>
The class, ID, and style attributed can be applied within the <span> and <div> elements. Used with class or ID, the <span> and <div> tags work like customized HTML tags, letting you define logical containers and apply a style to their contents.
View user's profile Send private message Visit poster's website FACEBOOKSTEAM
Symon
Guide Legend
Guide Legend



Joined: 11 Jun 2006
Posts: 911


Location: Berkshire,England
FLAGS
Add Comment
Show Comments
PostPosted: Wed Jul 05, 2006 11:31 pm Reply with quote

CSS Properties

Name of
Property
Rule syntaxPossible values
font-family<selector> {font-family:<value>}<family-name> (specify) or <generic-family>~ [serif, sans-serif*, cursive*, fantasy*, monospace]
font-style<selector> {font-style:<value>}normal, italic
font-weight<selector> {font-weight:<value>}normal*, bold, 100*, 200*, 300*, 400*, 500*, 600*, 700*, 800*, 900*
font-size<selector> {font-size:<value>}<absolute-size>, <relative-size>*, <length>~~, <percentage>
font $<selector> {font:<value>}<font-style>~~, <font-weight>*, <font-size>**, <font-family>**

Color and Background
Name of
Property
Rule syntaxPossible values
color<selector> {color:<value>}<color> (see "Units of Measure")
background-color<selector> {background-color:<value>}<color> (see "Units of Measure")
background-image<selector> {background-image: url(<value>)}URL (relative or absolute path)
background $<selector>{background:<value>}<background-color> (i.e., <color>)

Text properties
Name of
Property
Rule syntaxPossible values
Text-decoration<selector>{text-decoration:<value>}underline, line-through
text-transform<selector>{text-transform:<value>}capitalize*, uppercase*, lowercase*, none*
text-align<selector>{text-align:<value>}left, right, center, justify*
text-indent<selector>{text-indent:<value>}<length>, <percentage>

Box properties
Name of
Property
Rule syntaxPossible values
margin $<selector>{margin:<value>}<length>**, <percentage>**, auto(sequence: t r b l)
margin-top<selector>{margin-top:<value>}<length>**, <percentage>, auto
Margin-right<selector>{margin-right:<value>}<length>, <percentage>, auto
margin-bottom*<selector>{margin-bottom:<value>}<length>*, <percentage>*, auto*
margin-left<selector>{margin-left:<value>}<length>, <percentage>, auto
padding $*<selector>{padding:<value>}<length>*, <percentage>*, (sequence: t r b l)
padding-top*<selector>{padding-top:<value>}<length>*, <percentage>*
padding-right*<selector>{padding-right:<value>}<length>*, <percentage>*
padding-bottom*<selector>{padding-bottom:<value>}<length>*, <percentage>*
padding-left*<selector>{padding-left:<value>}<length>*, <percentage>*
border-color*<selector>{border-color:<value>}<color>*
border-style*<selector>{border-style:<value>}solid*, double*, groove*, ridge*, inset*, outset*
border $*<selector>{border:<value>}<border-width>*, <border-style>*, <color>
Block-level and Replaced Elements
width<selector>{width:<value>}<length>, <percentage>, auto
height<selector>{height:<value>}<length>, auto
float<selector>{float:<value>}left, right
clear<selector>{clear:<value>}none, left*, right*

Position (CSS - P)
Name of
Property
Rule syntaxPossible values
position<selector>{position:<value>}absolute, relative
top<selector>{top:<value>}<length>, <percentage>, auto
left<selector>{left:<value>}<length>, <percentage>, auto
visibility<selector>{visibility:<value>}hidden, visible, inherit
z-index<selector>{z-index:<value>}<number>, auto
overflow<selector>{overflow:<value>}visible, hidden, auto

* = Not supported on IE 4/Mac
** = Buggy on IE 4/Mac
~ = Partially supported on IE 4/Mac
~~ = Partially supported on all 4 browsers
$ = Shorthand Property

View user's profile Send private message Visit poster's website FACEBOOKSTEAM
Symon
Guide Legend
Guide Legend



Joined: 11 Jun 2006
Posts: 911


Location: Berkshire,England
FLAGS
Add Comment
Show Comments
PostPosted: Wed Jul 05, 2006 11:31 pm Reply with quote

CSS Examples

Individual Properties
Style rulesComments
p{font-family: Helvetica, Geneva;Of those listed, the first available font will be applied.
font-style: italic;Text will be rendered as italic.
font-weight: bold;Text will be rendered as bold.
font-size: 10pt;Text will be rendered as 10-point type.
color: #00FFFF;Text will be rendered to the hex color value #00FFFF.
background-color: blue;The element's background color will be rendered as blue.
background-image: url(images/foo.gif)}The element will have the background image(s) specified.
.foo{text-decoration: underlined}Text in the class "foo" will be underlined.
{text-transform: lowercase}Text in the class "foo" will be rendered as lowercase.
#foo{text-align: center}Text with the ID "foo" will be center-aligned.
{text-indent: 1em}Text with the ID "foo" will be indented 1 em.
p{margin-top: 12px;The element's top margin will be 12 pixels.
margin-bottom: 18px;The element's bottom margin will be 18 pixels.
padding-right: 8pt;The element's right padding will be 8 points.
padding-left: 4pt}The element's left padding will be 4 points.
body{border-color: red;Borders will be red.
border-style: solid}Borders will be solid.
Block-level and replaced elements
img{width: 20px;The element's width will be 20 pixels.
height: 40px;The element's height will be 40 pixels.
float: left}Text will flow to the left of the element.
p{clear: left}Moves the element below a floating element placed on the left.
Shorthand Properties
Style rulesComments
p{font: 10pt bold non-serif}Text will be rendered as 10-point bold non-serif type.
{background: black}The element's background color will be black.
{margin: 25px}All of the element's margins will be 25 pixels.
{margin: 20px 10px 20px 10px}Top and bottom margins will be 20 pixels; left and right margins will be 10 pixels.
body{padding: 2px}Padding will be 2 pixels on each side.
{padding: 8px 4px 8px 4px}Top and bottom padding will be 8 pixels; left and right padding will be 4 pixels.
{border: 2px solid red}There will be a red, solid border on all sides of the element.
Position (CSS - P)
Style rulesComments
#foo{position: absolute; top: 15pt; left: 15pt}The element's absolute position will be set 15 points from the top and 15 points from the left.
{visibility: hidden}The element's contents will be hidden.
.foo{z-index: 2}The element's z-index will be two.
p{overflow: visible}The element's contents will be rendered (visible) even if they exceed its height or width.
{overflow: hidden}The element's contents will be clipped to its height and width, and no scrolling mechanism will be provided.


View user's profile Send private message Visit poster's website FACEBOOKSTEAM
Display posts from previous:   
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.    howtodoit.myfastforum.org Forum Index » General Information


 
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum

HOWTODOIT was designed and built by Symon Field
Creator Of ☆ ☆ FunnyWorld
HOWTODOIT© Symon Field 2006,2007,2008

Powered by phpBB Group © 2001,2005.
 
Create your own free forum | Buy a domain to use with your forum