CSS Random Notes - Neils Resource WebCSS Random Notes - Neils Resource WebMisc. CSS Notes - Web Dev. - Neils Resource Web

Contract Menu | Expand Menu

Summary of Content
A collection of miscellaneous notes regarding CSS. Using CSS pages inside and outside the html document, CSS controlled drop shadows.
A double mouse click anywhere on the page (except when over hyperlinks) will take you back to the top.

Adding inline comments to your CSS file
Here to remind me, as I constantly forget the format.
Add /* before */ to terminate.

Using CSS Externally to your Web Page
Having CSS commands on a separate page is best suited for a multiple page site owner. These pages are called "linked" or external CSS. Multiple pages are able to utilize the same commands in a single area. For time, it saves from typing in all the commands on each individual page. For space, it takes less space since more than one page is using the same page reference. For editing, one change on the master CSS page will affect all pages connected to it, instantly.

CSS pages have a file extension of .css which is allowed on most, if not all, main homepage servers. Create and save the document in text-only format then give the document the .css extension.

An external page is usually used for a "general" style layout. Setting the background colour or image, setting the text colours, etc..

To link to the external style sheet, a LINK must be placed in the HEAD area of the page code. That is anywhere after the <HEAD> tag and before the </HEAD> tag.

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

LINK  There is a separate page of command tags linked to use on this page.
REL The linked page is a STYLESHEET.
TYPE The linked page is text format containing CSS commands.
HREF The filename (and location or sub-directories if necessary) of the linked page.

External CSS pages do not use any foundation tags. Just the actual CSS commands are listed.

Using CSS within the Web Page
The HEAD area, where the TITLE and META tags are found, is also used to store CSS commands. These are called embedded CSS. Any embedded CSS command will over-ride an external CSS command of the same tag. Embedded commands are more specific to the page.

Embedded CSS codes are placed within the HEAD area of the page code. That is anywhere after the <HEAD> tag and before the </HEAD> tag. 

<style type="text/css">
... style sheet codes here ...

STYLE Specifies a CSS area. Make sure you include the style type even though it works without.
REL Specifies the CSS commands relate to text formatting.
comments out the CSS commands. This is a trick used to "hide" the codes from older browsers. If the code is not hidden, older browsers will print out the code onto the web page.

CSS Drop Shadow (see also Alpha Filter Page)
Using the filter:shadow(color, strength, direction) statement contained within a 'div' statement.
direction The direction of the blur, going clockwise, rounded to 45-degree increments. The default value is 270 (left):
  • 0 = top
  • 45 = top right
  • 90 = right
  • 135 = bottom right
  • 180 = bottom
  • 225 = bottom left
  • 270 = left
  • 315 = top left
strength The number of pixels the blur will extend. The default is 5 pixels.

The code below refers to the first example

<div style="width:250px;padding:10px;filter:shadow(color:gray, strength:10, direction:135);"><div style="width:250px;text-align:left;padding:10px;background-color:gold;border:1px
solid navy;font-size:12px;"> A box with the shadow applied to
the bottom and right of the container.</div> </div>
A box with the shadow applied to the bottom and right of the container.
A box with the shadow applied to the bottom and left of the container.
strength:10, direction:135... Leave out the strength & direction parameters for the defaults = strength of 5 and a direction of 270 (left).
A box with the shadow applied to the top and right of the container. Increased strength.
A box with the shadow applied to the top and left of the container. Reduced strength.
strength:30, direction:45... strength:5, direction:315...
wwwThis Site

Last Update: 05/03/2008 - CSS Random Notes - Web Design Section Summary - Neils Resource Web

html 4.01 strict css 2.1 javascript 1.2