CSS Concept » Tutorials

CSS Syntax

admin — Sat, 07 Jun 2008 13:05:37 +0000

Syntax

The concept of CSS Syntax is made of three parts :

a) selector

b) property

c) value

Selector = HTML element/tag that you wish to define. Property = the attribute that you wish to change. Each property can take a value. The last two are separated by a colon, surrounded by curly braces :

Though, when the value is multiple words, add a quote around the value

When you want to specify more than one property, separate each property with a semicolon.

To be more reliable, you can describe one property on each line :

Grouping

Each selector can separate with comma. Bellow we have grouped all the headers elements.

Class Selector

Class selectors can define different styles for the same type of HTML element. Here is an example when you have two paragraphs (right-aligned and center-aligned) :

The class attribute in your HTML document :

M ore than one class per given element :

If you omit the tag name in the selector to define a style that will be used by all HTML elements that have a certain class.

id Selector

The id selector is defined as a #.

CSS Comments

Are used to explain your code, and may help you when you edit the source code at a later date.

Classic two-column layout with left side – Tutorial

admin — Sat, 07 Jun 2008 12:02:10 +0000

The following tutorial will make a simple two-column layout. For the beginning the page is simple, and you know that the content (images, text) is marked with HTML code between the and tags.

First We will have this :

Above we have 2 sections marked using

tags.

tags are being used to create a division in the doc. or to make a department. The following code is doing that and is forming 2 containers and each has an unique ID :

The content of the page are contained in one of the major page division. So what are the rules of ID’s in HTML pages and why do we use them like DIVs to assign them to page ?

a ) You can assign ID’s to HTML tag. And also an ID to a

tag.
b) It should be used just once. The rule that two elements must have one ID is true. ID are used to uniquely identify a page element. Above we have presented just an page element having an ID of navigation and only one ID of ‘centerDoc’.

c) ID’s on HTML pages are used in CSS. For changing the appearance we can target ID’s in our CSS code.

tags we are using header tags like :

and

for setting the headers. In the following code we have attached the CSS doc. with the line code between the tags :

Like all page link we have an ‘href’ attribute for this time to a CSS doc which has all CSS code and will affect the page if we linked to it.

So after we have the styled sheet linked to the doc. we can look at the CSS code. First snippet of code ’styles’ the unique ID’s we have mentioned before :

We will pay attention just to some elements for the moment. In the previous example we have 2 selectors, one for ID and each selectors are grouped using the curly brackets :{}. In the following example you will see the CSS selectors code with all the guts out :

Now we have a CSS ID selector for each of our HTML divs which have an ID, and have the same corresponding name. The CSS selecotr #centerDoc applies to the div : ‘
. For the div with id of ‘navigation’ we have the code :

The great thing is in the CSS code for centerDoc:

CSS is able to concept from 0-100% a box or you name it, that wraps around HTML elements. The model consists of : margins, padding, content and other.. this gives you the opportunity to space elements in relation with other ones.

So, all between
tags is content. After comes padding. Then a border and the margin.

CSS Styleguides a fast way to reach Readability

admin — Fri, 30 May 2008 11:47:38 +0000

For your first develop, you are ready to drop all the structures of the project that contains classes, schemes and so many codes and you are ready to start the next one. For comprehending coding, you need more time, perhaps less, but as fas as I know coding is lit bit hard and nasty. And after time goes by, codes starts to get complex, they are starting to get very high complex, depending on the project. So, how can you get sensible structure? Make use of comments – after the projects itself has been ended.

In time, each developer started to make more creative and inventive the comments and format of the text and to improve the surveillance of CSS. This are structured in CSS-styleguides – master of CSS code which offer for developers very helpful hints for the structure of the code and many information of the background related.

The following article has 5 techniques that can improve your developing skills. The following codes can be apply to CSS and also to any stylesheet that you are using.

Divide the code

The most important in your CSS-code are the structure of the layout and identity. First start and choose the order of the CSS-selectors according to your div’s and classes from your layout. One mentioning, before doing that have some time and group common elements in distinct section and give a name to each one.
Separate fragments of code, choose flags or striking comments. They will serve as a heading in the stylesheet for each group . Recognize single blocks when scanning trough your code, and after add the flags.

For large developments this hints might not be enough, though are good. For that divide your code in more/multiple case for having a control to it. You will have to use master-stylesheet for controlling them, and so your code shall be easy to control. Include only master-file in your doc.

For bigger projects use brief update log.For not having problems when debugging CSS-code use diagnostic styling.

Start and Define a table of Contents

For having everything clear, you might consider having a table of contents at the beginning of your CSS-file. For doing that you have to integrate a table of contents / or display a 3 overview of the layout having ID’s , classes that are being used in the three. Use some detailed named for them, for the section, to reach faster at them.

Also some of the elements that you want to change regular select them, at the end, when you release the project. The classes and ID can appear in your table of contents.

or so :

use simple enumeration without indentation. That’s easy, quick and effective.

The role of having a table of contents is that it would be easier for other to read the code. This can save time when it is in table of contents.

Define color and Typography

When you are starting a project you should know that colors and typography are ‘constants’. First you should make a color glossary. So, you will have some reference of the colors that you are using in the site, so you will have to avoid mistakes, and when you need to change a color, you will have a list.

describe color codes used in your layout. for a given design element you can describe the colors which are used there.

The same holds for typography.

CSS properties

The CSS properties must be ordered with some special formatting, so the code would be more reliable, intuitive. Some put the colors and fonts first, some put the positioning and floats first.

an alphabetical order

Indentation helps

One-liners for brief fragments of code is very helpful to see if your code is good. The result might not be positive if you have defined 3 attributes for a selector, or other stuff like that. Your code readability will grow fast and you will find some specific element in your stylesheet.

Styleguides are a great and very helpful ‘hand’ when you need. So, remove all your styleguide that doesn’t help to have a better code. The idea is to have a nice and easy to read code, follow the rules and you will have good results.

Fast Help

12 Articles and Tools for CSS

Centering an image in a div

admin — Thu, 29 May 2008 18:59:11 +0000

For centering images inside a div with CSS you need to apply the following steps. If your HTML code looks like this :

HTML code:

The next move is to apply display:block; for the image and set the margins (left and right) to ‘auto’ like this :

CSS code:

For Vertical-Align

CSS code:

It would be perfect if you could split vertical-align:middle on the image, like:

we will use line-height equal to the height of our container:

equal amount of font-size:

That’s all here..

Different Styles to IE6 and IE7

admin — Thu, 29 May 2008 17:50:55 +0000

Web developers are very familiar with conditional comments when it comes to serve styles for certain versions of Internet Explorer. Though multiple conditional comments are able to be used. We have here an example of what can be used in this type of coding.

CSS code:

Page Indicator in CSS – not scripting

admin — Wed, 28 May 2008 13:12:10 +0000

The following article will show you how can you highlight a page’s link on a navigation menu using CSS code, and no scripting. When you have a navigation menu, let’s say standard : Home, About, Contact, Products links and the viewer is looking at the Contact page, the link shall be highlight so they are viewing that page.
To do this, you are able by adding a class to the link that direct you to that page. The class must be moved to the relevant link on each page. The method that we have presented now, is very known and more than that, works just fine, though the following tutorial will show you to make it automate the process and make the menu part of an include.

HTML:

Home page

CSS code:

On each HTML pages be sure to see that the correct class are in the body tag so they will work fine.

Doing that ok, the correct page will automatically be highlighted when the user lands there.

Round Corners in CSS

admin — Wed, 28 May 2008 12:44:41 +0000

Our previous tutorials learned you how to make menus, and many other things that can be very useful when you are developing a website. This time i consider to be useful for you, to make some interesting round corners for a fluid box. The element from inside the box will be colored any way you like, without having to paint the transparent part of the corner in the similar background color.

When you decide to make round corners in CSS, things might be bit pain. So, our work shall be as clean as crystal for you. So, to start making your design first, I will tell you some tips, that I used in this tutorial. First, i used an image in PNG8, but if you don’t have Fireworks you can use Gif for IE.

We shall use this text : Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed convallis mauris eu ipsum. Proin volutpat facilisis dui. Sed pretium pulvinar arcu

CSS code, mark up for this as follows:

HTML code:

For our next thing we have to give 4 elements and place our corners into positions with static position. Padding – 10px for the box, so we can position the corners nicely with no affecting inner content. To provide elements for the corners I will use div with nested span, but for reducing mark up you can use a nested ‘b’ element. This can be bit negative for a class.
HTML code:

Div and span have been inserted in the inner element, so we have to drag the top corners upwards into the padding area, and after outwards into free so the transparent corners can show. For the bottom corners is also needed the process.

CSS and HTML code:

For making things bit tidy i added a div content in the middle, for revised HTML as :

Font-size = 10px in CSS.

For holding together everything the codes uses floats, though we can modify and simplify bit and use static elements. The main element is not floated and you will find that margin collapse affects the negative margined corners in Firefox, and to stop that we will add 1px border in the current background color.

CSS code:

HTML code:

For adding a new border, you need to make a new round image with the border color that you want. And then we can add CSS border to the layout to end the image. Though, this time you will need to make 2 images, since the border part of the round corner that extends will show.

The main drawback is once again the extra html mark up required to place each corner and if that upsets you then you may want to try one of the many javascript solutions that are out there.

There is also extra maintenance involved with the negative positioning that we used and you will need to take this into account when you place the corners alongside other elements as they will overlap other elements if you don’t allow about 10px more space than you thought you needed.

In addition, the first examples make a lot of use of floats to hold everything together and you may need to wrap the whole lot in a static element if you need to place it somewhere (see example 4 above). Example 5 is the most stable version and the method I recommend you use but either method will work following the guidelines already outlined.

IE6 is also a little jumpy on fluid floated layouts at small screen sizes but that’s nothing new and something you’ll have to live with. Example 5 does not suffer from this though because the outer wrappers are not floated.

The advantage of this method is that the image is only 300bytes and you are not restricted by size like most other methods that use a massive image to draw the sides and borders. The above examples can have unlimited width and height and carry virtually no overhead in file size apart from the extra HTML of course.

I started out by saying this was simple but due to bugs and browser differences it wasn’t really that simple was it? Please refer to the examples for the full code as there are some fixes in place for the various demos. Have fun playing with the examples and if you find a better method of doing this, or want help with the above, or if you find some bugs then let’s hear from you.

Pagination Style in CSS

admin — Sun, 25 May 2008 12:18:35 +0000

The following article explains how to design a pagination to search results or to split a long list of records into more pages. The following tutorial includes HTML/CSS code which can include Digg-like, Clean pagination style that are ready to use in your development projects.

Pagination structure

You can have four main elements :

Standard Page selector
Current Active page
Previous/Next
Previous/Next button/disable

Your design can be made using HTML list/

elements for each pagination and give an ID for the

CSS Concept » Tutorials

CSS Syntax

Syntax

Grouping

Class Selector

id Selector

CSS Comments

Classic two-column layout with left side – Tutorial

and

CSS Styleguides a fast way to reach Readability

Divide the code

Start and Define a table of Contents

Define color and Typography

CSS properties

Indentation helps

Centering an image in a div

For Vertical-Align

Different Styles to IE6 and IE7

CSS code:

Page Indicator in CSS – not scripting

Round Corners in CSS

We shall use this text : Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed convallis mauris eu ipsum. Proin volutpat facilisis dui. Sed pretium pulvinar arcu

Pagination Style in CSS