Laughing Lion Design

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.

Thanks for visiting Laughing Lion Design. Subscribe to my RSS feed to stay up to date with all of the Photoshop and Design related posts.

Related posts:

1. Photoshop Quick Tip : Exporting your layers as separate documents
2. Photoshop Quick Tip : The best Photoshop keyboard shortcut!
3. Colour Models in Photoshop : What they are and when to use them
4. Why Size Matters on the Net