| 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.
|
| 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 | 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.
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... |
Hyperlink titles have been abbreviated, (right click on the link and select properties for the full URL)
Double mouse click anywhere on the page to take you back to the top (except when over the links)
Last Update: 05/03/2008 - CSS Random Notes - Web Design Section Summary - Neils Resource Web
