Today, web browsers tend to adhere more accurately to the Web Standards, especially when it comes about CSS properties. CSS3 properties are supported by all web browser engines and with every version released more new properties can be used to style the HTML elements. In this article I’ll try to emphasize some useful approaches which can be used to make your work easier.
Which statement is served first?
style.css file is nothing more than a text file with (a lot of) statements which define properties for HTML elements. Note, this is the default style sheet file, and the statements are read from top to bottom and from left to right. So, a good approach is to have on top statements for
body elements, and general properties for other HTML elements (like
text-decoration:none for anchor link, or
list-style-type:none for unordered or ordered list elements etc.). Keeping things in good order, will save you time from not wasting it.
Which property should come first?
When declaring properties for styling HTML elements I think is better to start with properties that have to do with the position of the element inside the HTML page. So, start with declarations for
position, and finish with the
font characteristics. Also, give a width to the elements like
img or the ones who
float. With this approach, you’ll avoid loading pages with elements that “struggle” to find their places inside the content.
Which value for measurement unit to use?
When it comes about values for measurement units, is better to use
px, a relative unit to the viewing device for style properties like
width. At least, a pixel has the same dimension in all web browsers’ engine, and the cross-browser differences are not noticeable. For
font you can use
em to have the height flexible.
Dealing with images and objects
width and a
height to the images or the objects you want to be loaded inside the page. With this, you wont see “running” pieces of text finding their places inside the page. Note that, this elements will overflow if their width will exceed the width of their parent element (a
div). For avoiding this, is better to set a maximum limit for the element’s width:
With this, the image width will be limited to it’s parent width, and
height:auto will set the height to the correct value, preserving the aspect ratio. An
object is often the media stream of a movie or a video clip. Setting the same maximum limit as the images have, wont have the same result in all major browser. A solution might be to set the max-width to 100% and the max-height to a maximum value in pixels based on the aspect ratio of the video AND taking into consideration the width of the parent in pixels. More precisely, if you have a container with the width set to 600px, set the max-height of the object to 450px (aspect ratio 4:3).
Classes or IDs?
Tables or DIVs?
In our days, the trend is to use DIV as a container and to keep separated the style properties for the HTML elements, and make the page layout “tableless”. Anyway, tables are good also, at least when it comes about forms. The elements are aligned better inside a form, when
input are coming together, if they are placed inside a
A good start, when you develop a website site, with solid knowledge as a foundation for HTML and CSS coding, will keep things clear and easy to understand for further improvements.