xhtml/css

Flash Online Designers

Flash Online Designers is a division of East Coast Interactive set up specifically to deal with the design, development and licensing of online designers for companies around the globe. Browse our current list of online designers if you are looking to licence one of our existing online design tools, or contact Flash Online Designers if you would like us to create something different for you.

For further information, head on over to www.flashonlinedesigners.com

Add comment August 6th, 2008

css shorthand

ok, next up in our exciting tips and tricks for css is my personal favourite…”css shorthand”…why is this my favourite?…because this reduces the amount of code we have to write and also streamlines our css by making the file smaller and hence load faster.

There are several areas within css where you can use shorthand, I’m not going into them in great depth here but i will mention what they are, give you an example and you can feel free to investigate them further, this is not intended to be a complete and concise reference, merely a guide to help you on your way.

Background
So to start with, lets have a look at the background properties, there are five of them below which I’ve given some values for the purpose of this demo.

example
{
 background-color:#fff;
 background-image:url(../images/sample.jpg);
 background-repeat:no-repeat;
 background-position:top left;
 background-attachment:fixed;
}

The good news it that they can be condensed into one line as so:

example
{
 background:#fff url(../images/sample.jpg) no-repeat top left fixed;
}

job done! moving on.

Font

example
{
 font-style:normal;
 font-variant:small-caps;
 font-weight:bold;
 font-size:1em;
 line-height:1.4em;
 font-family:Verdana, Arial, Helvetica, sans-serif;
}

And the shorthand equivalent:

example
{
 font:normal small-caps bold 1em/1.4em Verdana, Arial, Helvetica, sans-serif;
}

Border
there is a potentialy huge time saver here depending on how you currently work with borders.
firstly the full list of properties available:

example
{
 border-top-width:1px;
 border-top-style:solid;
 border-top-color:#000;
 border-right-width:1px;
 border-right-style:solid;
 border-right-color:#000;
 border-bottom-width:1px;
 border-bottom-style:solid;
 border-bottom-color:#000;
 border-left-width:1px;
 border-left-style:solid;
 border-left-color:#000;
}

and the more common way to work:

example
{
 border-width:1px;
 border-style:solid;
 border-color:#000;
}

And the shorthand equivalent:

example
{
 border:1px solid #000;
}

Margin

example
{
 margin-top:1px;
 margin-right:2px;
 margin-bottom:3px;
 margin-left:4px;
}

And the shorthand equivalent:

example
{
 margin:1px 2px 3px 4px;
}

*side note* i think it was Eric Meyer who came up with the “trouble” method of remembering this…that is T(top)R(right)ouB(bottom)L(left)e. another way is to remember it goes clockwise.

Padding
padding is handled exactly the same way as margin to the shorthand would simply be:

example
{
 padding:5px 6px 7px 8px;
}

List

example
{
 list-style-type:square;
 list-style-position:outside;
 list-style-image:url(../images/sample.png);
}

And the shorthand equivalent:

example
{
 list-style:square outside url(../images/sample.png);
}

And one further shorthand method you may have noticed me using throughout this page, the hex colour code. If you are using colours which are matched in pairs of values (that is three pairs of hexadecimal digits) as in the below examples:

#ffffff
#ff0000
#ff00cc

you can shorten them to 3 digits as follows:

#fff
#f00
#f0c

less typing = less code = faster loading
or
less typing = less code = easier to maintain
or
less typing = more time for beer

the benefits are there for everyone!

2 comments July 26th, 2007

css classes and id’s

css classes and id’s – which to use?

An id is used to define a unique element in a page, this is a requirement of xhtml and should be observed. In the xhtml we name it by stating the following:

1
id=""

and in the corresponding css we select it with the hash symbol(#item{})

A class may be used as many times as desired in a page. In the xhtml we name it by stating the following:

1
class=""

and in the corresponding css we select it with the full stop symbol(.item{})

here comes the science….

below is a basic well structured xhtml document with a link to an imaginary stylesheet. Have a quick look at where “id=” and “class=” are being used.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>title</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<div id="header">
<h1>Page heading.</h1>
<p>Brief description.</p>
</div>
<div id="menu">
<ul>
<li><a href="#" title="" class="active">menu item</a></li>
<li><a href="#" title="">menu item</a></li>
<li><a href="#" title="">menu item</a></li>
<li><a href="#" title="">menu item</a></li>
</ul>
</div>
<div id="pageContent">
<div class="content">
<p>i am some content</p>
</div>
<div class="content">
<p>i am some more content</p>
</div>
</div>
<div id="footer">
<a href="http://www.eastcoastinteractive.co.uk" title="©2007 east coast interactive">©2007</a>
</div>
</div>
</body>
</html>

Id’s are being used here to define the parts that will only exist once and which form the structure of the document. As you can see, this includes, in hierarchical order from the opening of the body tag, the “container” element which holds everything below it. Firstly the “header” element, then a “menu” element, a “pageContent” item, (am deliberately ignoring the two items with classes and will get to this in a minute) and finaly the “footer” element. These items make up the page structure and will never have more than one instance on the page…perfect candidates for the ID selector. The corresponding CSS for a couple of these elements could look like this:

1
2
3
4
5
6
7
8
#container
{
position:relative;
width:746px;
border:7px solid #fff;
background-color:#fff;
margin:0 auto;
}
1
2
3
4
5
6
#header
{
position:relative;
height:109px;
background:#fff url('../images/head.jpg') no-repeat top right;
}

So…classes! In the xhtml example above, you can see two items with class=”content”. As there are multiple instances of these “content” areas, we give them a class definition to deal with them. An example could be:

1
2
3
4
5
6
.content
{
border:1px solid #fff;
padding-top:1.3em;
background-color:#ccc;
}

As we can see, classes have scope for re-use where id’s are fixed to one element per document and hopefully it’s now easier to determine which one to use in your own code.

There is much more that can be said about id’s and classes, including pseudo classes etc but this is just a very brief introduction to answer a specific question we were asked. We will aim to expand on this with further articles.

Add comment July 25th, 2007

Calendar

October 2017
M T W T F S S
« Feb    
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

Categories

Most Recent Posts

Feeds