Style

Be in style with CSS, but CSS really means more than just style. CSS can be divided into at least two parts: appearance and positioning. A third purpose of CSS, including layout, paddings, margins, and borders, could fit into both appearance and positioning.

Designing CSS takes vision for the final result. It takes patience to get a style sheet right, because you have to think of each component before you get to see how it all fits together. There is no true what-you-see-is-what-you-get interface for CSS. You have to fit your ideas together with your mind and creativity.

The stylesheets used by HTML can be written in a harem-scarem way by use of the aptly-named but inappropriately used "style" attribute.

So the easiest way to get started in CSS is just to stop using font tags and similar things, and to insert fonts and text formatting instructions with the style attribute. If you want to change the style of something within a paragraph, you'll have to add span tags around it.

The trouble is knowing which names control the formatting, because they are not the same as what you've learned before.

Font actually means several characteristics of typography.

<span style="font-family: georgia">Georgia on my mind</span>

<span style="font-size: larger; font-family: georgia">Georgia on my mind</span>

<span style="font-style: oblique; font-family: georgia">Georgia on my mind</span>

<span style="font-variant: small-caps; font-family: georgia">Georgia on my mind</span>

<span style="font-weight: bold; font-family: georgia">Georgia on my mind</span>

Stylesheets (a stupid name for a rather amiable technology) themselves have nothing and everything to do with HTML.

They greatly help you at the end, when you're ready to to decide the final look of your pages. At this point, you don't need to individually style all of your elements. You write the style sheet with what you have decided to do, and then you don't have to make complicated pages anymore. All of your work becomes more simple because you don't have to use font tags and attributes anymore.

The trouble is that you also can't use most HTML software, because they can only use font tags. However, style sheets are better, and it is the software that is worse.

Stylesheets are great assets once you have made them. However, you should be careful that you don't use them for too many things, because then they will start making life harder.

I generally find use them for:

• colors
• borders
• whatever else

(although the idea of letting the computer do the work sounds good to me)

One thing that you will start to learn quickly is that less is more. Simpler websites are actually easier to manage, and very easy to make into a fancy website with a stylesheet. To take a website that is already fancy and use stylesheets with it is very hard. This is a loss, because many websites ruined themselves by being too fancy and using too many font tags to be converted to CSS.

It seems funny that they would even create a style attribute in HTML, "seeing as how" (as a colloquial hic-hick might say) it would be quite nonsensical to stylize the style itself!

So I prefer to use <link rel="stylesheet" href="stylefyle.css" ;-) /> instead. I don't like to specify the type="blah" attribute, and especially not the media="blister-my-bones" morosion-of-an-invention.

I like to use a /root.css file for my sites, which follows my inheritance rules (from estilo de myersdaily, myersdaily style), and in it I include media-specific instructions, e.g., @import url(style/summer.css) screen;, and possibly a few very basic presentation rules.

Note another thing about using stylesheets: The development cycle. While you are developing, you will start to realize that always the only practical way to work is to leave all stylesheets empty, to be filled in later. This means that all of your work is ugly, and it is hard to please people with your work. What an experienced person will do is to have a few quick style sheets to apply, and then use them to show his work with, while it is still unfinished. Then the style sheet will be customized to suit people's tastes.

The final difficulty to point out is that web developers themselves who don't use stylesheets, usually are the ones who don't update their browsers, even though they should always be the first ones to be trying new browsers.

When someone who uses stylesheets tries to work with someone who does not, the person who does not use stylesheets usually will look down on stylesheets because they think they are not compatible. However, this is only because the developer is fooling themselves. More than 90% of web surfers use browsers that support most of the useful features of style sheets.

This means that when someone does not use style sheets, they will generally never realize the importance of using them. Then they will fall behind other developers, and have much harder times keeping their websites maintained.

6-3-03. You'll notice this page may look a little different. That is because it imports a W3C recommended stylesheet for HTML 4.0, which is somewhat different from most.

There are many fancy things to do with stylesheets. You can try making drop caps something like this.

p:first-letter { font-size: 200%; font-style: italic;
                    font-weight: bold; float: left; margin-right: 0.1em }
p:first-line { text-transform: uppercase }

My sister said that to me about one of my friends after I proposed that if I said something mean to her that her "amiability status" would decrease as she responded in righteous wrath. (MyersDaily, Friday, November 1, 2002)

The CSS box model includes the ideas of margins, paddings, and borders. These pretty much apply to the kinds of items which are called "block" elements. Inline elements such as links do not have these characteristics in the same sense. I'll use this.

div { background: green;
border: solid 2px black; margin: 2em }
p { background: white; color: gray;
margin: 0.5em 1em 1.5em 2em; padding: 2em 1.5em 1em 0.5em;
border: solid 2px purple }

Naturally, you should be familiar with the picture of inline alignment (text is called inline because it is automatically wrapped, after which each "line" becomes a box in that line). Left-aligned is the default, so I have already shown that.

p { text-align: center }

(By the way, p is a selector, and stands for selection the paragraph which is "p" in HTML. In the actual HTML source, since there are several paragraphs on this page, I also add the identifier of the particular paragraph I want, or the class if I wish to group several together.)

p { text-align: right }

p { text-align: justify }