What is HTML & CSS – A Brief History
HTML (HyperText Markup Language) is a set of tags which are used to render text on a webpage. Initially the tags were limited in nature and allowed for such things as headlines, paragraphs, lists, tables and a few which did things like italics and bold. There were no standards and the two main browsers at the time (Internet Explorer and Netscape Navigator) developed tags which only functioned with their browser. But most of the common tags would be rendered in similar fashion. So <h1>Page Title</h1> meant display the words ‘Page Title’ as a level 1 headline, that is, very large and very bold.
Any additions to appearance (typeface, font size, colours) were not easily applied and had to be dealt with each time you used a tag, so if you wanted your <h1> tags to be red you had to designate that each time you placed an <h1> tag in the page.
CSS (Cascading Style Sheets) was the next major stage in the development of website coding and design. Here aspects such as colour, font size, font style, borders, text alignment and so on could be centrally located in a separate file, attached to your main web page file or within the file but grouped together in a single section. This meant you could create a “style” and have it applied to all elements of a certain type. So if you wanted all your <h1> tags to be red, you could place this code in your style sheet and it would be applied to all of them. And if you changed your mind, you only had to make this change in one place, rather than change every instance of that tag.
With CSS, styles can also be organised into selectors called ids and classes. So you define your style for a class and that class can be added to any of your HTML tags. That way you can create a class for the text colour of red and then apply it to any tag just by assigning the class name to that tag. You can also create hierarchies of selectors which cause the styles to filter down (that’s where the idea of ‘cascading’ style sheets comes in).
It sounds very complicated at first but once you’ve grasped the concepts and seen the results in action, you soon see where the proper combination of HTML and CSS allows you to put together a webpage that is easy to alter and update during the design process.
While the browser wars haven’t abated, HTML and CSS have become more and more standardised over the years and organisations like the World Wide Web Consortium (W3C) have developed best practice guidelines for working with HTML and CSS, and most web designers will use these as their measuring stick to creating flexible and sound layouts.
The Latest & Greatest
The most recent stage in the web design sphere is the introduction of HTML5 and CSS3. Only the latest browsers will recognise many of the new features of these two levels of development code, but in keeping with the history of web site design and development, browsers will only be forced to keep up because people will want to take advantage of these new features.
HTML5 has introduced a number a new tags which allow developers to better organise the content in a webpage. With the introduction of new tags like <header>, <nav>, <footer>, and <article> it aims to help classify content better, to improve on usability and user experience through better content organisation and even improve on Search Engine Optimisation as search engines can better identify important sections of webpages.
CSS3 has introduced a number of features which were only possible before with graphics or Flash animations. You can now add drop shadows to text, add graphical borders, have multiple backgrounds for a single tag, add opacity to a colour and add gradients. You can create transitions and animations. One of the most important additions with CSS3 is the use of what are called, “media queries”. These will detect the size of the browser screen the site is being viewed with and allow you to define different styles for those conditions. This is the basis for responsive design, whereby the look and feel of a website will “respond” to the size of the screen on which it is being viewed.
In keeping with our philosophy of providing our clients with the best web presence possible and creating the most positive user experience for those visiting our clients’ websites, iSeek will only design sites using the latest of website coding standards.