Introduction to Cascading Style Sheets (Page 1) - Tutorials and Guides

1 Topic by seeme101 2009-04-03 10:05:03

seeme101
Professional member
Offline

From: New York, New York
Registered: 2007-11-11
Posts: 780

Topic: Introduction to Cascading Style Sheets

Introduction to Cascading Style Sheets

Cascading Style Sheets or .css
The css files tell the browser how to display information. Be it centered, bold, underlined or whatever.
Like our mail merge example from the Introduction to Templates, the .css tell the browser how and where to display the information.

site.css
This file contains the layout wrapper information for your template. This includes the header, content, and footer. It also includes main navigation bar styles.

sidebar.css
This file contains sidebar styles (if your template has a sidebar).

chat.css
This file contains styles for the chat window (nothing else).

forms.css
This file contains styles for the form fields and the actual forms. This includes text boxes, text areas, drop downs, etc.

homepage.css
This file contains styles for displaying elements on the homepage (nothing else).

content.css
Of the eight css files, content.css is the largest. It contains all content styles of your site. To include colors, fonts, backgrounds, and the layout of the content (not the site).
Near the bottom of this file you will find overrides for some of the custom pages (such as homepage). All the .css files are fully commented so if you're familiar with CSS, you should find your way around fairly easy. Even if you're not familiar with css, the comments tell you what the styles are for.

The Firefox browser has a Web Developer add-on that will help you find your style sheets and will tell you what the elements do.

In fact, if you edit all of the above css files properly, you will not even need to edit a single template file to change the look of your site.

Last edited by seeme101 (2009-04-26 12:52:48)

Not only am I a Staff member, I'm also a Client

seeme101's Website

2 Reply by slinky 2009-04-03 10:35:15

slinky
Professional member
Offline

Registered: 2007-07-22
Posts: 461

Re: Introduction to Cascading Style Sheets

One other item - if you don't know what they are, it's simple. Every time your page loads, it uses a header (header.tpl) for the top of your page, a footer (footer.tpl), and some template in the middle. The css file is just a list of formatting for your document that is referenced and loaded into a page in the header.tpl, which is read first so the web server knows how to display all the fonts and layouts in your main template page.

3 Reply by db3204 2009-04-03 17:19:39

db3204
Power member
Online

Registered: 2007-09-29
Posts: 2,911

Re: Introduction to Cascading Style Sheets

Good job guys. May I add my two cents. I have had several custom jobs done by vlad. In many cases vlad or mark used inline css for the custom jobs so only a specific tag or html code was effected.

Basically you can create css three ways:

1. external css, as seemee talked about above, usually effects the whole site. As slinky stated in his post, a LINK to the external css page or pages is placed in header.tpl between the head tags.

2. embedded (also called internal) css is put in the header of a page and only effects that page. Don't confuse this with external css. With external css a link or links is placed in the header to point to the external css pages while with embedded css, the actual css code is placed in the header.

3. inline css is put in the tag and only effects that tag.

It helps to understand the differences if you want to do minor changes or only want to specifically effect certain html code (i.e a certain table, but not all tables for the site). For example, I have seen many ask how to change the format for a certain link on their site. They may make the change to the external css not knowing that the css code they change may also effect other tags. If you only want a certain tag to be effected use inline css.

For example: this inline css removes the underline from this tag only: <a href="http://www.mysite.com" style="text-decoration: none;">

If you want to effect the same type of tags for the whole site than use external css.

CSS types have priorities: inline css overrides external and embed css. Knowing that inline overrides external css can make your coding more selective. For example, if there is html code effected by the external css that you want to change for that tag only, you can override the external css by using inline css on that tag. Note that embed css is very rarely used these days. Most use either external or inline.

Sitepoint has a great online css reference guide that may be helpful: http://reference.sitepoint.com/css

Another good online guide is at: http://webdevelopersfieldguide.com/

Last edited by db3204 (2009-04-03 18:41:45)

Asian Dating and Asian Girls
Filipina Lady and Asian Dating
Asian Wife & Asian Dating
FilipinaEyes on Facebook

db3204's Website