CSS Concept

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

CSS – a Way to lead to Master Design

admin — Fri, 30 May 2008 10:23:35 +0000

Since we have started our articles of what CSS is about, several visitors have asked us, if CSS really can develop a web site from 0 – 100 % when we are talking of design. Well, sure..since CSS has become more used than ever, we are glad to be the first that make a first connection with CSS and the real designing techniques. We refer that at the copied templates or scripts and made few changed after, we refer at the real web developer, who know what CSS and coding means.

You will find here also principles in web design.

CSSconcept has collected a list of some of the most attractive and professional websites, that we have considered most attractive. We hope that in your developing you will have time and see their result, and maybe you will apply some of their layouts in yours.

DesignView/Andy Rutledge

eXtreme Type Termonology

The Principles of Beautiful Web Design

Five Principles to Design

Event – Web Application Design

Creating Passionate Users

Microformats Icons

adaptive path

molly.com

The Elements of Style

Broken Kode

johnoxton.co.uk

Open Web Design

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..

Styles used Everytime I start a new site

admin — Thu, 29 May 2008 18:10:46 +0000

No matter what you are choosing for your design to look like at the end of your development, it is impossible not to add few CSS declaration every time. These are essential for development.

body {padding:0;}

It removes the gap around the edges.

body {background:#fff;} (or whatever color is appropriate)

It is being used just to be granted that white has been choose as default for background , for each browser’s.

form {padding:0;margin:0;}

The form is important not th input.

ul {margin:0;padding:0;}

Padding and margin are set to o.

a img {border:0;}

For margin you will add it if necessary.

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:

Updates and news in CSS

admin — Thu, 29 May 2008 14:30:18 +0000

We have made several research and collected some of the high top CSS website resource.Tutorials, books, mailing lists for users, etc..

CSS News :

XTech 2008 : The Web on the Move – Improvements in browsers and research in advanced layout.

Prince : What’s New – Prince is a computer program that converts XML and HTML into PDF documents. Prince can read many XML formats, including XHTML and SVG. Prince formats documents according to style sheets written in CSS.

Learning::free courses – new content and techniques

Easy Blog Design Tool – Online Based CSS Authoring Tool/Download with wordpress or movabletype template formats/No need knowledge of CSS ,(X)HTML or blog templte tags./A lot of tools available: Image Maker, many templates etc.

Aurelia Main – Aurelia Reporter 3.2 with support for Windows Vista and Server 2003.

Download XML Editor or Author – XML Editor is a complete XML development platform providing the necessary tools for working with a wide range of XML standards and technologies: XML editing, XML conversion, XML Schema development, XSLT and XQuery execution and debugging, SOAP and WSDL testing, etc..

rikkertkoppes.com – CSS grammar rules difficult to read..

ScSS – is a Scheme module for parsing, querying, and emitting style information compatible with the W3C Cascading Stylesheets recommendation.

Web Conference -Advanced Layout

CSS Tutorial – Table of contents – Several new translations .

Adapting to Web Standards – book about Web standards..

CSS Tools:

Blog Design Tool for WordPress – CSS authoring tool that has many layout templates, background image maker and others..

Panic-Coda-One-Window Web Development -”So, we code web sites by hand.”

Creation de fr. comp.infosystemes – Creation of a French language group..

GoLive 9 – CSS tools, layout templates, support for handheld media, etc..

Maxro – CSS Designer 2.0.

MacRabbit – CSS editor with preview.

Evrsoft 1st Page 2000 – CSS reference, wizards, etc.

Style Master CSS editor – CSS editor with preview, info about browser compatibility .

Simple CSS – HostM.com – Manage multiple CSS projects and import existing style sheets .

HotDog Web Editors – Editor now supports CSS.

W2CSS – W2CSS translator is a large MS Word macro (program) that takes as input, an MS Word document and produces as output, an HTML file.

Abstract thought lab – Editor in CSS2..

HTML, xHTML and CSS Editor – The program offers many unique features, including the option to upgrade your HTML documents by replacing outdated markup with equivalent styling.

CSS Manager – The CSS Manager adds an Style Sheet item to the Windows menu of Interaction.

PageSpinner – PageSpinner is an easy-to-use, professional web page editor for Mac OS supporting HTML, XHTML, PHP, SSI, CSS with a built-in JavaScript generator.

Mozdev.org – CaScadeS is a stylesheet editor for Composer, the HTML editor of Mozilla/Netscape.

CoffeeCup – It creates CSS style sheets .

JustStyle CSS Editor – JustStyle CSS Editor is full-feature, yet easy-to-use, software for webmasters ..

Quanta Plus Home - Quanta Plus is a highly stable and feature rich web development environment. The vision with Quanta has always been to start with the best architectural foundations, design for efficient and natural use and enable maximal user extensibility.

StyeleAssistant – Writes CSS1 style sheets..

Software602 Incorporated – Edit HTML+CSS

Open Source – Open source is a development method for software that harnesses the power of distributed peer review and trasnarency of process.

JustSystem - displays XML documents with CSS style sheets

Alpha - by Pete Keleher, is an incredibly cool shareware programming editor which has more than 25 different modes, one for each programming language in the universe, for example C/C++, Java, Perl.