Introduction to CSS
Posted by Jennifer Farley | March 12, 2008
Today I am once again delighted to put up a tutorial written by Sherif Salah (who has been very patient waiting for me to put it up!!) This is an introduction to Cascading Style Sheets. Thanks Sherif.
What is CSS?
CSS (Cascading Style Sheets) is a language which is used to describe how our HTML document should appear by applying a set of properties & values - known as styles - to the HTML tags and elements within our page.
Methods of applying styles to a webpage:
1- CSS Inline Styles:
Styles are defined within a tag.
In this method styles are applied to HTML tags and elements every time we need to apply it, even if it was the same style for the same tag or element through out the whole document, this is the main disadvantage of applying such style, especially when the web site is large enough with many pages that makes it impossible to define the style for each element separately.
Use this style when you need to apply a specific style for a specific element that isn’t going to be repeated as much.
How to apply the Inline Styles ?
1- First we select the HTML tag which we are going to apply our style to, for example, the header tag H1.
2- Decide what style we want to apply to our header, say we want to make all of our H1 headers to be blue colored, with a font style Verdana.
3- We apply our inline style using the following syntax:
So, in our example we want to apply the style we mentioned (blue color and verdena font) to the H1 element, we will do it as follows:
Note:
1- The property and value are separated by a colon, for example, color: blue
2- A semicolon is added between the value and the new property if we are adding more than one property in our style.
2- CSS Embedded Styles:
Styles are defined within the of the document.
This style method is also applied within our HTML document, but instead of applying the style to specific HTML tag, the style will be defined in the of the document and it will be applied to the element without the need to define it every time the element appears within the document, we can group as many styles as we want that will be applied to different HTML tags throughout the whole document
How to apply the Embedded Styles:
1- The embedded styles are grouped in a STYLE tag with the attribute type=”text/css”, so it will be like this;
2- We put the style tag we mentioned in the head of our HTML document as follows:
3-We put all the styles we want using the following syntax:
Where the selector is the HTML tag or element that we want to apply our style to, the property is the style attribute like the color or font-style or whatever, and the value is the value of the property, like the color: red, or the font-style: arial.
So if we want to make all of our H1 headers blue colored with font-style verdena as the previous example, we will just add a style for the h1 that will be applied every time we use the H1 tag in our document.This is how we are going to write our style for the H1 Tag:
Then every time there is a header H1 in our page, it will appear with a blue color and a font-style verdena, if we want to change this style, we will simply edit our style and the effect will take place over the whole document.
3-CSS External Styles:This method is the same as the embedded styles except that our styles won’t be grouped in the head of the HTML document, instead, they will be grouped in an external file with the extension .css, and we will include a link to this file in every page we want to apply our styles to.
This provides us with a great advantage, that our styles scope aren’t limited to a single document as in the embedded method, instead, our styles can be applied to whatever pages we want by just adding a link in the page that’s pointing to the location of our styles file which is called the stylesheet.
How to apply the External Styles:
1- We select the page we want to apply our styles to.
2- We put a link tag in the of the HTML page telling the browser to apply styles using external stylesheet file.
The syntax of the link tag:
This is telling the browser to look for the stylesheet file called ourstyles.css which is located in the same directory as the web page.
The stylesheet file can be simply created using notepad or wordpad, then saving it with the extension .css
It can be as simple like that:
In conclusion:
Inline Styles scope: within an html tag or element.
Embedded Styles scope: within an html document.
External Styles: the whole website pages.
Added a Blogrush widget to this blog
Posted by Jennifer Farley | September 15, 2007
I’ve added a new widget to the sidebar. It’s called Blogrush and the idea is that it shows posts from other bloggers in related areas, so in this case it SHOULD show links to other blogs featuring design and photoshop articles.
It’s free to join up and get the widget and it should also hopefully draw some extra traffic to your blog site. There is an excellent informative video on the site that shows you how it all works.
31 Online Tests for your website
Posted by Jennifer Farley | May 29, 2007
The Aviva Directory team have put together a great list of FREE online tests that you can perform on your website. The tests cover Download Speed, Search Engine Optimisation, Code Validation and Browser Simulations.
Try putting your website through the ringer with this batch of tests. I did with Laughing Lion Design and it’s a good eye-opener and gave me lots of information about things I may have, ahem, forgotten about.
The full list of online tests can be found here.
Website Design : Nice set of Icons
Posted by Jennifer Farley | May 25, 2007
A huge icon pack (over 100 of them) is available for free download from deleket. The icons are bright and colourful and would be a nice addition (in moderation) to any webpage.
11 Reasons Why You Should Have a Web Site
Posted by Jennifer Farley | March 30, 2007
1. To Establish A Presence
Approximately 750 million people worldwide have access to the World Wide Web (WWW). No matter what your business is, you can’t ignore 750 million people.
2. To Make Business Information Available
What is basic business information? Think of a Yellow Pages ad. What are your hours? What do you do? How can someone contact you? What methods of payment do you take? Where are you located? Now think of a Yellow Pages ad where you have instant communication. What is today’s special offer? Today’s interest rate? Next week’s sale information? If you could keep your customer informed of every reason why they should do business with you, don’t you think you could do more business? You can on the WWW.
3. To Heighten Public Interest
With Web page information, anybody anywhere who can access the Web and hears about you is a potential visitor to your Web site and a potential customer for your information there. People from other towns, counties and even other countries can find out information about who you are and what you do.
4. To Network
A lot of what passes for business is simply nothing more than making connections with other people. Every smart business person knows, it’s not what you know, it’s who you know. Passing out your business card is part of every good meeting and every business person can tell more than one story how a chance meeting turned into the big deal. Well, what if you could pass out your business card to thousands, maybe millions of potential clients and partners, saying this is what I do and if you are ever in need of my services, this is how you can reach me. You can, 24 hours a day, inexpensively and simply, on the WWW.
5. To Sell Things
Before people decide to become customers, they want to know about you, what you do and what you can do for them. Which you can do easily and inexpensively on the WWW. Then you might be able to turn visitors to your site into customers.
6. To reach a highly desirable demographic market
The demographic of the WWW user is probably the highest mass-market demographic available. Usually college-educated or being college educated, making a high salary or soon to make a high salary, it’s no wonder that Wired magazine, the magazine of choice to the Internet community, has no problem getting Lexus and other high-end marketers advertising. Even with the addition of the commercial on-line community, the demographic will remain high for many years to come.
7. To Answer Frequently Asked questions
Whoever answers the phones in your company can tell you, their time is usually spent answering the same questions over and over again. These are the questions customers and potential customers want to know the answer to before they deal with you. Post them on a WWW page and you will have removed another barrier to doing business with you and freed up some time for that harried phone operator.
8. To Make Changing Information Available Quickly
Sometimes, information changes before it gets off the press. Now you have a pile of expensive, worthless paper. Electronic publishing changes with your needs. No paper, no ink, no printers bill. You can even attach your web page to a database which customizes the page’s output to a database you can change as many times in a day as you need. No printed piece can match that flexibility.
9. To Allow Feedback From Customers
With a Web page, you can ask for feedback and get it instantaneously with no extra cost. An instant e-mail response can be built into Web pages and can get the answer while its fresh in your customers mind, without the cost and lack of response of business reply mail.
10. To Reach The Specialized Market
Sell bee hives, art prints, rowing boats? You may think that the Internet is not a good place to be. Well, think again. The Internet isn’t just computer science students anymore. With the 700 million and growing users of the WWW, even the most narrowly defined interest group will be represented in large numbers. Since the Web has several very good search programs, your interest group will be able to find you, or your competitors.
11. To Serve Your Local Market
We’ve talked about the power to serve the world with a Web page. But what about your own town? If you are located in Westmeath, Cork, Sligo or Dublin, there is probably enough local customers with Web access to make it worth your while to consider Web marketing. A local Blackrock sandwich bar even takes lunch orders through the Internet!
Why Size Matters on the Net
Posted by Jennifer Farley | November 30, 2006
The cost for the web space provided by an Internet Service Provider (ISP) is actually one of the lower costs involved in hosting a site. The biggest cost to a web hosting company is data transfer.
What is Data Transfer?
Data transfer is the amount of data that is transferred from the computer that is hosting a particular web site to everyone that is using it. It includes the downloading of everything that goes to make up the page, including HTML, images, sound and flash animations Often the term Bandwidth is misused and confused with data transfer. Although the two topics are related, bandwidth refers more to how fast the files can be downloaded rather than how much is downloaded. The more bandwidth a site has available, the quicker it can send files to your visitors and vice-versa.
Data transfer includes only the files that are used by the person visiting your site. So, it is possible that a site that uses over 100Mb in disk space can use only 10Mb a day in transfer, while a site using 2Mb of disk space may use 50Mb a day. Therefore, it is important not to confuse the amount of data transfer or bandwidth your site uses with the amount of disk space that it takes up
To illustrate the idea further: If a 1kb HTML file is visited 100 times a day, the page itself would use 100Kb of transfer for that day. If the same file had images, each of those would also be downloaded between 0 and 100 times for that day (depending if the visitor loaded the whole page) and the total transfer used by the site would increase by the size of each image (or other file embedded into the page such as a flash file or a sound file) multiplied by the number of times it was downloaded to visitor’s computers.
So why is File Size important
If you visit a site that contains many animated images, a flash file and possibly a music file, it is unlikely that you would stay to download it all if the files are anyway large in size. This is an example of the idea of wasted data transfer. All the bells and whistles you place on your website would quickly add up in terms of file size but if no one is staying to watch your Java applet presentation then it’s just a waste of both your transfer quota, and your visitors time. It is therefore important to build websites that are as small in size as possible (without sacrificing the design), even if you don’t pay much for your web space.
Reducing File Sizes
If your site is getting too near its data transfer limit for comfort then there are basically two things you can do to help minimise the effects.
- Reduce the number of files on your server
- Optimize your files for use on the web
Reducing the number of files on the server is only really effective in saving data transfer if you make the right choice about which files to delete. Deleting your least accessed files may seem like a logical choice, but if they are only being accessed 2 or 3 times a day then you are not going to make much of a saving.
The safest way of saving your transfer is to make sure that all your files are optimized for the web. Any file size savings you can make will add up to be a considerable saving on a busy site!
Optimize your images
When using GIF images (often used for logos and buttons on websites), try to use as few colours as possible without losing too much of the quality. When using JPG images (used mainly for photographic style images), experiment with different levels of compression.
Compress your HTML
It is important that the HTML used on the site incorporates the latest standards. Once your pages are following the standards, there are HTML compression tools available to squash any un-necessary code out of your pages.
Sound Quality
If you use sound files at all on your site and they are high quality, it is worth opening them up in suitable editor and experiment with saving them in different formats to see if you can get the same sort of quality by saving it in a different way.
The Basics
Finally, go through your each page in your site and make absolutely sure that you need everything that is currently appearing on these pages. For example, your Flash intro, is it for show purposes only or does it really have a function. Be ruthless!
-
About
Hi, my name is Jennifer Farley and I am a designer and design instructor based in Ireland. Read more about Laughing Lion Design .
