css - a brief view

back index
in-page: css tools box end

Cascading Style Sheets (CSS)

2015.12.09: Thanks Mike, who helped corrected a W3C Schools link below, for another CSS3 reference site - http://wiht.link/css3_information - looks interesting...

2010.03.18: Found this marvellous W3C school site http://www.w3schools.com/cssref/, but if that page is 'missing', then I have made a brief local copy, unfortunately without the very important 'detail' links, for it is only in the detail that the possible values for each are given.

And Dynamic Drive provides some great simple templates :-
3 columns: - fixed-fluid-fixed | fluid-fluid-fixed | fluid-fluid-fluid | fixed-fixed-fixed
2 columns: - fixed-fixed | fixed-fluid, and a page combining several.

My 'gestalt' of understanding CSS, especially with regard to the above column arrangements, came when I fully saw the word 'cascading', and took in its full meaning ;=)) That is, for example, the idea of '3 columns', is NOT that there are 3 columns, but that they are in fact 3 separate layers, 'cascading' one on the other!

The left 'layer' restricts itself to only defining a left 'block'. The center 'layer' overlays that left, but has margins on the left and right to avoid those areas, and the right 'layer' overlays both the left and center, and has a left 'margin' wide enough to avoid overwriting anything on the left or in the center.

When the width of the left and center is unknown, that is 'fluid', then the right can use a negative to set its left margin, like if its width is say 15%, then its margin left is - margin-left : -15%;

And then the 'footer' is forced to the bottom, and covers the full width by its clear: left; directive. This says this 'layer' can have no other 'layers', or 'cascades' to its left. Simple, huh?

Others are - http://www.w3.org/Style/CSS/ ... ;=)) as an ongoing reference ...
http://www.w3.org/TR/REC-CSS1http://www.w3.org/pub/WWW/TR/REC-CSS1 and
http://www.w3.org/TR/REC-CSS2/visuren.html#positioning-scheme or
http://www.htmlhelp.com/reference/css/

There are over 50 'style' items - see http://www.w3.org/TR/REC-CSS1#css1-properties for more details...

top

Q: CSS - Do you have to assemble all the format manually or could you generate it with a tool?

A: The answer is BOTH ;=))

1. When I see a 'style' or 'effect' on a particular web page that I like, I MANUALLY get, either their 'style' statement from the source, or download the CSS file they have included in the SOURCE, sometimes several ... then I will manually move, (copy and paste) the 'style' I like to one of my web pages, for testing and viewing ... this is ALL MANUAL ... just using a simple TEXT editor ... since it is very easy to quickly test your work in a browser ...

2. I can use my web tools, Microsoft FrontPage, Word, MS Visual Studio Interdev (v.6), and more recently MS Visual Web Developer 2008 Express Edition (free) ... they have a GRAPHIC USER INTERFACE, but to set up a NEW style there is still a LOT OF MANUAL CLICK STEPS ... each one of the 'style' items - font colour, font type, font size, layout, borders, background, spacing, etc ... requires a few clicks of the mouse ... so there are certainly a LOT of MANUAL steps ... ;=))

But you learn, using these TOOLS, that each thing you do turns out to just add a text line ... like when you choose a font colour, like red, the tools adds a line, like -
.reddish { COLOR : red }
or, using the RGB values
.reddish { COLOR : rgb(255,0,0) }
or, using hex values
.reddish { COLOR : #ff0000 }
and SOMETIMES it is faster, and EASIER to MANUALLY add things...

The MS Visual Web Developer is a great aid with their so called 'IntelliSense' ;=)) As you add an item, little pop-up tooltip widows give you all the available 'option' for the element, sometimes to the point of being obtrusive. But this 'IntelliSense' is most certainly a GREAT aid, removing much of the 'manual' work.

Of course, if you want to apply a STYLE to all pages in your web, then you naturally use the TEMPLATE approach ... that is all your chosen styles are placed in a separate file ... and that file is INCLUDED in the 'HEAD' part of the HTML document ...

My Easter page INCLUDES a page1.css ... see the line -
<LINK REL=StyleSheet HREF="page1.css" TYPE="text/css">
in the source ...

Or you can quickly generate a one-off effect, just in one page, like -

<html>
<head>
<title>One off style</title>
<style>
BODY { MARGIN: 2px; BACKGROUND-COLOR: aqua }
h1 { TEXT-ALIGN: center; COLOR : blue }
p.reddish { color: red }
</style>
<body>
<h1>One off style</h1>
<p class="reddish">This will show in RED ...
</p>
</body>
</html>

This will display (in a browser) a page with an AQUA colour background, a CENTRED, BLUE heading, with the paragraph in RED ... ;=)) Note, HTML uses the American English spelling ;=(( COLOR, not COLOUR ...)

Web authoring TOOLS are improving all the time ... all have some form of CSS implemented ... most, like FrontPage use a three-view of a page - Normal, HTML and Preview -


Normal Normal View, HTML HTML View, and Preview is using the browser of your choice ...

The later MS Visual Web Developer calls these view [ Design ] and [ Source ], and running the page, F5 does MORE than just give you a 'preview'. You can actually 'trace' through javascript, for example. And if you take the trouble of installing either MS Internet Information Services (IIS) for Windows?? Server, if your version of Windows contains it, then locally create web pages can be viewed using http://localhost...

The page - http://www.w3.org/Style/CSS/#browsers - contains a great chronological list in the 'CSS Authoring Tools' section ... of course the 'big' names, like Adobe and Macromedia feature, as well as 20-30 'smaller' enterprises ... I noted that the MAC OS X has not been left out ;=)) This site, http://www.goodpage.info/ offers a tool ... with a 'feature-list' which is very common to ALL such tools ...

Features
Code/Structure/Browser view of HTML document
Multiple views of the document at the same time
WYSIWYG selection and navigation between document views (graphical display of current selection in other view)
WYSIWYG editing of Unicode text in Structure view,
Focusing on a single element (e.g. item in a large table),
CSS editing and style management, screenshots
Site management using FTP, SFTP or any mounted WebDAV or other folder (e.g. .Mac iDisk),
Display of differences between local and remote site,
Selective or complete updating of remote site with changed files,
HTML encoding change with automatic conversion of HTML document contents,
Support for all HTML and XHTML versions,
Integrated W3C HTML and CSS validation,
Testing of server-side scripts (e.g. PHP) and HTML forms using live web server,
Single-click setup of local test server on your computer,
Browser view has the same display engine as Safari, including JavaScript execution,
and many more...

As stated, this is like a TYPICAL-FEATURE-LIST ... note the 'Integrated W3C HTML and CSS validation' ... bringing us back to the W3C specification ...

Have FUN adding STYLE to your web page ...

top back index

A short list of styles ... consult the full reference for details ...
# Font properties Font matching
'font-family' 'font-style' 'font-variant' 'font-weight' 'font-size'
'font'
# Color and background properties
'color' 'background-color' 'background-image' 'background-repeat'
'background-attachment' 'background-position' 'background'
# Text properties
'word-spacing' 'letter-spacing' 'text-decoration' 'vertical-align'
'text-transform' 'text-align' 'text-indent' 'line-height'
# Box properties
'margin-top' 'margin-right' 'margin-bottom' 'margin-left'
'margin' 'padding-top' 'padding-right' 'padding-bottom'
'padding-left' 'padding' 'border-top-width' 'border-right-width'
'border-bottom-width' 'border-left-width' 'border-width'
'border-color' 'border-style' 'border-top' 'border-right'
'border-bottom' 'border-left' 'border' 'width' 'height'
'float' 'clear'
# Classification properties
'display' 'white-space' 'list-style-type' 'list-style-image'
'list-style-position' 'list-style'

Box Dimensions:

view of the 'box' used by css

Here is the 'style' of a box using say the 'p' (paragraph) tag -

.box {
/* top, right, bottom, left */
padding: 0px 10px 0px 10px; margin: 1px 10px 1px 10px; background: #f0f8ff; border-width: 1px;
border-style: solid solid solid solid; border-color: #ff0000; width: 90%; font-family: "Courier New";
}

Using above 'box' as the 'class' of this paragraph. That is <p class="box">text...</p> to get this 'boxed' effect.

There is no doubt, CSS is great, and powerful stuff ;=)) Get to know it!

top back index

checked by tidy  Valid HTML 4.01 Transitional