Introduction to CSS
Posted by Jennifer Farley | March 12, 2008 | 1 Comment
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.
Photoshop / Bridge Quick Tip : Embed Your Info In Your Photographs
Posted by Jennifer Farley | March 1, 2008 | 1 Comment
Everytime you take a picture with your digital camera, some background information is embedded into the photograph. This information is called EXIF data and it records information such as the camera name, exposure, shutter speed and a whole lot more technical data.
By using Bridge (which comes with Photoshop CS2 and CS3) you can also add your own information such as your name, website, email and copyright. Obviously this is very important for photographers and can in a small way help to combat people nicking your stuff. It’s really easy, here are the steps: (Note: These screengrabs are from CS3, but you can do exactly the same in CS2).
1. Open Bridge by clicking on the Bridge icon at the top right of the Photoshop screen or choose File > Browse in Photoshop.
2. Browse to find the file that you want to add additional data to.
3. If the Metadata panel is not already open in Bridge, choose Window > Metadata Panel.
4. On the Metadata Panel, you’ll see a section called IPTC data - this is where you can add your own information. To add your info click next to any IPTC that has a pencil beside it. The field will change to white and you can type in the relevant details.
-
About
Hi, my name is Jennifer Farley and I am a designer and design instructor based in Ireland. Read more about Laughing Lion Design .
Hire me for illustration work too!
view my portfolio:
coroflot.com/jennyrusks -
Connecting
