1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Simple guide to CSS

Discussion in 'CSS' started by Rifat, Apr 12, 2006.

0
  1. #1
    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:
    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 the W3C website or just do a Google search.

    Grouping selectors and rules:

    Instead of having this:
    We can have this:
    Just by using ';' to separate the properties.

    OR

    Instead of having this:
    We can have this:
    Will be adding more to this very soon.
     
    Rifat, Apr 12, 2006 IP
  2. Shoemoney

    Shoemoney $

    Messages:
    4,474
    Likes Received:
    588
    Best Answers:
    0
    Trophy Points:
    295
    #2
    Shoemoney, Apr 12, 2006 IP
  3. phd

    phd Active Member

    Messages:
    496
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    60
    #3
    phd, Apr 13, 2006 IP
  4. daskin sorge

    daskin sorge Guest

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    "font-style" is better than "font-weight" ?
     
    daskin sorge, Apr 13, 2006 IP
  5. Rifat

    Rifat Guest

    Messages:
    21
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Hmm really, is there a reason for this. I haven't had any trouble with using style so far.
     
    Rifat, Apr 13, 2006 IP
  6. Rifat

    Rifat Guest

    Messages:
    21
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Wow, thank you so much. I've been meaning to write up something like that for a while, but was just too lazy.
     
    Rifat, Apr 13, 2006 IP
  7. Rifat

    Rifat Guest

    Messages:
    21
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    I agree, that's the website i used to learn CSS
     
    Rifat, Apr 13, 2006 IP
  8. FeelLikeANut

    FeelLikeANut Peon

    Messages:
    330
    Likes Received:
    19
    Best Answers:
    0
    Trophy Points:
    0
    #8
    He was pointing out an error in your CSS. The property 'font-style' does not have a value 'bold'. It will not make text bold in either FF or IE.
     
    FeelLikeANut, Apr 13, 2006 IP
  9. Notch

    Notch Peon

    Messages:
    26
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    The initial post shows adding the stylesheet within the HTML file... not a good practice. It adds more code to the pages than is necessary and is not effiecient.

    Better to use <link href="default.css" rel="stylesheet" type="text/css" /> in the head and create the default.css file, put all styles there and then link each html file to it...
     
    Notch, Apr 14, 2006 IP
  10. FeelLikeANut

    FeelLikeANut Peon

    Messages:
    330
    Likes Received:
    19
    Best Answers:
    0
    Trophy Points:
    0
    #10
    And use the media attribute as well. Most of us are designing for the screen. Unless you know how your styles will be rendered on braille, print, speech, tty, and other devices, you should limit your styles to only the devices you are designing for. 
    <link href="screen-styles.css" type="text/css" rel="stylesheet" media="screen">
    Code (markup):
     
    FeelLikeANut, Apr 14, 2006 IP
  11. Huvet

    Huvet Member

    Messages:
    16
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    38
    #11
    Huvet, Apr 18, 2006 IP
  12. Rifat

    Rifat Guest

    Messages:
    21
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #12
    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:

    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:

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

     
    Rifat, Apr 20, 2006 IP
  13. FeelLikeANut

    FeelLikeANut Peon

    Messages:
    330
    Likes Received:
    19
    Best Answers:
    0
    Trophy Points:
    0
    #13
    eek! You're making lots of little mistakes now, Rifat.

    You use must straight, not curly quotes.
    font-size, not font-sizer.
    font-family
    font-size

    And you still have errors in your original post as well.
     
    FeelLikeANut, Apr 21, 2006 IP
  14. dna_05

    dna_05 Active Member

    Messages:
    316
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    53
    #14
    excuse me, does anyone have a more advanced guide to css?
    actually i know all the basics and stuff, but would really like to master it..
    thank you
     
    dna_05, Apr 22, 2006 IP
  15. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #15
    kk5st, Apr 22, 2006 IP
  16. CCD

    CCD Peon

    Messages:
    330
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #16
    dna05,

    You won't find a better resource for advanced CSS techniques than:

    http://www.alistapart.com/

    Though I would also highly recommend:

    http://www.456bereastreet.com/

    http://www.cssplay.co.uk/

    If you can afford to buy books, Dan Cederholm's Web Standards Solutions and Bulletproof Web Design are cheap and excellent.
     
    CCD, Apr 22, 2006 IP
  17. Rifat

    Rifat Guest

    Messages:
    21
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #17
    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:
    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:
    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:
    This background image is repeated horizontally, to repeat the image vertically simply replace repeat-x with repeat-y.
    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:
    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, May 3, 2006 IP
  18. Rifat

    Rifat Guest

    Messages:
    21
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #18
    Yes, I forgot to put off that text function. Thanks for pointing those out.

    Hmm I can't seem to edit my 2 first posts on this thread, does anyone know why?
     
    Rifat, May 3, 2006 IP
  19. Rifat

    Rifat Guest

    Messages:
    21
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #19
    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.

    The @import has to be placed before all other rules.
     
    Rifat, May 19, 2006 IP