Basic CSS Tutorial

December 9th, 2008

CSS, or Cascading Styles Sheets, is a way to style HTML. While the HTML is the content, the cascading style sheet is the presentation of it.
With CSS you are able to add new looks to your old HTML, restyle a whole website with a few changes to the CSS code, use the style you crate on any webpage.

A style sheet is made up of style rules that tell a browser how to represent a document. There are few ways to link these rules to your HTML documents. The simplest method is to use HTML’s STYLE element. This is the element that contains the style rules for the page. It is placed in the document HEAD.

Note: the STYLE element is a good method of experimenting with style sheets, though it has disadvantages that you should consider before using this method in practice.

Each rule is made up of a selector (an HTML element such as BODY, EM, or P) and the style that is to be applied to the selector.

Style rules are formed as follows:

selector { property: value }

Multiple style declarations are separated by a semicolon:

selector { property1: value1; property2: value2 }

The following code segment defines the color and font-size properties for H1 and H2 elements:

<HEAD>
<TITLE>CSS Example</TITLE>
<STYLE TYPE=”text/css”>
H1 { font-size: x-large; color: red }
H2 { font-size: large; color: blue }
</STYLE>
</HEAD>

These style sheet tells a browser to show level-one headings in an extra-large, red font, and level-two headings in a large, blue font. Read the rest of this entry »

Tags: ,
Posted in General Talk, How To | 2 Comments »

10 Most Common CSS Mistakes

December 3rd, 2008

Working with CSS is sometimes tricky. As great as this language is, as easy it is to use it incorrectly. Below are 10 most common mistakes web developers make working with CSS. These mistakes are well-known but still many of web developers walk twice (or even thrice) into the same water.

1. Neglecting Browser Compatibility
No matter what browser your website visitor is using the layout has to look the same. There are differences in the way Firefox renders the page and the way Internet Explorer does the task.
There is a number of sure methods to indemnify your layouts for different browser rendering. There are online tools that make screenshots of what your website looks like in different browsers and platforms, so you can be sure nothing looks wrong in a browser.

2. Ignoring Smaller Browser Resolutions
Not all your website visitors have large computer monitors. There is a big difference in the way your design looks in a 800×600 resolution  opposed to a 1024×768 resolution. Take that into consideration when developing a website and all your visitors will be happy.

3. Not Using Frameworks
Why loosing time to develop a CSS layout from the ground up when there are tonns of ready-to-use CSS templates that have cross-browser compatibility? They are created for you to make your life easier and your work faster.

4. Not Utilizing Generic Classes
Web developers often name CSS classes something different each time they develope a website. Isn’t it easier to make a simple CSS class that can be reused repetedly throughout your design? This will assure that your site design remains constant throughout the alterations of a design.

Here are the classes you might use:
1.  .right{float:right}
2.  .clear{clear:both}
3.  .left{float:left}

5. Forgeting to Validate the HTML
Validating HTML can affect your CSS. First of all, CSS can’t be validated until the HTML is validated. Secondly, the problems we think are caused by CSS can actually be caused by awry HTML. So make sure your HTML is valid.

6. Invalid CSS
If your CSS is valid you are much likely to have no problems with breaking CSS and its compatibility across browsers. Learn to validate the CSS.

7.  Using Gigantic Background Images
Using a huge backround image you make your visitor wait longer for it to load and it means you are using unnecessary bandwidth. It’s better to use repeating images or solid colors in the background.

8. Overusing CSS
It is sometimes much easier and faster to use different technologies for particular tasks. For instance, use a table to organize data than making complicated CSS-based layout with floating DIV’s.

9. Employing Inline CSS
CSS and HTML should be kept separate. Ensure you won’t have to search through the HTML for the CSS attached to an inline element when you decide to change the design.

10. Too Many Files used
A design with dozen CSS files attached is terribly hard to modify. Besides, it slows the time processing each file. Better use a simple CSS scheme. save your time and time of those who’ll have to make alterations to your layout.

Tags: , ,
Posted in General Talk, Website Templates | 1 Comment »

CSS Templates Knowledge Base

November 12th, 2008

LayoutsPack provides its users with definitely qualitative website templates of various types. But our purpose today is not to highlight the quality but to get every user acquainted with principles of website templates’ operating. So get ready for some useful piece of information. Our topic today is CSS Templates Knowledge Base.

CSS – Cascading Style Sheets – is the technology that is used for creating CSS Website Templates and helps web designers to arrange and stylize their web pages. The popularity of using CSS is growing nowadays because it’s a convenient option that is compatible with most of web browsers.

The advantage of CSS is that with its help you can separate style from the content. This means that the elements responsible for page styling are easily defined and you can find these elements within the page structure separately from the content.
Using CSS you can easily modify your web pages. Now you don’t need to repeat a number of tags – just edit a CSS file and you will get necessary changes.
So we can say that CSS Templates contain convenience of use and modern technologies in one.

There are certain software requirements for using CSS Templates and they are the following:

-you should have an HTML editor installed on your computer – any you’d like to work with (Front Page, Dreamweaver, Notepad, etc.)
-if you want to add/edit some animation than Macromedia Flash is required
-you will also need to use Adobe Photoshop to work with images

Editing CSS template

If you need CSS templates to be edited you can easily do it yourself. But you should mind that in case of editing a style sheet responsible for text all the text documents related to that CSS style sheet will be modified as well. Here is the instruction on the example of Dreamweaver:
-open the document you wish to edit
-find “Window” section and choose “CSS styles” there. Then click on the “Edit Style Sheet” option in the CSS Styles panel.
-the next task is to choose the name of the style sheet and click on “Edit” button.
-do all necessary modifications
-don’t forget to save the document after finishing your work.

Design-Time style sheets
When you work with your CSS style sheet in Dreamweaver there is a possibility of hiding or showing it during the design-time. In order to apply this option you need to:
-find the Design-Time section in the CSS Panel
-in the following dialog box mark Show Only at Design Time (Plus button) option in case you want your CSS style sheet to be displayed, then choose the very style sheet you want to apply this option to in the Select a Style Sheet section; or if you want to hide a style sheet mark Hide at Design-Time option and then browse necessary CSS style sheet.
-in order to cancel any of the show/hide options for a certain style sheet choose the necessary one and then click Minus button.

We hope you’ll make use of the information we presented you today. Feel free to post your comments, ask questions or just share new ideas. We appreciate every opinion.

Tags: , ,
Posted in General Talk, How To | 1 Comment »