Results 1 to 6 of 6

Thread: * Basic CSS *

  1. #1
    Junior Member
    Join Date
    Nov 2003
    Posts
    22

    * Basic CSS *

    This can be found at http://digitalzen.org/tutorials/basic-css.html as of 11-29-03

    Okay, well I've noticed a few questions recently on how I created thus and such in the appearance of my site. Well I used CSS, and in response to the questions I've recieved I've decided to start writing some tutorials on CSS to help you folks get started. Now, without further ado...

    the...
    • Tutorial on Basic CSS

    This is a tutorial on basic CSS (Cascading Style Sheet) creation. It is going to cover many of the basic fundamentals of CSS files and how they can be used to improve the appearance of a website. This particular tutorial will focus on the syntax and use of a style sheet in a webpage or site.

    --Syntax--

    Firstly, let’s discuss the syntax of a style definition. The syntax is divided into three parts:
    A selector, a property, and a value as follows:
    Code:
    selector {property: value}
    .button {background-color: transparent; color: #EEE8AA;}
    The selector is usually the HTML element you want to define, the property is the attribute you want to modify, and each property can have a value. The property and value are separated by a colon and surrounded in the { and } brackets (the curly brackets).

    As demonstrated in the above “.button” example, if you wish to specify multiple properties they should be separated by a semi-colon. The two properties above are a transparent background and a text color.
    Code:
    .button {background-color: transparent; color: #EEE8AA;}
    can also appear as follows, which is sometimes easier to read:
    Code:
    .button {
    background-color: transparent; 
    color: #EEE8AA;
    }
    Note that you can group several selectors by separating each with a comma. This will cause all the selectors in a group to share an attribute. This is demonstrated as:
    Code:
    button,textfield {
    background-color: transparent; 
    color: #EEE8AA; 
    font-family: Verdana, Arial, Helvetica;
    }
    --Class Selectors--

    With class selectors you can define different styles for the same type of element. Let’s say that your website requires two styles of paragraph and you want to automate the process. This can be done as follows:
    Code:
    p.right {text-align: right}
    p.center {text-align: center}
    With the above in your style sheet, you can identify a certain paragraph style as follows:
    Code:
    <p class=”right”>This is aligned with the right side of the page</p>
    <p class=”center”>This one, however, will be centered on the page.</p>
    Remember that only one class attribute can be applied per paragraph with the above method. You cannot apply both “right” and “center” to the same paragraph. It will not work. Another method of using a class selector is to omit the tag name in the selector as follows:
    Code:
    .center {text-align: center}
    This will create a selector that can be identified for anything (not just paragraphs) by identifying the class as ”center” using the aforementioned method.

    --ID Selectors--

    As opposed to the Class Selectors in the above section, which can be applied to several elements, ID Selectors can only be applied to one element. ID attributes must be unique within the document. Below is a demonstration that will match a p element with the id value of “p1”:
    Code:
    P#p1 {
    text-align: center;
    color: blue
    }
    Another method for this is to use a wildcard to match the first element on the page with the id value of “p1” to the style defined for “p1”
    Code:
    *#p1 {
    text-align: center;
    color: blue
    }
    --Inserting a Style Sheet--

    Now let’s discuss the methods of instituting a style sheet.
    The internal style sheet would be placed in the <head> of your document, and would be surrounded by the following tags:
    Code:
    <style type=”text/css”>
    <!-- CSS Goes Here -->
    </style>
    As stated, the CSS would be placed within the tags. It should be placed within an html comment (that’s what the <!-- and --> tags are)

    The external style sheet would be a file that was something like “stylesheet.css.” This type of file will be linked into the html document and the link should appear in the <head> of the document. The link syntax will appear as follows:
    Code:
    <link rel=StyleSheet href="stylesheet.css" title="StyleSheet">
    The above link is assuming that “stylesheet.css” is in the same directory as the file that you are linking it to. Otherwise you will need to modify the href link to suit your personal needs.

    --CSS Comments--

    Now to add comments to your CSS (if your CSS file becomes large you will be glad you have notes to remind you of what you were thinking at the time). A CSS note is surrounded by /* and */ as follows:

    /* This is a CSS comment */

    --Example CSS--

    This CSS is as used in http://digitalzen.org and is to be an example for anyone wishing to learn CSS.
    Code:
    BODY {
    background-image:url("background.jpg"); 
    background-color: #000000;
    background-attachment:fixed;
    background-repeat:no-repeat;
    background-position:center center;
    scrollbar-face-color: #000000;
    scrollbar-shadow-color: #EEE8AA;
    scrollbar-highlight-color: #000000;
    scrollbar-3dlight-color: #EEE8AA;
    scrollbar-darkshadow-color: #EEE8AA;
    scrollbar-track-color: #000000;
    scrollbar-arrow-color: #EEE8AA;
    color: #FFFFFF; font-family: Verdana, Arial, Helvetica;}
    .textfield {background-color: transparent; color: #EEE8AA; font-family: Verdana, Arial, Helvetica;}
    .button {background-color: transparent; color: #EEE8AA;}
    .checkbox {background-color: transparent; border: transparent solid 0px; font-family: verdana; font-size: 12px; color: #EEE8AA}
    A:link {COLOR: #EEE8AA; TEXT-DECORATION: none}
    A:visited {COLOR: #EEE8AA; TEXT-DECORATION: none}
    A:hover {COLOR: #EEE8AA; TEXT-DECORATION: none}
    }
    I hope you found this informative. More to come in the CSS field.

    -Zen




    This Tutorial ©2003 FallenZen. If you wish to use this tutorial on your site, please leave this credit intact.
    Check out The DigitalZen (http://www.digitalzen.org).
    \"We change by the speed of the choices that we make.\"

  2. #2
    Senior Member
    Join Date
    Nov 2001
    Posts
    4,785
    being a security site i kinda thought this was going to be about crose site scripting...oh well
    Bukhari:V3B48N826 “The Prophet said, ‘Isn’t the witness of a woman equal to half of that of a man?’ The women said, ‘Yes.’ He said, ‘This is because of the deficiency of a woman’s mind.’”

  3. #3
    Banned
    Join Date
    Apr 2003
    Posts
    3,839
    ah any tutorial is appriciated, i was about to say "Write yor own tutorials but then i notices it's your site(i guess).

  4. #4
    Senior Member
    Join Date
    Nov 2001
    Posts
    4,785
    i agree MemorY! looking over our tutorials section...we have a truly impressive collection of tuts on a wide varity of subjects. when you consider they are all written by members...well im impressed. i just though it was about cross site scripting and was rather dissappointed when it wasn't. thats all it could have been named better.

    the five posts he's made have been outstanding and yet he's only got a few anti-points. although im not going to give points to this thread i am going to give them to his 'proxy' post, that was f!@#en outstanding.
    Bukhari:V3B48N826 “The Prophet said, ‘Isn’t the witness of a woman equal to half of that of a man?’ The women said, ‘Yes.’ He said, ‘This is because of the deficiency of a woman’s mind.’”

  5. #5
    Senior Member
    Join Date
    Jan 2003
    Posts
    3,915
    Originally posted here by Tedob1
    i agree MemorY! looking over our tutorials section...we have a truly impressive collection of tuts on a wide varity of subjects. when you consider they are all written by members...well im impressed. i just though it was about cross site scripting and was rather dissappointed when it wasn't. thats all it could have been named better.

    the five posts he's made have been outstanding and yet he's only got a few anti-points. although im not going to give points to this thread i am going to give them to his 'proxy' post, that was f!@#en outstanding.
    Tedob1, I don't think you can blame him for the title.. CSS = Cascading Style Sheets.... This was your own misinterpretation. XSS = Cross Site Scripting, although it is sometimes refered to as CSS (inaccurately).

    Good Tutorial btw.

  6. #6
    Hmm, I found Google to be a tad more enlightening than the tutorials.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •