Printer Friendly Version
Email this thread to a friend
|
Featured Web Site Template |
|
Reflects user activity within the last 5 minutes
|
|
| Member |
Message |
rifat_m6_net
Joined: Mar 28, 2006
# Posts: 9
|
Posted: 2006-Apr-12 08:38
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:
<html>
<head>
<title></title>
<style type="text/css">
body {
color: white;
background-color: #000000;
}
</style>
</head>
<body>
[etc...]
</html>
Style sheets in CSS is made up of rules, and each of these rules has three parts to it.
- 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:
body {color: white}
body {background-color: #000000}
We can have this:
body { color: white;
background-color: #000000 }
Just by using ';' to separate the properties.
OR
Instead of having this:
H1 { font-style: bold }
H2 { font-style: bold }
H3 { font-style: bold }
We can have this:
H1, H2, H3 { font-style: bold }
Will be adding more to this very soon.
|
 |
dudibob
Joined: Oct 13, 2005
# Posts: 1473
|
Posted: 2006-Apr-12 09:17
also it's a good idea to have your CSS in an external sheet using this code
<link href="website.css" rel="stylesheet" type="text/css">
replace website.css with whatever you call your css.
Doing it this way saves valueable coding space on your site, letting the search engines finding the juicy bits
|
|
g1smd
Staff
Joined: Jul 28, 2002
# Posts: 10465
|
Posted: 2006-Apr-12 23:38
The <link> tag causes problems in older browsers that cannot understand modern CSS. It can crash the browser.
I use @import to completely hide the CSS from old browsers.
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">@import url(/styles/style.css);</style>
|
|
dudibob
Joined: Oct 13, 2005
# Posts: 1473
|
Posted: 2006-Apr-13 09:18
clever stuff G1, I'm still miles behind 
|
|
rifat_m6_net
Joined: Mar 28, 2006
# Posts: 9
|
Posted: 2006-Apr-13 10:00
Nice tips, G1 which browsers were having trouble with the <> tags
|
|
SportsGuy
Staff
Joined: Aug 30, 2002
# Posts: 3603
|
Posted: 2006-Apr-13 12:40
Useful info guys - thanks to the three of you!
Duane
|
|
g1smd
Staff
Joined: Jul 28, 2002
# Posts: 10465
|
Posted: 2006-Apr-13 13:12
Anything before Mozilla, before Netscape 6, or before IE 5, I think.
Yes, those are really old browsers now, but a few people still use them. By using @import those users get completely unstyled content, but it loads and renders very fast.
|
|
rifat_m6_net
Joined: Mar 28, 2006
# Posts: 9
|
Posted: 2006-Apr-21 07:30
Inserting a Style Sheet
There are a number of ways you can apply style sheets to a web page.
Inline styles:
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:
<p style=”color: blue; font-sizer: 12pt”>
What a nice sentence this is</p>
You can see how inside the 'style' attribute the style sheet language format is similar to the examples above. You still need a ';' to seprate the properties.
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:
<head>
<style type=”text/css”>
body {background-color: #900000;
text-family: arial;
text-size: 12pt}
</style>
</head>
Internal style sheets are usually used when the web master wants to give a certain look for a certain web page that differentiates from others in a web site.
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.
Example:
<head>
<link rel= ”stylesheet” type=”text/css” href=”funkstyle.css” />
</head>
In the 'href' attribute you insert the name of your style sheet file and the browser will read the information in that file and format accordingly. Your style sheet file needs to be saved with the .css extension. The style sheet document doesn't need any <style> tags because it has already been saved as a CSS extension. A simple example of what a style sheet file can look like:
body {background-image: url(“image/discostu.jpg”);
font-family: arial;
font-size: 12pt}
p {color: blue;
font-family: aria}
h1 {font-size: 14pt}
|
|
rifat_m6_net
Joined: Mar 28, 2006
# Posts: 9
|
Posted: 2006-Apr-21 07:30
Inserting a Style Sheet
There are a number of ways you can apply style sheets to a web page.
Inline styles:
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:
<p style=”color: blue; font-sizer: 12pt”>
What a nice sentence this is</p>
You can see how inside the 'style' attribute the style sheet language format is similar to the examples above. You still need a ';' to seprate the properties.
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:
<head>
<style type=”text/css”>
body {background-color: #900000;
text-family: arial;
text-size: 12pt}
</style>
</head>
Internal style sheets are usually used when the web master wants to give a certain look for a certain web page that differentiates from others in a web site.
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.
Example:
<head>
<link rel= ”stylesheet” type=”text/css” href=”funkstyle.css” />
</head>
In the 'href' attribute you insert the name of your style sheet file and the browser will read the information in that file and format accordingly. Your style sheet file needs to be saved with the .css extension. The style sheet document doesn't need any <style> tags because it has already been saved as a CSS extension. A simple example of what a style sheet file can look like:
body {background-image: url(“image/discostu.jpg”);
font-family: arial;
font-size: 12pt}
p {color: blue;
font-family: aria}
h1 {font-size: 14pt}
|
|
rifat_m6_net
Joined: Mar 28, 2006
# Posts: 9
|
Posted: 2006-May-03 09:23
Background Properties
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.
Examples
Background Color:
body {background-color: blue} -> Color Name Value
body {background-color: #0000FF} -> Hexadecimal Values
body {background-color: rgb(0,0,255)} -> RGB Values
All of these properties do the same thing, they set the background color of the web page to blue. People have a choice of how they assign their value.
Note: A link to CSS Color Values
Background Image:
<style type="text/css">
body {background-image: url('waterbg.jpg')}
</style>
This basically assigns the image from the given URL, the URL is placed between brackets after the text 'url' as shown in the example.
Repeating a Background Image:
<style type="text/css">
body {background-image: url('waterbg.jpg');
background-repeat: repeat-x}
</style>
This background image is repeated horizontally, to repeat the image vertically simply replace repeat-x with repeat-y.
<style type="text/css">
body {background-image: url('waterbg.jpg');
background-repeat: repeat}
</style>
This repeats the image horizontally and also vertically.
Background Position:
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:
<style type="text/css">
body { background-image: url('circle.gif');
background-repeat: no-repeat;
background-position: center; }
</style>
With this a single image, in this case a little circle would appear in the center of the page.
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
|
|
rifat_m6_net
Joined: Mar 28, 2006
# Posts: 9
|
Posted: 2006-May-11 07:51
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.
<style type="text/css" media="all">
@import url("mystyle.css" ;
p {background-color: blue;}
</style>
The @import has to be placed before all other rules.
|
|
SportsGuy
Staff
Joined: Aug 30, 2002
# Posts: 3603
|
Posted: 2006-May-11 14:17
Great info rifat! Thanks for sharing.
This is the type of stuff that's useful to folks unfamiliar with CSS, but want a primer to better understand it.
|
|
You are not permitted to post messages in this forum or topic, because of one or more of the following reasons:
- You have not yet logged in, or registered properly as a member
- You are a member, but no longer have posting rights.
- This is a private forum, for which you do not have permissions.
If you are a recent member, it's possible that you simply have not yet confirmed your account. Please
check your email for a message entitled 'JimWorld Forums: Confirm Your Account' and follow the instructions
contained within.
If you cannot find this message, click here to Re-Send it.
|
If you are still experiencing problem, please read the
Login Assistance
Article for some advice on what may be causing your login not to work properly.
|
Switch to Advanced Editor and ...
Create a New Topic
or Reply to this Thread
|
|
Inbox
