hosted by liquidweb


Go Back   Web Hosting Talk : Web Hosting Main Forums : Web Hosting Talk Tutorials : Web Design and Content Tutorials : Simple guide to CSS
Reply

Forum Jump

Simple guide to CSS

Reply Post New Thread In Web Design and Content Tutorials Subscription
 
Send news tip View All Posts Thread Tools Search this Thread Display Modes
  #1  
Old 04-21-2006, 05:09 AM
Rifat Rifat is offline
Junior Guru Wannabe
 
Join Date: Dec 2005
Posts: 95

Simple guide to CSS


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:
Quote:
<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:
Quote:
body {color: white}
body {background-color: #000000}
We can have this:
Quote:
body { color: white;
background-color: #000000 }
Just by using ';' to separate the properties.

OR

Instead of having this:
Quote:
H1 { font-style: bold }
H2 { font-style: bold }
H3 { font-style: bold }
We can have this:
Quote:
H1, H2, H3 { font-style: bold }
Will be adding more to this very soon.

__________________
Cheers,
Rifat
M6.Net - ASP Hosting, ASP.Net Web Hosting




Sponsored Links
  #2  
Old 04-25-2006, 06:49 PM
phil09 phil09 is offline
New Member
 
Join Date: Apr 2006
Location: soa paulo brazil
Posts: 1
hi rifat,
i'm really quite new to this stuff trying to design my second site, for a solo musical project. Music as media presentation involves a lot of stylistic issues which many page design progs don't cover. I tried using different fonts inside dreamweaver but many of the best ones are still enormous at size 1, then i tried javascript rollover with 0.3k jpg archives but almost all browsers use anti-JS default, so i'm looking for a CSS script or something similar to get around this ban...
any ideas?

  #3  
Old 04-26-2006, 12:18 AM
Rifat Rifat is offline
Junior Guru Wannabe
 
Join Date: Dec 2005
Posts: 95
Quote:
Originally Posted by phil09
hi rifat,
i'm really quite new to this stuff trying to design my second site, for a solo musical project. Music as media presentation involves a lot of stylistic issues which many page design progs don't cover. I tried using different fonts inside dreamweaver but many of the best ones are still enormous at size 1, then i tried javascript rollover with 0.3k jpg archives but almost all browsers use anti-JS default, so i'm looking for a CSS script or something similar to get around this ban...
any ideas?
So are you just having problems with the size of text in your web site? In CSS you can specify the size of a text and it will apply that to the relevant selectors.

If I've missed the point completely then could you please give me a link or even a screenshot of the website. Thanks

My e-mail is rifatm@m6.net

__________________
Cheers,
Rifat
M6.Net - ASP Hosting, ASP.Net Web Hosting


Sponsored Links
  #4  
Old 04-26-2006, 12:21 AM
Rifat Rifat is offline
Junior Guru Wannabe
 
Join Date: Dec 2005
Posts: 95
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:

Quote:
<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:

Quote:
<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:
Quote:
<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:

Quote:
body {background-image: url(“image/discostu.jpg”);
font-family: arial;
font-size: 12pt}
p {color: blue;
font-family: aria}
h1 {font-size: 14pt}

__________________
Cheers,
Rifat
M6.Net - ASP Hosting, ASP.Net Web Hosting


  #5  
Old 05-03-2006, 02:51 AM
Rifat Rifat is offline
Junior Guru Wannabe
 
Join Date: Dec 2005
Posts: 95
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:
Quote:
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:
Quote:
<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:
Quote:
<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.
Quote:
<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:
Quote:
<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

__________________
Cheers,
Rifat
M6.Net - ASP Hosting, ASP.Net Web Hosting


  #6  
Old 05-11-2006, 01:43 AM
Rifat Rifat is offline
Junior Guru Wannabe
 
Join Date: Dec 2005
Posts: 95
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.

Quote:
<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.

__________________
Cheers,
Rifat
M6.Net - ASP Hosting, ASP.Net Web Hosting


  #7  
Old 05-16-2006, 03:49 PM
adriantr adriantr is offline
New Member
 
Join Date: May 2006
Posts: 3
This is a great tutorial. I already know some CSS but this has taught me a few things. Thanks!

  #8  
Old 05-19-2006, 01:57 AM
Rifat Rifat is offline
Junior Guru Wannabe
 
Join Date: Dec 2005
Posts: 95
Thanks adrian, I'm glad it helped you.

__________________
Cheers,
Rifat
M6.Net - ASP Hosting, ASP.Net Web Hosting


  #9  
Old 05-25-2006, 11:19 AM
duntuk duntuk is offline
Junior Guru Wannabe
 
Join Date: Jan 2002
Location: Miami / Brooklyn, NY
Posts: 71
Here's a shorthand version example...

This is long way of writing it ( a lot of code ):

HTML Code:
<style type="text/css"> 
body {background-image: url('waterbg.jpg');
background-repeat: no-repeat;
background-color:#000000;
background-position: left top; } 
</style>
here's the same thing in shorthand (quick and clean)

HTML Code:
<style type="text/css"> 

body { background:#000 url(waterbg.jpg) left top no-repeat; }

</style>


Last edited by duntuk; 05-25-2006 at 11:23 AM. Reason: shorthand CSS
  #10  
Old 07-01-2006, 01:30 PM
cactus cactus is offline
Web Hosting Master
 
Join Date: May 2001
Posts: 1,005
Nice tutorial. I have studied some CSS only and have reached up to perhaps understanding Absolute, Relative & Static Position, z-index for the layers. I was previously using Javascript for my Rollover buttons on my site and now using CSS for the buttons rollovers it has tremendously improved the speed of the rollovers.

From your experience, could you advice what is the best solution to totally convert a whole web site to CSS. I understand that there is some kind of Editor, I can't remember the name. Is it true?

Thanks

__________________
WHO AM I? CLICK HERE!


Last edited by cactus; 07-01-2006 at 01:35 PM.
  #11  
Old 07-13-2006, 04:54 PM
BluthCompany BluthCompany is offline
Newbie
 
Join Date: Jun 2006
Posts: 8
Yes, nice tutorial. We're looking to do our next project in CSS. Thanks.

  #12  
Old 07-23-2006, 02:55 PM
wonker wonker is offline
Junior Guru Wannabe
 
Join Date: Aug 2005
Posts: 99
Hi is there a way to reduce the writing of the width and height of a box?
I'm vagely remember seeing how to reduce the css code with lots of different features , basicaly any other simplified ways that are not mentioned in this site would be very healpfull.
Here is the site : http://www.dnncreative.com/tabid/230/Default.aspx
Thanks !

  #13  
Old 08-21-2006, 08:31 PM
handles handles is offline
New Member
 
Join Date: Sep 2005
Posts: 1
Great tut you have here

  #14  
Old 09-08-2006, 08:40 PM
Connect-Hosting Connect-Hosting is offline
Junior Guru Wannabe
 
Join Date: Sep 2006
Posts: 44
Very nice i will be looking properly into that tomorrow as it's 2.40 am here and i'm abit tired to be learning stuff

  #15  
Old 09-27-2007, 02:05 PM
ninak ninak is offline
Web Hosting Evangelist
 
Join Date: Jun 2007
Location: Spring Hill, Florida
Posts: 489
I know this is an old thread, but I hope some one can answer my question. Using .css can I apply two different images to the background. One in one corner ans the other in the oppsite diagonal corner?

__________________
"To see is to see a better way, to perceive any problem clearly is to begin to create its solution. All we need is the wisdom and patience to keep looking and the love to hold what we see up to the light of understanding." ---Laurence Boldt
F.D.W. Hosting Co.


Reply

Related posts from TheWhir.com
Title Type Date Posted
Ads Available for the Second Printing of WHIR’s Annual Hottest Hosts Directory Blog 2014-04-08 16:52:36
Book Your Spot in the WHIR's 6th Annual Hottest Hosts Directory Before it's Too Late! Blog 2014-01-10 12:31:05
French Web Host Gandi Expands Platform as a Service to US Market Web Hosting News 2012-07-09 10:40:52
Video Demo: Yola Website Building Software Whir Tv 2013-10-05 06:22:33
WHIR Demo: Ecwid Shopping Cart Software Whir Tv 2013-10-05 06:23:28


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes
Postbit Selector

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off

Forum Jump
Login:
Log in with your username and password
Username:
Password:



Forgot Password?
Advertisement:
Web Hosting News:



 

X

Welcome to WebHostingTalk.com

Create your username to jump into the discussion!

WebHostingTalk.com is the largest, most influentual web hosting community on the Internet. Join us by filling in the form below.


(4 digit year)

Already a member?