No announcement yet.

CSS In A Nutshell

This topic is closed.
This is a sticky topic.
  • Filter
  • Time
  • Show
Clear All
new posts

  • CSS In A Nutshell

    CSS In A Nutshell

    Here’s where we put everything together. This is a list of what “CSS - Madness or Magic?” and “History On-Line” cover. It is, by no means, a complete list, but it will get you started in using CSS.

    There are times when I will have [information] enclosed in square brackets. Neither the brackets nor the contents of the brackets are to be included in the CSS information. I use that format to show that there is more than one choice for a particular CSS property. I will also use the # symbol for the same purpose.

    Adding Styles To Your Page
    <meta http-equiv=”Content-Style-Type” content-”text/css”>
    This tag tells the browser that the content is styled using CSS.

    <link href=”mystyles.css” rel=”stylesheet” type=”text/css”>
    This tag tells the browser to look for CSS information in the “mystyles” CSS page. This is the main source of style information for the page.

    <style type=”text/css”>_</style>
    This is where the style information is added. You’ll find it inside the <head> tag. If there is a conflict of information, such as two different colours specified for the same thing, between a linked stylesheet and the style information added here, this style will be the one that works. It’s handy if you have one page that is slightly different from all the others on your site. However, any styles you change here will not be affected by changes you make to the main CSS page.

    <tag style=”css information”>Text or Image</tag>
    This is called ‘inline style’ information. It makes one-time-only changes to a section. When the tag is closed, the style goes back to either the style listed in the <head> tag or on a linked CSS page.

    Text Information
    { text-align: [left/right/center/justify]}
    This aligns the page elements or the page itself to one of the four possibilities - left (default), right, center, or justify. The last value, “justify”, spreads or condenses elements and/or text so that both the left and the right margins are equal.

    { color: [name/hex/rgb]}
    This defines the colour of the foreground elements, such as text, and acts as the default colours for borders. It can be defined in one of four ways:
    • { color: red; } Predefined names - red, blue, green, black, white, etc.
    • { color: rgb(255,0,0); } RGB possible values are from 0 to 255
    • { color: #A1B2C3; } Standard hexidecimal values, preceeded by the # sign.
    • { color: #0FF; } Websafe shorthand hexidecimal values, preceeded by the # sign.
    { text-decoration: [ none/underline/overline/line-through/blink ]; }
    This replaces the HTML tags <u></u>, <strike></strike> and <blink></blink>. “Overline” is similar to “underline”, but draws the line above the text.

    { text-indent: value/%; }
    This sets the indentation of the first line of a block of text. It can be done by setting the indentation to a percentage of the block’s width or by specifying a value, either in points, pixels, or em widths (the width of the letter “m” in the current text size and font).

    Font Information
    { font-family: [font name/generic name]; }
    This replaces the <font face=> tag of HTML. Families may be single word fonts like Arial or Helvetica, multiple word fonts enclosed in quotes, such as “Times New Roman” or “Trebuchet MS”, or as one of five generic font families - serif, sans-serif, cursive, fantasy, or monospace. These last are considered ‘last resort’ families as they may not contain all the characters a page requires. Also, as they are all one-word families, they are never put inside quotes.

    { font-size: [absolute/relative/specific/%]; }
    The four ways to define font sizes are as follows:
    • Absolute sizes are predefined and depend on your browser and its settings - xx-small, x-small, small, medium, large, x-large, and xx-large.
    • There are only two relative sizes. They change the font size up or down one value from the main font size. They are “smaller” and “larger”.
    • Specific font sizes are the most common. They are written as 10px (10 pixels) or 10pt (10 points, mimicking print sizes).
    • Percentage sizes increase or decrease the main font size by the specified amount. For example, a font size of 150% on a page with a 10px font results in a font size of 15%. Conversely, a font size of 50% on a page with a 20px font size results in a font size of 10px.
    { font-weight: [normal/bold/lighter/bolder/value]; }
    Font weights are described as “normal” or “bold”, with “lighter” or “bolder” increasing or decreasing the font weight by one value. Fonts are also weighted as a numeric value between 100 and 900, counted by hundreds. A value of “400” is equal to “normal” and “700” is equal to “bold”.

    { font-style: [normal/italic/oblique]; }
    This element replaces the <i></i> HTML tag. Fonts are styled as “normal”, “italic” or “oblique”. The last two are similar in appearance and interchangeable.

    Background Information
    { background-color: [name/rgb/hex]; }
    Colour is added to a background, whether it be a page background or a section of the page, using the same methods as for text colour:
    • { background-color: red; } Predefined name - red, green, blue, black, white, etc.
    • { background-color: #A1B2C3; } Hexidecimal values
    • { background-color: rgb(104, 255, 16); } RGB values. A conversion from websafe colours to RGB is found at the end of this section.
    • { background-color: #F00; } Websafe hexidecimal shorthand values. The longhand version of #F00 is #FF0000.
    { background-image: [none/url]; }
    Background images can be set to “none” {background-image: none; } or the specific image is called up {background-image:url(“image.jpg”} or {background-image:url(“”);}

    { background-repeat: [repeat/repeat-x/repeat-y/no-repeat]; }
    Background images are displayed in one of four ways:
    • { background-repeat: repeat; } repeats the image both horizontally and vertically.
    • { background-repeat: repeat-x; } repeats the image in a horizontal row only.
    • { background-repeat: repeat-y; } repeats the image in a vertical column only.
    • { background-repeat: no-repeat; } creates only one image.
    { background-attachment: [fixed/scroll]; }
    Background images are set on a page in one of two ways. “Fixed” images are held in one place relative to the page, disappearing if the page is scrolled down beyond the edge of the image. “Scroll” allows the image to remain in a constant position relative to the window rather than the page.

    { background-position: [%/value/keyword]; }
    Background images are positioned in one of three ways
    • { background-position: 15% 10%; } - The image is positioned 15% of the page or element’s width from the left and 10% of the page or element’s height from the top.
    • { background-position: 15px 10px; } - The image is positioned 15px from the left edge and 10px from the top edge of a page or element.
    • { background-position: keyword keyword; }
    There are three keywords for each of the horizontal (left, center, right) and vertical (top, center, bottom) positions. They can be combined in the following ways:
    • top left; left top - as if both horizontal and vertical values were set to 0%.
    • top; top center; center top - as if the horizontal value was 50% and the vertical 0%
    • right top; top right - as if the horizontal value was 100% and the vertical 0%
    • left; left center; center left - as if the horizontal value was 0% and the vertical 50%
    • center; center center - as if both horizontal and vertical values were set to 50%
    • right; right center; center right - as if the horizontal value was 100% and the vertical 50%
    • bottom left; left bottom - as if the horizontal value was 0% and the vertical 100%
    • bottom; bottom center; center bottom - as if the horizontal value was 50% and the vertical 100%
    • bottom right; right bottom - as if both the horizontal and vertical values were set to 100%
    Horizontal values are calculated first, then vertical values. If only one value is given, it is applied to the horizontal position. Vertical positioning is assumed to be 50% or “center”. Numerical values may be combined. { background-position: 75% 126px; } will put the image three-quarters of the way across the page and 126 px from the top of the screen. Negative values are permitted for positioning, and keywords cannot be combined with any of the numerical values.
    Cat-herder Extraordinaire

  • #2
    Margins and Padding

    The “Content” is the area of the text (including the space between the rows of text) or image. “Content” can be an entire page or a section of the page.
    The “Padding” is the space between the content and the border.
    The “Border” is a line or set of lines, drawn around the padding and may be visible or invisible.
    The “Margin” in an invisible line enclosing the entire element or block.
    Margins, padding and borders are always set in the following order: top, right, bottom, left. Only margins may be set to negative widths.

    { margin-top: #; }, { margin-right: #; }, { margin-bottom: #; }, and { margin-left: #; }
    Margins can be set individually by using one of the above properties. Margins are measured in either percentages or specific distances.

    { margin: # # # #; }
    This is the shorthand version of the margin property. You can set the four margins as follows:
    • { margin: 10% } - sets all four margins at 10% of the page or block width.
    • { margin: 10% 15%; } - sets the top and bottom margins to 10% of the page or block and the left and right margins to 15% from the edge.
    • { margin: 5px 10px 3px; } - sets the top margin to 5px, the left and right margins to 10px and the bottom margin to 3px.
    • { margin: 1px 2px 3px 4px; } - sets the margins in the following order - top (1px), right (2px), bottom (3px), and left (4px).
    { padding-top: #; }, { padding-right: #; }, { padding-bottom: #; }, and { padding-left: #; }
    Padding can be set individually by using one of the above properties, and, like margins, can be set as either percentages or specific distances.

    { padding: #; }
    The shorthand version of the padding property can set up to four sides at once. See {margin: ####; } for more details.

    { border-top-width; #; }, { border-right-width: #; }, { border-bottom-width: #; }, and { border-left-width: #; }
    Border widths can be set individually by using one of the above properties. They can only be set by using:
    • Specific values - such as 3px or 1cm
    • Thin - creates a thin border.
    • Medium - creates a medium-width border.
    • Thick - creates a thick border.
    The thickness of the borders using the keyword method (thin, medium, thick) depends on the browser and resolution settings.

    { border-width: ####; }
    Like margins and padding, borders can be set in a shorthand property. Unlike margins and padding, however, you cannot mix keywords and specific width values on the same page.

    { border-top-color: [value]; }, { border-right-color: [value]; }, { border-bottom-color: [value]; }, { border-left-color: [value]; }, and { border-color: ####; }
    Setting border colours is identical to both setting the margins and setting text or background information. If a border colour is not specified, then the colour named in the “color” property will be used.

    {border-top-style: [style];}, {border-right-style: [style];}, {border-bottom-style: [style];}, {border-left-style: [style];}, and {border-style: ####;}
    There are 10 possible styles for a border.
    • None - No border is created. This style also forces any border-widths to 0. All browsers recognize this value.
    • Hidden - No border shows, but the border-width value doesn’t change.
    • Dotted - The border appears as a series of dots. I'm pretty sure this needs to be a minimum of 2px wide.
    • Dashed - The border appears as a series of line segments. I'm pretty sure, too, that this needs to be a minimum of 2px wide.
    • Solid - The border appears as a solid line. All browsers recognize this value.
    • Double - The border appears as two parallel lines, with the total line-space-line width equalling the border-width value. This needs to be a minimum of 3px wide in order to work.
    • Groove - The border appears to be carved into the page.
    • Ridge - The border appears to be raised from the page.
    • Inset - The area the border surrounds appears to be embedded in the page.
    • Outset - The area the border surrounds appears to be raised from the page.
    If no border-style is selected, the style is assumed to be “none”, and the border-width value will be forced to 0. Not all browsers recognize all these border styles. Some only recognize “none” and “solid”. The shorthand version { border-style: [style]; } works in the same manner as the { margin: ####;} property.

    { border-top: [width/style/color]; }, { border-right: [width/style/color]; }, { border-bottom: [width/style/color]; }, and { border-left: [width/style/color]; }
    It is possible to set all the information for a particular border in one property. For example, { border-top: medium dashed #0F0; } would create a green, dashed, medium-thickness top border.

    { border: [width/style/color]; }
    If all of your borders are to be the same width, style, and colour, you can use this shorthand property to set all four sides at once.

    {border: 1px dotted #F00; } will put a 1 pixel, dotted, red border around the element. You cannot specify the individual border widths, styles or colours using this property.

    More Information
    The information I’ve given you here is only a small portion of what CSS can do. Further information can be found in a multitude of places on the Internet, but my favourite places are:

    World Wide Web Consortium (W3C) -
    HTMLGoodies -

    If I've made a glaring error, or if there's something else you'd like to add, PM the moderators and one of us can add the information you need.
    Cat-herder Extraordinaire


    • #3
      Putting CSS To Use

      Okay, now that you know what to do, how do you do it?

      Let's go back to the name for an example. Cascading Style Sheets. The best example of a 'cascade' that I know of is a waterfall.

      Your browser is the 'water' and it will pass over many things before it gets to the bottom, your finished page.

      The first level of our 'waterfall' is the edge of the drop, the <head> section of your page. The browser sees the instructions <meta http-equiv=”Content-Style-Type” content-”text/css”> and <link href=”mystyles.css” rel=”stylesheet” type=”text/css”>. It knows two things. One that it must look for CSS instructions, and two, that it must look for an outside page of instructions, "mystyles.css".

      How does that page of CSS get created? The easiest way I know of is to use Notepad, SimpleText or some other plain text editor. Using a word processor is not a good idea.

      List the changes you want to make.

      p { font-family: Arial, Helvetica, Verdana, sans-serif; }, for example, will make all the paragraph text appear in one of those fonts.

      You can customize whatever HTML tags you wish, or you can create 'classes' like .menu {font-weight: bold; font-size: 9px; color: #F00;}. Your code for the beginning of the "Menu" section would look like this:

      <p class="menu">Menu<br>
      Item 1<br>
      Item 2<br>
      Item 3<br>
      Item 4</p>

      It will appear as 9px, bold, red text, regardless of what colour you've set the <p> tag to.

      External links to CSS pages are the first thing the browser will see. If the browser doesn't see a link, it will look for this tag:

      <style type=”text/css”> </style>

      You could, if you wished, put all your CSS for the page inside this tag, in the same manner as you added the CSS to the Notepad/SimpleText document. It would appear the same on the finished page.

      Let's say, however, that you want all the text on your pages to look the same in some ways. Put the common information, the font-family and colour, for example, in a linked sheet. If you want the colour to look different for only one page, add the <style> information to just that page.

      See the cascade? The 'water' goes over the drop, recording the information from the top of the cliff as 'the way things are'. The first rock it comes to, however, the first 'different direction', is the <style> tag. Now the 'water' is travelling along a slightly different path.

      But what if you want the text to look different again on a page? It's like having a tree branch sticking out over the falls and the water hits it. That's done inside each tag.

      <p style="font-weight: normal;">

      Simple enough, right? *lol* Probably not. Let me give you an example of pages can be done with CSS.
      Cat-herder Extraordinaire


      • #4
        Here's what I have on the CSS page.

        HTML Code:
        body {background-color: #FFF; }
        p {font-family: Arial, Helvetica, sans-serif; color: #300; font-size: 10px; font-weight: normal; text-decoration: none; border: 1px solid #303;} {font-size: 9px; font-weight: bold; text-decoration: underline; color: #003;}
        a.visited {font-weight: normal; text-decoration: none; color: #099;}
        a.hover { font-size: 12px; font-weight: normal; text-decoration: none; color: #003; background-color: #0FF;} {font-size: 10px; font-weight: bold; text-decoration: underline;}
        Here's what I have on a page where I don't want to have any borders.
        HTML Code:
        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <meta http-equiv="Content-Language" content="en-gb">
        <title>My Pages</title>
        <link rel="stylesheet" href="../mystyle.css" type="text/css">
        <meta http-equiv="Content-Style-Type" content="text/css">
        <style type="text/css">
        p { border: none;}
        <p> But there's also a section where I want to have the text underlined because it's very <span style="text-decoration: underline;">important</span>. Or maybe I want to change the appearance of a <a href="" style="text-decoration: none;">Link</a> to fit in with the page better. </p>
        <p>This part, the <style> information set inside a <span> or other HTML tag on the page contents itself, is the last 'bump in the river' that the browser will see before it presents the entire page to be viewed.
        Don't forget, computers - and browsers - can process a whole lot more information in a lot shorter time than humans can. This entire cascade, from reading the external style sheet to reading style information set within the page, takes nanoseconds. Your blink takes longer to do than a computer takes to read an HTML page.

        Cat-herder Extraordinaire


        • #5
          When I updated my pages, I decided that I didn't want to have all the links look exactly the same. The main problem is that I have two colours in my images. My original link colours hide inside one of those links. So I have to 'rearrange the furniture', so to speak.

          I could, I suppose, just change the background colours, or I could add a bit to the link information.
          HTML Code:
          a:link {font-size: 9px; font-weight: bold; text-decoration: underline; color: #003;}
          a:visited {font-weight: normal; text-decoration: none; color: #099;}
          a:hover { font-size: 12px; font-weight: normal; text-decoration: none; color: #003; background-color: #0FF;}
          a:active {font-size: 10px; font-weight: bold; text-decoration: underline;}
          This is what I'll add to it:
          a.contrast:link {color: #FF0;}
          a.contrast:visited {color: #330;}
          a.contrast:hover {color: #330; background-color: #033;}
          a.contrast:active {font-weight: normal;}
          When I write up my 'normal links' I write them as:

          <a href="mysite.htm">My Site</a>

          When I need to change the colours of the links so that they show up against a different background colour, I'd write:

          <a href="mysite.htm" class="contrast">My Site</a>

          I could, in theory, have a different set of link colour schemes for each page, just by writing up the CSS information.
          a.pageone:link {CSS: Information; }
          a.pagetwo:link {CSS: Information; }
          a.pagethree:link {CSS: Information; }
          a.pagefour:link {CSS: Information; }
          And put in the class on the appropriate page. So all the links on the first page would be written as:

          <a href="mysite.htm" class="pageone">My Site</a>

          Page 2 would be written as:

          <a href="mysite.htm" class="pagetwo">My Site</a>

          And so on.

          The only thing that you absolutely have to remember, in order for all the links to work as they should, is to have the links listed in the proper order.

          a:link - Always first because it covers the way the links are seen on the page.
          a:visited - Always second because it is the second type of link you'll see on a page.
          a:hover - Always third because you can hover over a link without having it being 'active' or selected.
          a:active - Always last.

          Always in that order and always listed, even if you're not changing anything. Just repeat what you already have for text or repeat the sections of link information that you don't want to change.

          Link information, if you like, comes as a boxed set only. There are no 'single editions'.

          Cat-herder Extraordinaire