CSS (Cascading Style Sheets) for Beginners
This is tutorial/guide mainly for people who have minimal experience with CSS (Cascading Style Sheets) and want to learn a bit out about it. CSS is a stylesheet language that formats the presentation of a document written in a markup language (e.g. HTML, XHTML, XML). CSS has a number of advantages one of the main ones being the presentation of websites can be held in one place, therefore making it really simple to update webpages. Style sheets make sites load faster and doesn't use require much bandwith. CSS specifications are maintained by W3C (World Wide Web Consortium).
Adding stylesheets within the HTML file:
- the Selector (example: 'body') : specifies which part of the document will be affected by the rule
- the Property (example: 'color' and 'background-color') : specifies what aspect of the layout is being set
- the Value (example: 'white' and '#000000'): gives the value for the property
Note: color values can be defined using hexadecimal notation to learn more about this go to this website - http://www.w3schools.com/html/html_colors.asp
Grouping selectors and rules:
Instead of having this:
Instead of having this:
Inserting a Style Sheet
There are a number of ways you can apply style sheets to a web page.
To use inline styles you place a 'style' attribute in a HTML tag. The 'style' attribute can state any CSS information. Here is an example:
Internal Style Sheets:
Usually internal style sheets are placed in between the head tags in a HTML document. With the use of <style> tags CSS can be applied. An example on an internal style sheet:
External Style Sheets:
Probably the most popular way of applying style sheets, with external style sheets you create a separate document that contains all the CSS information. While in the HTML document <link> tags need to be placed so the browser can read the information from the style sheet document. The <link> tags need to placed in between the <head> tags.
In CSS background properties lets you set the background color for a web page and an image for the background. With the image background you are able to position the image, and also repeat the image horizontally or vertically.
Note: A link to CSS Color Values
Repeating a Background Image:
This background image is repeated horizontally, to repeat the image vertically simply replace repeat-x with repeat-y.
The property for positioning images on backgrounds is; background-position. The values for background-position can be in the form of percentages (e.g. background-position: 100% 50%), length (e.g. background-position: 0px 30px), and keywords (e.g. background-position: right center). In all cases the horizontal position is specified first and the vertical position second. So for example the values 100% 0% will be positioned on the top right corner of the page.
Single Image on a Background:
To have the image fixed at a certain point so it will not scroll with the rest of the page, just add this property to the body selector; background-attachment: fixed.
This link directs to a table that contains most background properties and values: CSS Background Properties Table
Import Style Sheets
This is another way of applying a style sheets to a web page, very similar to external style sheets. You need to have a separate CSS file that contains all the the CSS information.
|Thread Tools||Search this Thread|
|Similar Threads for: "CSS (Cascading Style Sheets) for Beginners"|
|Thread||Thread Starter||Forum||Replies||Last Post|
|How to make single page into Landscape page style and rest of them in default style in OpenOffice?||Hridayeshu||Windows Software||4||19-02-2012 04:29 PM|
|CSS - How to enter style sheets in document?||Dexter85||Software Development||4||23-12-2010 06:34 AM|
|Cascading Style Sheets Generator||Amandev||Software Development||3||19-11-2009 07:55 AM|
|CSS (Cascading Style Sheets) Validator||Rebella||Software Development||2||15-04-2009 10:02 AM|
|Comparison of 2 sheets in MS Excel||Xeusion||Windows Software||3||21-08-2008 05:36 PM|