Mymunster.com is a social media site for connecting Rugby fans – specifically Munster rugby fans!
So what’s on the site? You can read the latest Munster rugby news of course, follow up the blog posts and chat with other fans in the discussion forum.
If you sign up at the moment there is a chance to win tickets for the Munster vs Leinster match in Thomond Park Limerick on April 4th!
You can also follow @MyMunster on Twitter.
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
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:
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:
Inline Styles scope: within an html tag or element.
Embedded Styles scope: within an html document.
External Styles: the whole website pages.
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.
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.
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.
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.
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.
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.
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!