NPSites.com » CSS

CSS Lesson 1 – Introduction To CSS For Webdesign

admin — Sun, 12 Apr 2009 22:35:21 +0000

Introduction to CSS

CSS is a set of page markup definitions that can be applied to HTML documents to define how pages are rendered. This addition to the HTML tag set can be applied by Authors internally in each HTML document or they can reside in a separate server side file that is referenced and applied to the document. The enduser may also define their own Style Sheet that resides on their local system to be applied to all of the documents that they browse.

So, what are the advantages of CSS and HTML over plain HTML? For web site managers the use of an external file containing style sheet definitions means that they can control the formatting of their pages across their site without the need to edit each individual file. This is also very important when pages are generated by databases and CGI scripts.

The use of CSS commands inside a document can provide authors extended formatting features to allow specific information to be presented to the viewer in an exacting method.

For the enduser the use of a client side Style Sheet to modify how all documents are displayed can offer the ability to view information with a consistent style. For users with disabilities CSS can offer readable Font sizes, colors and face choice and in the future it will also add formatting that will instruct how pages are converted to synthesized speech.

What are the drawbacks of CSS?
Browser compatibility must be the most common difficulty. Anyone that has had problems trying to keep their JavaScript compatible across browsers and even within different versions of the same manufacture’s browser knows that making working documents that are consistent often means not using such features. If a Browser is incapable of implementing CSS it should be able to ignore the CSS style selectors and revert to standard HTML. However if you are creating documents for a closed audience, as would be the case in a Corporate Intranet environment, the probability of successful implementation is much greater.

Another factor that Webmasters should be aware of concerning the use of an external file to define CSS Declarations is that the Enduser will have to access 2 files to view their pages. This possible initial lag should be weighted against the overall load that would be placed on the server if every HTML file required additional data to be added to define the CSS information internally. Analysis of Initial lag vs. overall server load would be dependent upon the amount of CSS use across the site.

When designing a large full featured website with many different offerings such as a CMS / Blog, Shopping Cart and User Forms you will want to keep continuity throughout. This is possible by referencing standard styles in a main style sheet file and importing it into all of your different applications. Use a second style sheet to extend and meet the the requirements for specific software applications.

CSS Basics

The application of Styles through CSS is made possible by adding additional formatting controls to the current HTML TAG Elements. When the author wants to take advantage of the additional formatting a Style Selector is made and applied to the HTML element.

Example:

In the example above the HTML element

has a color declaration and the value is a rrggbb color of #ff0000 . The result would be that all paragraphs would be formatted to be displayed with a font color of red. However the Author could override this Style Declaration Value by using a child element like < font color=”blue” > inside of the paragraph.

Another important note is that where it was once common to leave the

tag open Authors should now take care to close it with a

to make sure that Style Declarations are properly controlled.

CSS Lesson 2 – Understanding The Cascading Part Of CSS Cascading Style Sheets

admin — Mon, 13 Apr 2009 17:54:12 +0000

What is Cascading?

When applying styles to the elements of your website it is important to understand the hierarchy of how Cascading Styles are applied to elements that are inside of elements.

In standard HTML all pages will start and end with a element tag and the content of the page will be placed inside of the element tag.

When you apply your CSS Styles to a higher element it will be applied to all elements within it.

For example if you were to apply a font style to your tag the whole page would use those settings unless you override them individually.

.body {color:#33ff33}

This is some text

This Text has an override

The styles will be applied from the outer most container to the inside container.

What about Enduser Browser CSS Files

Because both the Author and the Enduser have the ability to use and apply their own style sheets, Cascading is used to control which Style Selector will be used and which Style Selectors will be overridden.

Endusers often make changes to a Browser CSS file so they can read your pages better. For low Vision Visitors of your site they may increase the font size or they may apply font colors that allow them to read your pages easier.

Normally if the Author and Enduser apply different values to the same element the author’s settings will override the enduser’s. However because there are situations where the enduser’s settings should have a higher priority the cascading value !important can be used to set a higher weight to a certain Declaration Value.
The Author’s style

The Enduser’s Style

In the example above we see that the use of !important in the enduser’s style sheet is used to override the author’s setting.

The Author can also take advantage of this value to override a previously defined element by applying the !important value directly to the HTML tag.

The Author’s style defined in the head area:

Author’s local override in the HTML tag:

this paragraph is green

Using the !important declaration feature in your CSS can be used to work out bugs in your formatting. This declaration shown Inline above can also be used in your styles.css file.

Cascading and the Document Tree

When a page is rendered there is a hierarchical method applied to the formatting. When the browser retrieves the page it first collects the all of the style information and sorts the selectors using the cascading order to see which rule will take priority. Then the Document Tree is used to add additional weighted order.

When elements are added to a page parent elements influence the child elements so if formatting is applied to the parent element it will be inherited by the child unless the child element overrides the formatting of the parent element.

CSS Document Tree

If someone asks your over for dinner.

Don’t eat the chicken.

Chicken are people too.

What it looks like:

If someone asks your over for dinner.

Don’t eat the chicken.

Chicken are people too.

In the example above you can see that the first line is inheriting its color properties from the BODY element. Then in the first paragraph the P element overrides the BODY TEXT color and finally inside the paragraph the Font element overrides the P element applying its own font size setting.

When you compare the first and second paragraphs you can see that the Font Element is used to partially override parent elements but where the Child element does not override the parent element it will accept the parents formatting characteristics.

The Font element in the first Paragraph accepts the color attribute but changes the size. The Font element in the second paragraph keeps the size and changes the color.
The Document Tree for this file would be:

         HTML
          |
         BODY
         /  \
 Body Text   Paragraph
                 |
               FONT

Final Note

It is important to remember and map out what parent elements and styles effect lower or internal tag elements. You will find when you first start that applying font information, borders, margins and other settings to parent elements they can throw you off in your design.

To find where to fix the problem work your way from the inside out until you find the style you need to change or override.

Cascading is also effected by the line number of your CSS style.css file.

Elements that appear closer to the top of the CSS file will effect elements below it. This is where the use of the !important declaration will often be used. We will go over this in more detail in a lesson about setting up your CSS style.css file.

Finally if the element is not defined by a CSS Selector the default settings of the enduser’s client are used to render the element.

CSS Lesson 3 – Linking CSS Files To Your Documents

admin — Tue, 14 Apr 2009 16:57:46 +0000

Style Sheets in External Files

Link

To define an external Style Sheet to be used to format your HTML you use place a Link element in the Head area of the HTML file.

The basic tag would be:

Where HREF tells the location and file name and REL indicates the file is a Style Sheet.

Additional Declarations include:

Media

Media is used to define the application of the CSS to its end use. If more than one external style sheet is defined with the link element the Media type would set the proper file to be used for the proper use of the page. The Media definition is not implemented in IE4 or NS4.

You can also define more than one profile with comas between the values.

Media=Print,Screen,Aural

PRINT – For documents viewed on screen in print preview mode.
SCREEN – a continuous presentation for computer screens.
PROJECTION – paged presentation for projected presentations.
BRAILLE – for braille tactile feedback devices.
AURAL – aural presentation, e.g. for a speech synthesizer.
ALL – the default value, the style sheet applies to all output devices.

Title

The Title Attribute can be used to define the type of style sheet. Not using the TITLE tag makes your file persistent meaning the Selectors in a file without a title will always be applied to the document.

TITLE=”default”

If you define more than one Style Sheet to be applied to your document you can use the title attribute to group them.

TYPE can be used to describe the file type of the Style Sheet.

Meta Tag

The Meta element can be used on your page to identify to the Enduser’s client that your page includes CSS information.

Style Sheet use by the Enduser

If the Enduser would like to construct their own style sheet they would follow the same method as an author that is constructing an external style sheet. However because the enduser will not be able to prepare style selectors that will override all the possible ID and Class Element Declarations the enduser’s User Agent should be able to ignore server side Style Sheets.

Internet Explorer agents define the client side Style Sheet in the Internet Options – General Tab Under the Accessibility area.

CSS Lesson 4 – Using Selectors To Define CSS Styles

admin — Thu, 16 Apr 2009 20:04:03 +0000

Selectors

A Selector is the definition of a formatting Style that can be applied to a HTML Element.
The Selector has three basic parts:

Element {Declaration: Value}

The Declaration and Value are surrounded by {} braces and the
Declaration is separated from the value by a colon : and a space.

The Selectors relation to common HTML would be similar to this tag structure that is used to define the color of a font:

< font color=orange >

Where Font is the Element,
Color is the Declaration and
Orange is the Value of the Declaration.

Type Selectors

Type selectors are used set the definition of a certain type of element. If you wanted to assign a property to all of the

elements in your document you would use the following.

The syntax is:
Element {declaration: value }

Multiple Declarations

If you would like to define more than property for your Element you can use a semicolon ; to separate Declarations.

The syntax is:
Element {declaration: value ; declaration: value}

Grouping Elements

If you would like to apply the same properties to different elements you can use a coma , between the elements and use the same Declarations and Values.

The syntax is:
Element, Element, Element {declaration: value }

Parent Child Elements

Contextual elements can be combined to for a selector that will be applied only if a certain element pattern is used in the HTML.

Only works in IE4.

If you wanted all Italic characters to be Blue but only if they were contained inside a H1 headline. You could define the selector like this:

The syntax is:
ParentElement ~ ChildElement {declaration: value}

The following text would be bold but the Italic (e) would be rendered both Italic and Blue. However Italic text that is not contained inside a Parent B Element will be rendered just plain Italic and not blue.

Text

The Result would look like

Text

Sequential Selectors

When you want to define a selector that would be applied only if one element directly follows another element you can use the following format.
Only works in IE4.

The syntax is:
/FirstElement ~ SecondElement/ {declaration: value}

And would be applied as follows:

Chickens

happy chickens

ID Elements

If you would like to define a declaration and value that you can apply to elements in your document but you do not want to apply this declaration to all tags of one type you can use an ID element and then apply that ID to your tags as you wish.

text

The syntax is:
ID {declaration: value }

The HTML Tag referenced:

If you would like to set up optional declarations for a single element you can apply an ID to an element. This will allow you to use varying styles within the same element.

text

The syntax is:
Element ID {declaration: value }

The HTML Tag referenced:

Class Elements

Class Elements are defined in a similar method to ID Elements. They can be applied various to HTML elements in a per element method or they can define a subset class of an element.

text

The syntax is:
.class {declaration: value }

The HTML Tag referenced:

Pseudo-Classes

The ability to change the properties of a element based on the state of the element can be accomplished by using a Pseudo Class Element.

The Anchor < A > element can have different rendering properties applied to it based upon the current state.

The possible variations include:

link – unvisited links
visited – visited links
hover – user hovers
active – active links

click here

The syntax is:
element:pseudo_class {declaration: value }

Final Note

When defining your Selectors in your CSS file it is good practice to group your selectors based on their use. If you are defining for example your sidebar where ads or other blocks of information will go then group those selectors so you can find and modify them easily.

Defining your Selectors in a CSS File will allow site wide modification from one file but do not dismiss the use of inline CSS within specific elements to localize and limit formatting for specific reasons.

Your CSS File should include General and Non Changing or Specific information about how you want your pages to render. You should not try to load it with every formatting attribute that you need to apply.

A secret may be setting up basic shells that you can apply quickly in your documents.

You may want a variety of font sizes try setting up a list of selectors in your css file that can be used across your site.

#font18px {font-size:18px}
#font18pxBlue {font-size:18px;color#2784b0}

then apply them as such

this is 18px blue font

CSS Lesson 5 – Fonts Setting Atributes

admin — Mon, 27 Apr 2009 01:35:23 +0000

Font Specifications

Font family

A font family is a group of fonts that resemble each other. When you are defining your selector to set the font family your text will be rendered in you can use Exact Names that refer to fonts that are installed on the enduser’s system (Ariel, Verdana) or you can define Generic names as a last resort.

Possible Generic Font Family names include:
cursive, fantasy, mono-space, serif and sans-serif.

When you are defining Generic families do not use quotes.

When you define a selector with more than one font you must use quotes to enclose Family names that include spaces and you should use capital letters where necessary.
Example:

BODY { font-family: "Times New Roman", Verdana, serif }

Font Style

The font style variations of normal, italic, or oblique can be defined Normal is the default style if no font style is set.

P { font-style: italic}

Font Variant

The font variant can be used to choose a variation of a font. In the example below the small-caps value is defined.

H3 { font-variant: small-caps }

Font Weight

The font weight refers to the boldness or lightness of a font. Keywords can be used to set the value or you can use a numeric set of values from 100 to 900 in increments of 100 as: 100, 200, 300, 400, 500, 600, 700, 800, 900 .

The keywords bolder and lighter are used to set values that are relative to the parent element’s font weight.

The keyword bold is equal to the numeric value 700.

An example would be:



this is normal

this is very bold

Text shadows

Allows you to define a shadow effect to your text.
Note: This Text Formatting feature does not work in IE4 or NS4.

This is some text

text-shadow has been deprecated in new CSS browsers.

Word Spacing

Word Spacing allows you to define the amount of space between words.
Note: This Text Formatting feature does not work in IE4 or NS4.

Values include: normal, length, auto

  H1 { word-spacing: 1em }

Letter Spacing

Letter Spacing allows you to define the amount of space between letters in each word.

Note: This Text Formatting feature does not work in NS4.

Values include: normal, length, auto

This is some text

Text Transform Case

Case allows you to change how a block of text will appear. This is an easy way to override the formatting of a block of text that has already been typed and placed in the document.

Values include: capitalize, uppercase, lowercase, none

The values of this property have the following meanings:

capitalize: first character of each word is uppercase
uppercase: all characters are uppercase
lowercase: all characters are lowercase
none: element ignores parent element value

This is some text

White Space

White space is used to define how a block of text will be controlled within an element. White space refers to the spaces between the words.

Note: This Text Formatting feature does not work in IE4 and has only partial support in NS4.

Values include: normal, pre, nowrap

In the example below the H1 element has been given the white-space value of pre or preformatted text. This means that additional spaces between words will be preserved as if the block was preformatted text.


 
  


This is     some text

Note

Proper spacing of characters and words will allow the reader to visually understand the content of your pages.

Too much space can be as bad as not enough and anyone who has had to enter a comment limit word on youtube or to submit a form understands that it is not only size, color and font choice but also how the characters are presented that allows you to read and understand the words quickly.

No one wants to struggle when they are reading a few pages of text so use these style attributes conservatively not creatively.

CSS Lesson 7 – Formatting Lists

admin — Tue, 28 Apr 2009 20:15:17 +0000

Lists

CSS Selectors can provide the Author extended control over how their Lists are formatted.

Properties can be applied to the markers that appear before the list items to provide order to the information.

In addition to the regular list styles that are available in HTML the author can also define their own marker item by using an image.

Other proposed CSS declaration values would control how the list item markers are applied and indented in relation to the line items.

The possible values have the following meanings:

disc: A disc (exact presentation is UA-dependent)
circle: A circle (exact presentation is UA-dependent)
square: A square (exact presentation is UA-dependent)
decimal: Decimal numbers, beginning with 0.
lower-roman: Lower case roman numerals (i, ii, iii, iv, v, etc.)
upper-roman: Upper case roman numerals (I, II, III, IV, V, etc.)
lower-alpha: Lower case ascii letters (a, b, c, … z)
upper-alpha: Upper case ascii letters (A, B, C, … Z)
none: No marker






 This is the first item.
 This is the second item.
 This is the third item.

list-style-image

When you would like to us an image to represent the bullet of your list items you can use the URL value you can also define a list-style-type to be used if the enduser has disabled the loading of images.
Works only with IE4

The following example sets the marker at the beginning of each list item to be the image “icon.jpg”.

list-style-position

CSS2 has also defined a selector declaration that would allow you to position the List marker either away from the Line Item or it could have the value compact that would make the Marker move to the position of the first character in the Line Item.
This is not implemented in either IE4 or NS4

Possible values include: inside, outside

NOTE

Lists are often used for Menu Systems in CMS or Blog Software like WordPress or Drupal.

There are a variety of ways of setting up your menus by taking advantage of list formatting and using a small amount of javascript.

Suckerfish is a great starting place for Menu Systems made with Li elements. The code is easy to setup and the CSS formatting is only about 20 lines of attribute setup.

CSS Lesson 8 – Formatting Tables

admin — Wed, 29 Apr 2009 16:50:25 +0000

Tables

The use of tables after divs were introduced to html will either be accepted or not.

The fact is tables have their place and that place should not be restricted to display of spreadsheet information or XML dumps.

On the other hand because many browsers display tables and their formatting differently you should check your work for cross browser compatibility.

Caution should be used when defining selectors that alter the proportions and layout of your tables. If selectors are used to set widths or row and column spanning there is the possibility that your documents could become unreadable by browsers that can not correctly parse the selectors.

Tables are often used by Authors to organize their page content into readable and visually appealing documents. Tables are defined by using a layered grid.

The

element being on the bottom defines: the overall width and height of the table and how the cells of the table will be separated with margins.

The element is then used to separate the table into a number of horizontal rows but can not contain the actual page content.

Finally the top layer the

element is used to define columns that are placed inside the rows to hold the actual information to be displayed.

Table Headers

are also used to provide comment lines between the row / column contents. They can not contain column elements and are considered row elements.

The

element can be used to contain a description of the table. Although the code is placed inside the element it is displayed outside the boundaries of the table border.

Because all of these elements are containers many formatting Declaration Values can be applied to them to define: width, color, border,… and styles can be inherited by their child elements to define: text color, size, and family and so on.

An example would be:

This is a caption
This is the header
This is the first row first column	second row second col	Row 1 Col3
This text should be red	Row2 col2	can you see this?

This is a caption
This is the header
This is the first row first column	second row second col	Row 1 Col3
This text should be red	Row2 col2	can you see the this?

With this in mind here are the declarations that may be used for your table elements.

column-span

Sets the number of Columns that a will be spanned by a column that is above two or more columns.

row-span

Sets the number rows a Cell will span.

width

Sets the width of the Cell Not implemented in all browsers.

border

The border Declaration can be used for shorthand to define the color, style, width of your border.
Example you define a border of a cell with the following selector:

TD.red {border: red thick}
The cell will be red and thick.
You can also use the following declarations to define these properties individually.

border-width

Sets the width of the border of the Cell.
Not implemented in all browsers.

border-color

Sets the color of the border.
Not implemented in all browsers.

border-style

Sets the type of line used for the border.
Not implemented in all browsers

Values that can be used:

blank, double, solid, ridge, groove, none, dashed, dotted

vertical-align

When you align contents in the sell you are shifting the baseline of the cells contents. The first Line of text or the bottom of the first image is used to set the baseline of a Table Cell. If the Cell is empty the bottom of the cell is considered the baseline.

Values include: baseline, top, bottom, middle
Not Supported in all browsers: text-top, text-bottom, sub, super

Alignment

Used to align text horizontally within a cell

caption-side

Used to position Table Captions
Not implemented in IE4 or NS4.

speak-header-cell

Used to tell Text to Speech Synthesizers how they should interpret and read the table.
Aural Styles are not implemented in most browsers.

Note
Formatting Tables with CSS is a very reasonable way to control your content’s layout but only if you double check your work in both IE and FireFox.

CSS – Applying Transparency To Your Backgrounds

admin — Tue, 05 May 2009 03:15:18 +0000

There are a variety of reasons that you may want to use Transparency in your designs and often you will find a png file set to transparent will meet your needs but you can also set transparency of your containers.

Unfortunately the CSS attribute of transparency is not cross browser compliant so you will need to add methods for IE and Firefox within the same selector.

Below you can see a range of transparency set on the background of a div that contains the number representing the transparency level of the div.
As you will notice this method is not perfect and unfortunately every thing within the container div will take on the transparency without the ability to override it locally on child containers.

To apply transparency you must include at least 2 property declarations.

filter:alpha(opacity=30); # this will cover IE
opacity: 0.3; # this will cover the rest

In other demonstrations we will cover the use of PNG image files for use as transparent backgrounds and also implement css transparency on images that have no transparency level set.

CSS transparency will work on any container with a background set and it will also work on images including JPEG images that do not allow transparency values.

When in doubt of your visitors browser level and ability always use conservative methods in your css declarations.

Never obscure your menus, links or other important features.

CSS HowTo – Using Image Backgrounds In Your Designs

admin — Tue, 05 May 2009 04:44:58 +0000

In this HowTo we will cover some of the methods of using CSS and images for your container backgrounds.

Almost any container can be styled with CSS this means you can apply images to your page backgrounds, Table and individual Table Cell Backgrounds, Divs and even your forms.

Most of the common declarations will apply to all elements.

Ok so lets start off easy and apply a leaf background to our page.
(the examples are representations and may not look exactly the same in all browsers.)

Applying The Image

ok so we have a leaf.png file we want to add to our body element by using css.

body {background-image: url(’/leaf.png’)}

and the result would look something like this

Limit Repeat to One Time

In our leaf example you can see that the image will repeat for the length and width of the page. We want just one image to show on the page so we can use no-repeat.

background-image:url(/leaf.png);

background-repeat:no-repeat”

Controlling the repeat direction

Often you will use special fade images that need to be applied only in one direction
Ok lets say we want to limit the repeat pattern in the x or y direction.

In this case we would control the repeat property.

background-repeat: repeat-x
background-repeat: repeat-y

Positioning the Background Image

Now something a little more tricky lets say we want to use our leaf but we need it placed in a specific place on the container or page.

We can set the no-repeat , fixed and its position in pixels.
background-repeat: no-repeat;
background-attachment:fixed;
background-position: 50px 75px;

And it should look something like this:

Setting The Transparency of the Background Image

Now this is a tricky thing to do but it can be applied on containers.

If you notice the image on the right is lighter because the white background is showing through. This will work with any image but browser compatibility can be an issue. Use this technique sparingly.

opacity: 0.4;
filter:alpha(opacity=40)

Final Note

CSS is a great tool and it should be used along with other methods to create your final design.

When possible you should always revert and rely on the simplest ways to create your projects.

When you visit many large high volume sites you may notice that they do make use of larger images to show content instead of relying on formatting that could change across browsers or because of different settings within the same browser.

You should never use css to fix things on the fly or add special tricks…. you should use it to contribute to your design because it is the best way to do something.

NPSites.com » CSS

CSS Lesson 1 – Introduction To CSS For Webdesign

Introduction to CSS

CSS Basics

CSS Lesson 2 – Understanding The Cascading Part Of CSS Cascading Style Sheets

What is Cascading?

What about Enduser Browser CSS Files

Cascading and the Document Tree

Final Note

CSS Lesson 3 – Linking CSS Files To Your Documents

Style Sheets in External Files

Link

Additional Declarations include:

Media

Title

Meta Tag

Style Sheet use by the Enduser

CSS Lesson 4 – Using Selectors To Define CSS Styles

Selectors

Type Selectors

elements in your document you would use the following. H1 {color: 000fff} The syntax is: Element {declaration: value }

Multiple Declarations

Grouping Elements

Parent Child Elements

Sequential Selectors

ID Elements

text

Class Elements

text

Pseudo-Classes

Final Note

CSS Lesson 5 – Fonts Setting Atributes

Font Specifications

Font family

Font Style

Font Variant

Font Weight

Font Size

Text shadows

Word Spacing

Letter Spacing

Text Transform Case

White Space

This is some text

Note

CSS Lesson 7 – Formatting Lists

Lists

list-style-image

list-style-position

NOTE

CSS Lesson 8 – Formatting Tables

Tables

column-span

row-span

width

border

border-width

border-color

border-style

vertical-align

Alignment

caption-side

speak-header-cell

CSS – Applying Transparency To Your Backgrounds

CSS HowTo – Using Image Backgrounds In Your Designs

Applying The Image

Limit Repeat to One Time

Controlling the repeat direction

Positioning the Background Image

Setting The Transparency of the Background Image

Final Note

elements in your document you would use the following.

The syntax is:
Element {declaration: value }