Posts Tagged ‘Cascading Style Sheets’

A Brief History of Cascading Style Sheets

Monday, August 1st, 2011

CSS, or Cascading Style Sheets, were originally created to solve a problem with html 4.0. Because HTML was never intended to contain tags for formatting a document tags like font had to be used to format the look of text which created unnecessarily bulky code.

To solve this problem, the World Wide Web Consortium (W3C) created CSS which allowed all formatting to be removed from the HTML document and be stored as a separate file which was added to the document though a Link tag.

CSS files have universal browser support and are typically stored in external files. As well as defining how the file looked, CSS enables you to allocate styles to numerous elements via direct, class, id and pseudo selectors, so with just one line you could tell all paragraph tags to be blue, rather than having to add the font tag with a colour of blue to every paragraph element, which can be very time consuming in long docs, specifically if you then decide you want them to be red!

With CSS came Pseudo selectors, these allow you to control the styling even deeper, for example, to set a specific style on only the first row of a table (:first-child) and define how a link behaves when a mouse hovers over it (a:hover) or when it is clicked (a:active), further extending the ability to customise pages.

CSS first appeared in 1996, and since then it has evolved significantly, now at level 3 (CSS3) you can define far more than ever before, even replacing the need for images in some instances. The box-shadow property is slowly becoming a standard for browsers, and allows designers to instruct the browser to render a shadow for a box, rather than having to create the image from scratch, so reducing design time, as well as the overall file size of a page.

Although CSS3 is not supported for all browsers right now, notably IE8, it is evident we can anticipate a lot of exciting things as it is further developed.

Do you implement CSS3 on your websites already?

Chris Gilchrist owns and runs Hit Reach, a Web Design Business in Dundee who specialise in WordPress Web Site Design & Development and SEO.

Tags: , , , , , , ,
Posted in web design | No Comments »

Adobe Dreamweaver And Client-side Content

Saturday, January 2nd, 2010

Adobe Dreamweaver is a widely-used web development tool aimed at inexperienced and experienced users alike. It allows developers to work visually and behind the scenes, it uses standard web technologies such as HTML CSS and JavaScript. Web pages can be introduced into a Dreamweaver site at any time without the danger of the program modifying your code. In the same way, pages that you create in Dreamweaver can be taken out of the Dreamweaver environment and used elsewhere.

Dreamweaver Training For Web Developers

The program does not rely on its own custom solutions which will only work in the Dreamweaver environment. Although Dreamweaver is not necessarily the best software tool for creating all types of website, it is not an environment which one easily outgrows. It is suitable for creating both static content consisting of client-side pages as well as more sophisticated dynamic content including server side pages. In other words, it is suitable for developing the type of content found on the majority of websites. So, let us examine this content in more detail.

Most of our web sites are hosted on web servers run by specialist hosting companies. A large website will need to be hosted on a dedicated server or even servers, whereas most typical websites will be sharing space on a server with other sites. People visiting a website are sometimes called clients.

Clients gain access to the content on web servers using a variety of different operating systems and different browsers. They normally find this content either by clicking on links from search engines and other locations or by simply typing a URL into the address bar of their browser.

The content that clients access on people’s sites can be divided into two main categories: client-side and server-side. The term client-side refers to content which is compatible with the user’s browser, stuff which the browser software can actually open, display or execute (in the case of scripts).

The main component of client-side content is HTML, or as it’s known in its current incarnation, XHTML; a stricter and more consistent version of the original HTML specification. HTML is a simple markup language which is used to describe the content of web pages for the benefit of the client’s browser. Then we also have CSS and JavaScript.

CSS pages contain information describing the layout and presentation of web content. JavaScript is a simple scripting language which can be used to add interactivity to web pages. For example, when you are filling out a form on a website and information entered into a field is inappropriate, JavaScript can be used to notify you that the content must be changed.

All modern web browsers are fully capable of understanding HTML, CSS and JavaScript. With the addition of extra software utilities known as plug-ins, other technologies can be added to web pages. Two of the most popular plug-in technologies are Flash and Adobe Acrobat PDF files. All of this content then is totally compatible with the client’s browser; hence the term client-side content.

The The writer of this article is a training consultant with Macresource Computer Solutions, an independent computer training company offering Adobe Dreamweaver Classes in London and throughout the UK.

Tags: , , , , , , ,
Posted in web design | No Comments »

Editing Head Elements With Dreamweaver CS4

Thursday, December 31st, 2009

A web page has two main areas: the head element and the body element. The body element contains all of the visible content which will be displayed in the browser window. The head element, by contrast, is designed to contain information about the web page; meta information as it is sometimes called. In this article, we will look at the different ways in which Dreamweaver allows users to modify elements within the head of a web page. Let’s start with the title.

The title element is meant to contain a broad description of the content of the page. It is extremely important that each page should have a title element and that the title be pertinent to that page. Dreamweaver automatically adds a title element to every new page with the default text “Untitled Document”. Perhaps the easiest way of modifying this default title is simply to enter a new title in the Document Title box of the Document toolbar which is normally displayed at the top of the page. An alternative method is the choose Modify – Page Properties and then click on the Title/Encoding category on the left of the screen.

The title element is the only element which is syntactically required to be placed within the head element. In addition a number of optional meta elements may be placed in the head element to provide further information about the current page. One such meta element is created automatically by Dreamweaver along with the title: the content-type. This declares the character encoding to the browser and is particularly important if you have a site with an international audience. To specify the character encoding, choose Modify – Page Properties, click on the Title/Encoding category on the left of the screen and then choose an option from the Encoding drop-down menu.

The meta description element is also very important since, along with the page title, it is often displayed when your page shows up in the search engine results. The description should consist of one or two sentences summarising the content of the page. To set the description in Dreamweaver, choose Insert – HTML – Head Tags – Description then enter a brief description in the dialogue box which appears.

Let’s just mention one final meta element: keywords. The keywords meta element should contain a list of the important words and phrases to be found on the current page. Only text that actually appears on the page should be listed. To create the meta keywords element in Dreamweaver, choose Insert – HTML – Head Tags – Keywords.

The The writer of this article is a training consultant with Macresource Computer Solutions, a UK IT training company offering Adobe Dreamweaver training courses in London and throughout the UK.

Tags: , , , , , , , ,
Posted in web design | No Comments »