Articles, tips and tutorials about web design, CSS, usability and other web design-related topics.
Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts
Friday, October 7, 2011
6 Habits For Writing Better CSS - Part 1
1. Get into the habit of using a CSS Reset
How many times over and over have you coded your css and testing the code on Firefox and Chrome it looks fantastic and to your surprise IE looks like crap. Something that definitely comes in handy is the CSS Reset.
It just resets all margins, paddings, sizes etc. and it simplifies knowing that you are working from a clean slate.
You never edit the Reset.css because it must always be the same.
Some important factors when including the Reset css to your html.
-Always load the reset css before your original site css.
-Never edit the reset css, if you edit it, then it has no use of being a reset css.
2. Adding comments to your code is very helpful
Have you ever come across a piece of code and had absolutely no idea what it does or for what it is.
Well if the coder didn't add comments then that's just unlucky.
When coding, make it a habit to add comments, so when you are someone else works on the code, they'll have a fair idea of what the code is for.
3. Keeping your code clean
Having clean code is not only a art, but it also makes your code look good.
When you have a class that only requires property, then keep everything on one line.
If you have a class that contains more than one property, split it up onto multiple lines.
It'll look cleaner and faster to read.
How many times over and over have you coded your css and testing the code on Firefox and Chrome it looks fantastic and to your surprise IE looks like crap. Something that definitely comes in handy is the CSS Reset.
It just resets all margins, paddings, sizes etc. and it simplifies knowing that you are working from a clean slate.
You never edit the Reset.css because it must always be the same.
Some important factors when including the Reset css to your html.
-Always load the reset css before your original site css.
-Never edit the reset css, if you edit it, then it has no use of being a reset css.
<link rel="stylesheet" href="reset.css" />
<link rel="stylesheet" href="site.css" />
<link rel="stylesheet" href="site.css" />
2. Adding comments to your code is very helpful
Have you ever come across a piece of code and had absolutely no idea what it does or for what it is.
Well if the coder didn't add comments then that's just unlucky.
When coding, make it a habit to add comments, so when you are someone else works on the code, they'll have a fair idea of what the code is for.
/* This is a comment for this code section */
.box {
background: #000;
color: #999;
}
.box {
background: #000;
color: #999;
}
3. Keeping your code clean
Having clean code is not only a art, but it also makes your code look good.
When you have a class that only requires property, then keep everything on one line.
If you have a class that contains more than one property, split it up onto multiple lines.
It'll look cleaner and faster to read.
.class { text-align: left; }
.class2 {
background: #000;
color: #999;
width: 600px;
}
Go To Part 2.class2 {
background: #000;
color: #999;
width: 600px;
}
Friday, September 2, 2011
What is CSS
CSS is short for Cascading Style Sheet, it is the back bone language of web designing.
Normally when someone wants to develop a web site, they must know how to use CSS to it's fullest potential, since CSS is what makes your site look great.
CSS is mostly a set of commands, moulding your site into the design you want. CSS was introduces to make web styling a lot easier, and that's exactly what it is good at.
Here's a example:
I just basically designed a block to have the name 'main' and have a white background with the size of 500 pixels by 500 pixels.
CSS can be added into a html file quite easily, from attaching a seperate CSS file normally called, style.css, you can also do the CSS styling within a html document like this.
Learning and using CSS is fun and each day is different, you learn something new everyday since it's a technology that keeps on growing.
Have a look at this article about how to write better CSS
Normally when someone wants to develop a web site, they must know how to use CSS to it's fullest potential, since CSS is what makes your site look great.CSS is mostly a set of commands, moulding your site into the design you want. CSS was introduces to make web styling a lot easier, and that's exactly what it is good at.
Here's a example:
div#main { background: #fff; width: 500px; height: 500px;}
I just basically designed a block to have the name 'main' and have a white background with the size of 500 pixels by 500 pixels.
CSS can be added into a html file quite easily, from attaching a seperate CSS file normally called, style.css, you can also do the CSS styling within a html document like this.
<html><head> <style type="text/css">
div#main { background: #fff; width: 500px; height: 500px; }
</style></head>
<body>
<div class="main"><h1>Heading 1</h1></div>
</body></html>
Learning and using CSS is fun and each day is different, you learn something new everyday since it's a technology that keeps on growing.
Have a look at this article about how to write better CSS
Friday, August 19, 2011
To in-line style or to not, that is the question.
In-line styling, some like it some don't. Some even say it's a lazy and sluggish way to apply styling.
Well you see, the thing is, no one is right or wrong, everything has it's place in the world, whether it be in-line or not.
But of cause, like I said many developers prefer to do it the long way or the easy quick way.
Well you see, the thing is, no one is right or wrong, everything has it's place in the world, whether it be in-line or not.
Benefits of in-line styling.
Most developers will say, in-line styling is a thing from hell, but truth be told, in-line styling does have it's benefits.- You can quickly patch something gone wrong.
- You don't need to write a whole styling script for when you'll only be applying a style on one thing.
But of cause, like I said many developers prefer to do it the long way or the easy quick way.
Disadvantages of in-line styling.
In-line styling can get messy, specially if you are working on a big project.- Too much in-line styling used makes it difficult to make changes in later stages.
- IT GETS MESSY, most newbies use in-line styling from start to finish, and for someone else to carry on working on the project will give him a tough time.
So like I said, it's best used for when using in-line styling on one area, but definitely a never do it, when you use in-line styling throughout the whole site!
Subscribe to:
Posts (Atom)