PDA

View Full Version : Beware! CSS newbie at work!



Spider
12-29-2010, 01:03 PM
Okay. I am learning css. First question --
When setting up the style sheet, the instructions are so--

#article {

width: 1000px;

margin: auto 0;

padding: 15px;

background: #ffffff;

border: 3px solid #000000;}

....Is that so the reader can see it better or must it be vertical and spaced for the browser to read? I am inclined to want to write it so--

#article {width: 1000px; margin: auto 0; padding: 15px; background: #ffffff; border: 3px solid #000000;}


...Is there any reason I cannot or should not do that?


Second question: on the style sheet I am including information to help me remember the various attributes, like this--

<!--In the article ID, width is set to X pixels and the margins to auto 0 so the browser will automatically center the article. Padding moves the text away from the edge of the box by X pixels. The background is set to color and there is a border around the box which is another color, a solid line, 3 pixels in width. -->

Note the html remarks parenthesis <!-- xcvxcvxvxcv -->

Can I do that on a stylesheet?

Harold Mansfield
12-29-2010, 02:10 PM
This:


#article {

width: 1000px;

margin: auto 0;

padding: 15px;

background: #ffffff;

border: 3px solid #000000;}

and this:

#article {width: 1000px; margin: auto 0; padding: 15px; background: #ffffff; border: 3px solid #000000;}
..are the same thing. However many people write it like this:


#article
{
width: 1000px;
margin: auto 0;
padding: 15px;
background: #ffffff;
border: 3px solid #000000;
}
If your intention is to make it easy for someone else to follow your CSS file later on, then just try and keep it as organized as possible.
Other than that, as long as it written correctly , the browser will read it whether it's in nice neat columns, or all bunched up together.
I have seen some really jumbled CSS files that look like nightmares, but they work just the same.
I don't see any reason why you can't include notes in your style sheet. People do it all of the time.

Spider
12-29-2010, 02:34 PM
Thanks. Pressing on.

mattbeck
12-29-2010, 05:12 PM
One note: You are using html comments in your stylesheet? If so...that's not right. You should use /* comment */ instead of <!-- comment -->

Spider
12-29-2010, 05:14 PM
Okay - thanks.

thewebwriter
12-29-2010, 05:21 PM
The layout in your first instance is only for your ease of readability. Depending on how often you will be editing your CSS determines how you want to view it.
I tend to use this method when writing the style sheet and then converting it to shorthand when it's completed.
The reason for using shorthand is because browsers read white space and carriage returns. It doesn't matter too much unless you have a large file. Nanoseconds are all important when loading a page.Shorthand removes a lot of unnecessary characters.

Incidentally, you are already using shorthand. Longhand would be

{
border-width: 3px;
border-style: solid;
border-color: #000000;
}

If your colors use same characters in the rgb pairs you can further reduce it. #000 is the same as #000000 but you cannot reduce #c0c0c0

When commenting in CSS use /* at the beginning and end with */
It is acceptable, indeed encouraged, to use comments in your files.

A good practice is to comment at specific stages throughout the file. Comments are not read by browsers and do no affect load time.

When you write your HTML template, you will learn to use a particular layout for instance:
body, wrapper, header, column1, column2, column3, footer as the primary divs.

Lay your CSS out the same way and comment each part. For instance:

/* header div includes logo, background images and horizontal navigation */

You'll be surprised how much it will help you understand both HTML and CSS syntax and their interaction.

A good place to learn about the various syntax is W3Schools Online Web Tutorials (http://www.w3schools.com)

Seems like you're doing ok. Good luck.

Spider
12-29-2010, 05:48 PM
That makes sense - thanks. And leads to question #3 --

For the <body> style I am using

body {background:#ffccbb; color:#0000aa; margin:0px; padding:10px; font-family:verdana; font-size:14px;}

How can I shorthand the font commands. I have tried condensing them but find I must use the full -- font-family:xxxxx; font-size:Xpx; color:#xxxxxxx; -- Can the font commands not be shorthanded?

thewebwriter
12-29-2010, 06:43 PM
body {background:#fcb; color:#00a; margin:0px; padding:10px; font: 14px Verdana, Arial, Helvetica, sans-serif;}

You are using font Verdana as your primary font but you also need to provide alternatives in case the reader does not have a particular font installed, so I added Arial and Helvetica. if all else fails use any sans serif font.

I also shortened the rgb pairs in the colors.

billbenson
12-29-2010, 08:32 PM
Another thing to be aware of. A space is one character. A tab is one character. If you are really trying to minimize the size of style sheets, use a tab for indenting instead of several spaces.

Personally, I think you should concentrate on what can be done with css before you really start worrying about this level of optimization. The long hand organized statements will be easier to understand and alter. Play with things like positioning, floats, and anything else that interests you that you can dig up. When you get a good feel for that, start optimizing. It's really unlikely that your style sheet is going to get very big initially. You can also break it into different style sheets to keep the size down using only the ones that apply to the page. You can load multiple style sheets for each page which is also one way of optimizing.

Spider
12-29-2010, 09:14 PM
Ah-ha! I tried using font:.... but had things in the wrong order. It doesn't work if the size is placed at the end, the size must come first -- font:14px Verdana.... etc. But color must remain separate, eh?

Bill, I always kept my html code very tight, so it's not going to be difficult for me to continue that with css. And I do like a fast-loading page - I am a very impatient surfer. One of the reasons I have been reluctant to use css is that I have found load-times for webpages to be getting slower even while internet speed, connection speed and computer speeds have been getting faster.

billbenson
12-29-2010, 11:16 PM
Remember Spider a style sheet is cashed after first opened so if the same stylesheet is used throughout the site it is never downloaded again. As an example, the 700 plus line default style sheet for wordpress is only a 10Kb file and things are well commented and laid out for readability more than size optimization. The style sheet is unlikely to have an impact on load time. The fact that you are now moving toward or using an external style sheet will improve your load time over the way you were doing it though. I'm not suggesting that there is anything wrong with making your code as compact as possible, I'm just trying to keep things in perspective.

Harold Mansfield
12-30-2010, 10:23 AM
I have found that the main culprit of slow load times are:

Poor coding: This is not as big a factor as it used to be because of the number of people that use publishing software like Joomla, Wordpress, Drupal, and other CMS's. (and the use of more professionals). Plus the amount of free resources out there for do it yourself'ers.

Images: Large, uncompressed images really slow things down. Even a large amount of small images (uncompressed) .

Additional scripts and functions: Some functions are heavy to load. Specifically those that aren't coded into the site, but come from another source...Facebook and Twitter widgets, and imported RSS feeds come to mind.

Hosting: Your site is only as fast as your hosting account is good.

Pop ups, Pop unders, and Advertising scripts: Examiner is a good example of a site that just has waaayyy too many ads loading. You need a T-1 connection just to view the content on the site. And when you are done, there's still 2 or 3 more windows to close out. I write for them, but I am really disappointed.

thewebwriter
12-30-2010, 11:00 AM
WOW! I just visited Examiner.com/Dallas and it took 14.59 seconds to pull 21 requests. That's BAD...

Harold Mansfield
12-30-2010, 11:21 AM
WOW! I just visited Examiner.com/Dallas and it took 14.59 seconds to pull 21 requests. That's BAD...

Yeah. I know. I've never seen so many scripts loading on a website. It has to be some kind of web record.

cbscreative
12-30-2010, 07:14 PM
Ah-ha! I tried using font:.... but had things in the wrong order. It doesn't work if the size is placed at the end, the size must come first -- font:14px Verdana.... etc. But color must remain separate, eh?

Bill, I always kept my html code very tight, so it's not going to be difficult for me to continue that with css. And I do like a fast-loading page - I am a very impatient surfer. One of the reasons I have been reluctant to use css is that I have found load-times for webpages to be getting slower even while internet speed, connection speed and computer speeds have been getting faster.

Since this is for your body statement, I would avoid using a font size. It's better to declare your font and then size it separately. For example:



body {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
}

h1 {
font-size: 24px; /*Example of comment. I prefer to use px font sizes rather than pt*/
margin: 0; /*I put this here to illustrate a nice technique to get more consistent formatting*/
}

/*One of the things you'll find in browsers is they treat text differently. I used a margin setting in this example because without it, IE will add space above while Firefox won't. This can cause issues if your body headings start below a header graphic. In IE, there will be a nice space, while FF can butt right up to the banner with little or no space. If you set margins and padding, your layout will appear closer to being the same in different browsers. In the h2 below, I illustrated how you can set all your margins at once. When using this technique, the first number is the top, then it goes around clockwise (3, 6, and 9 o'clock). I used 20px for the bottom to demonstrate a way to make sure there are 20 px between the bottom and next element. As long as your next element has 0 for top margin, then it will be only 20 px. It's a great way to control text spacing.*/

h2 {
font-size: 18px; /*I could go down the list with h3, h4, etc, but this makes the point*/
margin: 0 0 20px 0;
}

p, li, blockquote { /*This illustrates how you can declare more than one element using the comma and space*/
font-size: 13px;
}


The points made above about using the vertical format for "best practices" and readability are good. The examples above use good formatting, but don't mention why the curly brackets are placed on separate lines. Coding standards use this format for easily identifying that all statements are properly closed.

There was also a good point made about making sure to include the cascading font list in case the user's computer doesn't have the primary font. In the example above, Verdana will be used, but if it doesn't exist on the user's computer, it will look for Arial. If that doesn't exist (like on a Mac), it will use Helvetica which is the Mac equivalent. And like the webwriter said, the "sans-serif" is a catch all to substitute a system font when all else fails.

billbenson
12-30-2010, 09:33 PM
Steve, I've always read that it is best to set the base font size in the body tag and then use em for the rest. That way you have control of the documents base font, not your browser and it doesn't need to be included in each tag if they use that font size?

cbscreative
12-30-2010, 10:45 PM
Steve, I've always read that it is best to set the base font size in the body tag and then use em for the rest. That way you have control of the documents base font, not your browser and it doesn't need to be included in each tag if they use that font size?

Yeah, I didn't mention em, but that's another way of doing it. It also has the result of being more "flexible" to give the browser more individualized control since em is not a "fixed" size. That's a mixed bag for sure since a good case can be made for either method. Sometimes, I miss the rigidness and rules of print where you can control the finest details if you choose to.