Would you like to react to this message? Create an account in a few clicks or log in to continue.



 
HomeLatest imagesSearchRegisterLog in

 

 Cascading Style Sheet(CSS)s- The pretty side.

Go down 
3 posters
AuthorMessage
Spellarella
Lifer
Lifer
Spellarella


Posts : 3905
Join date : 2009-08-16
Location : Peeking out of a drain.

Cascading Style Sheet(CSS)s- The pretty side. Empty
PostSubject: Cascading Style Sheet(CSS)s- The pretty side.   Cascading Style Sheet(CSS)s- The pretty side. Icon_minitimeSat Feb 12, 2011 8:37 am

This is one of those areas I adore and induge in. It is simply what you see, whether it is a web page or as in the case here, the page you are looking out with it's red bubbles, smilie lol! s etc. CSS is the arty side of things, although simpler than databases and php, it still is tricky.


Quote :

CSS stands for Cascading Style Sheets. Its job is to control the presentation of a web page document, written in (x)HTML. The idea is that your web document, written in (x)HTML, contains the content and structure of your page, and then you apply the CSS to give the page colour and layout, keeping content separate from design. To understand more on this way of working I recommend reading SitePoint’s – What is CSS?.

There are 3 ways in which we can apply CSS styles to a web page.

1.In an external style sheet
2.In an internal style sheet
3.Using inline styles

CSS Rulesets
For an internal or external stylesheet, the CSS is made up of rulesets, which contain the selector (usually an (x)HTML tag, id or class), then the properties and their values to apply to that selector, eg.

Code:
selector1 {
    property1: value;
    property2: value;
}
selector2 {
    property3: value;
    property1: value;
}

External Style Sheets
To link to an external style sheet you can either use the link tag or import the style sheet in. With some versions of Internet Explorer still being a bit buggy with the @ import method, it’s usually a good idea to stick with the link tag.

The Link Tag
To use the link tag you insert the following code into the head section of your (x)HTML document (ie. between the
Code:
 <head>…</head>
tags).
Code:
<link type="text/css" href="/css/style.css" rel="stylesheet" />

Here the attribute href contains the path to the style sheet. This can be relative to the page eg. ../css/style.css or relative to the root of the site eg. /css/style.css. The rel then usually contains the value of ‘stylesheet’ to tell the document that the linked file is a style sheet. You can also specify a value of ‘alternate’ to specify an alternative style sheet. This won’t be loaded by default but the user can switch to it via their browser settings. However, we’ll get onto alternate style sheets another time!

The link tag is also used for linking other files so be sure to have a correct rel attribute in there. The type attribute tells the browser what type of content the file contains, which for style sheets is plain text css code. Finally, we have an optional attribute of media which lets you tell the browser how and when the style sheet should be used. Examples of media values is all (default), screen (for colour computer screens), handheld (for handheld devices eg. PDA) and print (for print preview and printing a document). If media is omitted then it is set to all by default.

The @import Method
To use the @import method we insert the following into the head section of the web document

Code:
<style type="text/css">
@import url(/css/style.css);
</style>

]The value of the path inside the brackets of the url should either be relative to the page importing the file or relative to the root, as with the href value of the link tag. Although Internet Explorer can have problems when you specify media types with the @import method, there’s no problem using this method within an external style sheet, so you could link to an external style sheet using the link tag in the top of a web document, and then in the external style sheet you could use the @import method to include various style sheets. This is ideal for large sites where multiple style sheets are used for easy structure.

The content of an external style sheet will contain rule sets which are made up of selectors and their property value pairs. A typical example could be

Code:
body {
    background-color: #ffffff;
    color: #000000;
}
h1 {
    color:#ff0000;
}etc.


Only this type of coding should be in a CSS style sheet. No HTML tags (in diamond brackets) or anything else should be there otherwise the style sheet will probably not load correctly.

The Internal Style Sheet
The internal style sheet is similar to the external version, in that all of the rules are kept together, however instead of it being applied via a link tag or @import rule, all of the rules are inserted between style tags in the head section of the document. For example

Code:
<style type="text/css>
body {
    background-color: #ffffff;
    color: #000000;
}
h1 {
    color: #ff0000;
}
</style>

]As you can see, this is the same CSS code as that of an external style sheet. Again, the style tag can take a second attribute called ‘media’ which can allow you specify different rules for different types of media, similar to the external style sheet method.

Inline Styles
Inline styles are CSS styles that are included via the style attribute for any (x)HTML tag. You add in the property value pairs into the attribute to change the style of that particular tag eg.

Code:
<body style="background-color: #ffffff; colour: #000000;">
    <h1 style="color: #ff0000;">Hello World!</h1>
    ....
</body>


The most suitable method of applying CSS to your web pages is via an external style sheet. It’s more efficient for updating, and will reduce the amount of bandwidth required on your site, as once the file is loaded for the first page visit, it will be stored in the user’s browser cache throughout the site.

You can have multiple pages calling this style sheet and if you had, for example, 100+ pages on your site and wanted to change the colour of all the text, you would only need to change the one style sheet file and upload that. All of your text changes colour instantly. Imagine having to change all 100+ pages if they used an internal style sheet or had inline styles?! Even if you use something such as Dreamweaver, which allows you to use a template, and you changed the internal style sheet in that, you would still need to upload all 100+ files.

Getting to grips.
I suggest you use only the very simplest of tools. E.g., Notepad (under Windows), TextEdit (on the Mac) or KEdit (under KDE) will do fine. Once you understand the principles, you may want to switch to more advanced tools, or even to commercial programs, such as Style Master, Dreamweaver or GoLive. But for your very first CSS style sheet, it is good not to be distracted by too many advanced features.

Don't use a wordprocessor, such as Microsoft Word or OpenOffice. They typically make files that a Web browser cannot read. For HTML and CSS, we want simple, plain text files.

Step 1 is to open your text editor (Notepad, TextEdit, KEdit, or whatever is your favorite), start with an empty window and type the following:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
</head>

<body>

<!-- Site navigation menu -->
<ul class="navbar">
  <li><a href="index.html">Home page</a>
  <li><a href="musings.html">Musings</a>
  <li><a href="town.html">My town</a>
  <li><a href="links.html">Links</a>
</ul>

<!-- Main content -->
<h1>My first styled page</h1>

<p>Welcome to my styled page!

<p>It lacks images, but at least it has style.
And it has links, even if they don't go
anywhere…

<p>There should be more here, but I don't know
what yet.

<!-- Sign and date the page, it's only polite! -->
<address>Made 5 April 2004<br>
  by myself.</address>

</body>
</html>

Copy n paste the writing. It's easier.


The first line of the HTML file above tells the browser which type of HTML this is (DOCTYPE means DOCument TYPE). In this case, it is HTML version 4.01.

Words within
Code:
< and >
are called tags and, as you can see, the document is contained within the
Code:
<html>
and
Code:
</html>
tags. Between and there is room for various kinds of information that is not shown on screen. So far it contains the title of the document, but later we will add the CSS style sheet there, too.

The
Code:
<body>
is where the actual text of the document goes. In principle, everything in there will be displayed, except for the the text inside
Code:
<!-- and -->,
which serves as a comment to ourselves. The browser will ignore it.

Of the tags in the example,
Code:
<ul>
introduces an “Unordered List”, i.e., a list in which the items are not numbered. The code]
  • [ [/code]is the start of a “List Item.” The

    is a “Paragraph.” And the is an “Anchor,” which is what creates a hyperlink.

    just a few words about the structure of our example HTML page.

    •The “ul” is a list with one hyperlink per item. This will serve as our “site navigation menu,” linking to the other pages of our (hypothetical) Web site. Presumably, all pages on our site have a similar menu.

    •The “h1” and “p” elements form the unique content of this page, while the signature at the bottom (“address”) will again be similar on all pages of the site.
    Note that I didn't close the “li” and “p” elements. In HTML (but not in XHTML), it is allowed to omit the

    Code:
    </li>
    and
    Code:
    </p>
    tags, to make the text a little easier to read. But you may add them, if you prefer.

    Let's assume that this is going to be one page of a Web site with several similar pages. As is common for current Web pages, this one has a menu that links to other pages on the hypothetical site, some unique content and a signature.

    Now select “Save As…” from the File menu, navigate to a directory/folder where you want to put it (the Desktop is fine) and save the file as “mypage.html”. Don't close the editor yet, we will need it again.

    Next, open the file in a browser. You can do that as follows: find the file with your file manager (Windows Explorer, Finder or Konqueror) and click or double click the “mypage.html” file. It should open in your default Web browser. (If it does not, open your browser and drag the file to it.)

    As you can see, the page looks plain…

    You probably see some black text on a white background, but it depends on how the browser is configured. So one easy thing we can do to make the page more stylish is to add some colors. (Leave the browser open, to use it again later.)

    We will start with a style sheet embedded inside the HTML file. Later, we will put the HTML and the CSS in separate files. Separate files is good, since it makes it easier to use the same style sheet for multiple HTML files: you only have to write the style sheet once. But for this step, we just keep everything in one file.

    We need to add a
    Code:
    <style>
    element to the HTML file. The style sheet will be inside that element. So go back to the editor window and add the following five lines in the head part of the HTML file. The lines to add are shown in red (lines 5 to 9).

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html>
    <head>
      <title>My first styled page</title>
      <style type="text/css">
      body {
        color: purple;
        background-color: #d8da3d }
      </style>
    </head>

    <body>etc

    The first line says that this is a style sheet and that it is written in CSS (“text/css”). The second line says that we add style to the “body” element. The third line sets the color of the text to purple and the next line sets the background to a sort of greenish yellow.

    Style sheets in CSS are made up of rules. Each rule has three parts:

    1.the selector (in the example: “body”), which tells the browser which part of the document is affected by the rule;
    2.the property (in the example, 'color' and 'background-color' are both properties), which specifies what aspect of the layout is being set;
    3.and the value ('purple' and '#d8da3d'), which gives the value for the style property.
    The example shows that rules can be combined. We have set two properties, so we could have made two separate rules:

    Code:
    body { color: purple }body { background-color: #d8da3d }
    but since both rules affect the body, we only wrote “body” once and put the properties and values together.

    The background of the body element will also be the background of the whole document. We haven't given any of the other elements (p, li, address…) any explicit background, so by default they will have none (or: will be transparent). The 'color' property sets the color of the text for the body element, but all other elements inside the body inherit that color, unless explicitly overridden. (We will add some other colors later.)

    Now save this file (use “Save” from the File menu) and go back to the browser window. If you press the “Reload” button, the display should change from the “boring” page to a colored (but still rather boring) page. Apart from the list of links at the top, the text should now be purple against a greenish yellow background.

    Colours can be specified in CSS in several ways. This example shows two of them: by name (“purple”) and by hexadecimal code (“#d8da3d”). There are about 140 color names and the hexadecimal codes allow for over 16 million colors.

    FONT CHANGEAnother thing that is easy to do is to make some distinction in the fonts for the various elements of the page. So let's set the text in the “Georgia” font, except for the h1 heading, which we'll give “Helvetica.”

    On the Web, you can never be sure what fonts your readers have on their computers, so we add some alternatives as well: if Georgia is not available, Times New Roman or Times are also fine, and if all else fails, the browser may use any other font with serifs. If Helvetica is absent, Geneva, Arial and SunSans-Regular are quite similar in shape, and if none of these work, the browser can choose any other font that is serif-less.

    In the text editor add the following lines (lines 7-8 and 11-13):

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html>
    <head>
      <title>My first styled page</title>
      <style type="text/css">
      body {
        font-family: Georgia, "Times New Roman",
              Times, serif;
        color: purple;
        background-color: #d8da3d }
      h1 {
        font-family: Helvetica, Geneva, Arial,
              SunSans-Regular, sans-serif }
      </style>
    </head>

    <body>
    [etc.]
    If you save the file again and press “Reload” in the browser, there should now be different fonts for the heading and the other text

    ADDING NAVIGATION BAR
    The list at the top of the HTML page is meant to become a navigation menu. Many Web sites have some sort of menu along the top or on the side of the page and this page should have one as well. We will put it on the left side, because that is a little more interesting than at the top…

    The menu is already in the HTML page. It is the
      list at the top. The links in it don't work, since our “Web site” so far consists of only one page, but that doesn't matter now. On a real Web site, there should not be any broken links, of course.

      So we need to move the list to the left and move the rest of the text a little to the right, to make room for it. The CSS properties we use for that are 'padding-left' (to move the body text) and 'position', 'left' and 'top' (to move the menu).

      There are other ways to do it. If you look for “column” or “layout” on the Learning CSS page, you will find several ready-to-run templates. But this one is OK for our purposes.

      In the editor window, add the following lines to the HTML file (lines 7 and 12-16):

      Code:
      <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
      <html>
      <head>
        <title>My first styled page</title>
        <style type="text/css">
        body {
          padding-left: 11em;
          font-family: Georgia, "Times New Roman",
                Times, serif;
          color: purple;
          background-color: #d8da3d }
        ul.navbar {
          position: absolute;
          top: 2em;
          left: 1em;
          width: 9em }
        h1 {
          font-family: Helvetica, Geneva, Arial,
                SunSans-Regular, sans-serif }
        </style>
      </head>

      <body>
      [etc.]
      If you save the file again and reload it in the browser, you should now have the list of links to the left of the main text. That already looks much more interesting, doesn't it?

      The main text has been moved over to the right and the list of links is now to the left of it, instead of above.

      The 'position: absolute' says that the ul element is positioned independently of any text that comes before or after it in the document and the 'left' and 'top' indicate what that position is. In this case, 2em from the top and 1em from the left side of the window.

      '2em' means 2 times the size of the current font. E.g., if the menu is displayed with a font of 12 points, then '2em' is 24 points. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader happens to use. Most browsers have a menu for increasing or decreasing the font size: you can try it and see that the menu increases in size as the font increases, which would not have been the case, if we had used a size in pixels instead.


      The navigation menu still looks like a list, instead of a menu. Let's add some style to it. We'll remove the list bullet and move the items to the left, to where the bullet was. We'll also give each item its own white background and a black square.

      We also haven't said what the colors of the links should be, so let's add that as well: blue for links that the user hasn't seen yet and purple for links already visited (lines 13-15 and 23-33):

      Code:
      <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
      <html>
      <head>
        <title>My first styled page</title>
        <style type="text/css">
        body {
          padding-left: 11em;
          font-family: Georgia, "Times New Roman",
                Times, serif;
          color: purple;
          background-color: #d8da3d }
        ul.navbar {
          list-style-type: none;
          padding: 0;
          margin: 0;
          position: absolute;
          top: 2em;
          left: 1em;
          width: 9em }
        h1 {
          font-family: Helvetica, Geneva, Arial,
                SunSans-Regular, sans-serif }
        ul.navbar li {
          background: white;
          margin: 0.5em 0;
          padding: 0.3em;
          border-right: 1em solid black }
        ul.navbar a {
          text-decoration: none }
        a:link {
          color: blue }
        a:visited {
          color: purple }
        </style>
      </head>

      <body>
      [etc.]


      Traditionally, browsers show hyperlinks with underlines and with colors. Usually, the colors are similar to what we specificed here: blue for links to pages that you haven't visited yet (or visited a long time ago), purple for pages that you have already seen.

      In HTML, hyperlinks are created with
      Code:
      <a>
      elements, so to specify the color, we need to add a style rule for “a”. To differentiate between visited and unvisited links, CSS provides two “pseudo-classes” (:link and :visited). They are called “pseudo-classes” to distinguish them from class attributes, that appear in the HTML directly, e.g., the class="navbar" in our example


      The final addition to the style sheet is a horizontal rule to separate the text from the signature at the bottom. We will use 'border-top' to add a dotted line above the
      Code:
      <address>
      element (lines 34-37):

      Code:
      <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
      <html>
      <head>
        <title>My first styled page</title>
        <style type="text/css">
        body {
          padding-left: 11em;
          font-family: Georgia, "Times New Roman",
                Times, serif;
          color: purple;
          background-color: #d8da3d }
        ul.navbar {
          list-style-type: none;
          padding: 0;
          margin: 0;
          position: absolute;
          top: 2em;
          left: 1em;
          width: 9em }
        h1 {
          font-family: Helvetica, Geneva, Arial,
                SunSans-Regular, sans-serif }
        ul.navbar li {
          background: white;
          margin: 0.5em 0;
          padding: 0.3em;
          border-right: 1em solid black }
        ul.navbar a {
          text-decoration: none }
        a:link {
          color: blue }
        a:visited {
          color: purple }
        address {
          margin-top: 1em;
          padding-top: 1em;
          border-top: thin dotted }
        </style>
      </head>

      <body>
      [etc.]

      ]Now our style is complete. Next, let's look at how we can put the style sheet in a separate file, so that other pages can share the same style.

      We now have an HTML file with an embedded style sheet. But if our site grows we probably want many pages to share the same style. There is a better method than copying the style sheet into every page: if we put the style sheet in a separate file, all pages can point to it.

      To make a style sheet file, we need to create another empty text file. You can choose “New” from the File menu in the editor, to create an empty window. (If you are using TextEdit, don't forget to make it plain text again, using the Format menu.)

      Then cut and paste everything that is inside the
      Code:
      <style>
      element from the HTML file into the new window. Don't copy the
      Code:
      <style> and </style>
      themselves. They belong to HTML, not to CSS. In the new editor window, you should now have the complete style sheet:

      Code:
      body {
        padding-left: 11em;
        font-family: Georgia, "Times New Roman",
              Times, serif;
        color: purple;
        background-color: #d8da3d }
      ul.navbar {
        list-style-type: none;
        padding: 0;
        margin: 0;
        position: absolute;
        top: 2em;
        left: 1em;
        width: 9em }
      h1 {
        font-family: Helvetica, Geneva, Arial,
              SunSans-Regular, sans-serif }
      ul.navbar li {
        background: white;
        margin: 0.5em 0;
        padding: 0.3em;
        border-right: 1em solid black }
      ul.navbar a {
        text-decoration: none }
      a:link {
        color: blue }
      a:visited {
        color: purple }
      address {
        margin-top: 1em;
        padding-top: 1em;
        border-top: thin dotted }

      Choose “Save As…” from the File menu, make sure that you are in the same directory/folder as the mypage.html file, and save the style sheet as “mystyle.css”.

      Now go back to the window with the HTML code. Remove everything from the
      Code:
      <style>
      tag up to and including the
      Code:
      </style>
      tag and replace it with a
      Code:
      <link>
      element, as follows (line 5):

      Code:
      <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
      <html>
      <head>
        <title>My first styled page</title>
        <link rel="stylesheet" href="mystyle.css">
      </head>

      <body>
      [etc.]
      ]This will tell the browser that the style sheet is found in the file called “mystyle.css” and since no directory is mentioned, the browser will look in the same directory where it found the HTML file.

      If you save the HTML file and reload it in the browser, you should see no change: the page is still styled the same way, but now the style comes from an external file.

      The next step is to put both files, mypage.html and mystyle.css on your Web site or play around with it. This is a basic CSS introduction.


      HEXEDECIMINAL COLOUR CODES.
      Code:
      Red  #FF0000 
      White #FFFFFF
      Turquoise #00FFFF
       Light Grey #C0C0C0
      Light Blue #0000FF 
      Dark Grey #808080
      Dark Blue  #0000A0 
      Black #000000
      Light Purple  #FF0080 
      Orange #FF8040
      Dark Purple  #800080
       Brown #804000
      Yellow #FFFF00
      Burgundy #800000
      Pastel Green #00FF00
       Forest Green #808000
      Pink #FF00FF
      Grass Green #408080
      Gray0 #150517
      Gray18 #250517
      Gray21 #2B1B17 
      Gray23 #302217 
      Gray24 #302226 
      Gray25 #342826 
      Gray26 #34282C 
      Gray27 #382D2C
      Gray28 #3b3131 
      Gray29 #3E3535 
      Gray30 #413839
      Gray31 #41383C
      Gray32 #463E3F 
      Gray34 #4A4344 
      Gray35 #4C4646 
      Gray36 #4E4848 
      Gray37 #504A4B 
      Gray38 #544E4F 
      Gray39 #565051 
      Gray40 #595454 
      Gray41 #5C5858
      Gray42 #5F5A59 
      Gray43 #625D5D 
      Gray44 #646060 
      Gray45 #666362 
      Gray46 #696565 
      Gray47 #6D6968 
      Gray48 #6E6A6B 
      Gray49 #726E6D
      Gray50 #747170
      Gray #736F6E 
      Slate Gray4 #616D7E S
      Slate Gray #657383
      Light Steel Blue4 #646D7E
      Light Slate Gray #6D7B8D
      Cadet Blue4 #4C787E
      Dark Slate Gray4 #4C7D7E
      Thistle4 #806D7E
      Medium Slate Blue #5E5A80
      Medium Purple4 #4E387E
      Midnight Blue #151B54
      Dark Slate Blue #2B3856
      Dark Slate Gray #25383C
      Dim Gray #463E41
      Cornflower Blue #151B8D
      Royal Blue4 #15317E
      Slate Blue4 #342D7E
      Royal Blue #2B60DE
      Royal Blue1 #306EFF
      Royal Blue2 #2B65EC
      Royal Blue3 #2554C7
      Deep Sky Blue #3BB9FF
      Deep Sky Blue2 #38ACEC
      Slate Blue #357EC7
      Deep Sky Blue3 #3090C7 
      Deep Sky Blue4 #25587E
      Dodger Blue #1589FF
      Dodger Blue2 #157DEC
      Dodger Blue3 #1569C7 
      Dodger Blue4 #153E7E 
      Steel Blue4 #2B547E 
      Steel Blue #4863A0
      Slate Blue2 #6960EC S
      Violet #8D38C9
      Medium Purple3 #7A5DC7
      Medium Purple #8467D7
      Medium Purple2 #9172EC
      Medium Purple1 #9E7BFF 
      Light Steel Blue #728FCE 
      Steel Blue3 #488AC7
      Steel Blue2 #56A5EC
      Steel Blue1 #5CB3FF 
      Sky Blue3 #659EC7
      Sky Blue4 #41627E
      Slate Blue #737CA1 
      Slate Blue #737CA1 S
      Slate Gray3 #98AFC7
      Violet Red #F6358A 
      Violet Red1 #F6358A 
      Violet Red2 #E4317F 
      Deep Pink #F52887 
      Deep Pink2 #E4287C 
      Deep Pink3 #C12267 
      Deep Pink4 #7D053F
      Medium Violet Red #CA226B 
      Violet Red3 #C12869 
      Firebrick #800517
      Violet Red4 #7D0541 
      Maroon4 #7D0552
      Maroon #810541
      Maroon3 #C12283
      Maroon2 #E3319D
      Maroon1 #F535AA 
      Magenta #FF00FF 
      Magenta1 #F433FF 
      Magenta2 #E238EC 
      Magenta3 #C031C7
      Medium Orchid #B048B5 
      Medium Orchid1 #D462FF 
      Medium Orchid2 #C45AEC 
      Medium Orchid3 #A74AC7
      Medium Orchid4 #6A287E 
      Purple #8E35EF 
      Purple1 #893BFF
      Purple2 #7F38EC
      Purple3 #6C2DC7
      Purple4 #461B7E
      Dark Orchid4 #571B7e
      Dark Orchid #7D1B7E
      Dark Violet #842DCE
      Dark Orchid3 #8B31C7
      Dark Orchid2 #A23BEC
      Dark Orchid1 #B041FF
      Plum4 #7E587E
      Pale Violet Red #D16587 
      Pale Violet Red1 #F778A
      Pale Violet Red2 #E56E94 
      Pale Violet Red3 #C25A7C 
      Pale Violet Red4 #7E354D
      Plum #B93B8F
      Plum1 #F9B7FF 
      Plum2 #E6A9EC 
      Plum3 #C38EC7 
      Thistle #D2B9D3
      Thistle3 #C6AEC7
      Lavender Blush2 #EBDDE2
      Lavender Blush3 #C8BBBE
      Thistle2 #E9CFEC
      Thistle1 #FCDFFF 
      Lavender #E3E4FA
      Lavender Blush #FDEEF4
      Light Steel Blue1 #C6DEFF
      Light Blue #ADDFFF
      Light Blue1 #BDEDFF
      Light Cyan #E0FFFF
      Slate Gray1 #C2DFFF
      Slate Gray2 #B4CFEC
      Light Steel Blue2 #B7CEEC 
      Turquoise1 #52F3FF
      Cyan #00FFFF
      Cyan1 #57FEFF 
      Cyan2 #50EBEC
      Turquoise2 #4EE2EC 
      Medium Turquoise #48CCCD 
      Turquoise #43C6DB
      Dark Slate Gray1 #9AFEFF
      Dark Slate Gray2 #8EEBEC
      Dark Slate Gray3 #78c7c7
      Cyan3 #46C7C7 
      Turquoise3 #43BFC7
      Cadet Blue3 #77BFC7
      Pale Turquoise3 #92C7C7
      Light Blue2 #AFDCEC
      Dark Turquoise #3B9C9C
      Cyan4 #307D7E Cyan4
      Light Sea Green #3EA99F
      Light Sky Blue #82CAFA 
      Light Sky Blue2 #A0CFEC
      Light Sky Blue3 #87AFC7
      Sky Blue #82CAFF 
      Sky Blue2 #79BAEC 
      Light Sky Blue4 #566D7E 
      Sky Blue #6698FF
      Light Slate Blue #736AFF 
      Light Cyan2 #CFECEC 
      Light Cyan3 #AFC7C7 
      Light Cyan4 #717D7D
      Light Blue3 #95B9C7 
      Light Blue4 #5E767E
      Pale Turquoise4 #5E7D7E
      witch Green4 #617C58
      Medium Aquamarine #348781
      Medium Sea Green #306754 
      Sea Green #4E8975
      Dark Green #254117
      Sea Green4 #387C44 
      Forest Green #4E9258
      Medium Forest Green #347235
      Spring Green4 #347C2C 
      Dark Olive Green4 #667C26 
      Chartreuse4 #437C17 
      Green4 #347C17
      Medium Spring Green #348017
      Spring Green #4AA02C 
      Lime Green #41A317
      Spring Green #4AA02C 
      Dark Sea Green #8BB381
      Dark Sea Green3 #99C68E 
      Green3 #4CC417
      Chartreuse3 #6CC417
      Yellow Green #52D017 
      Spring Green3 #4CC552 
      Sea Green3 #54C571 
      Spring Green2 #57E964 
      Spring Green1 #5EFB6E
      Sea Green2 #64E986
      Sea Green1 #6AFB92 
      Dark Sea Green2 #B5EAAA 
      Dark Sea Green1 #C3FDB8 
      Green #00FF00
      Lawn Green #87F717 
      Green1 #5FFB17 
      Green2 #59E817
      Chartreuse2 #7FE817 
      Chartreuse #8AFB17 
      Green Yellow #B1FB17 
      Dark Olive Green1 #CCFB5D 
      Dark Olive Green2 #BCE954 
      Dark Olive Green3 #A0C544
      Yellow #FFFF00
      Yellow1 #FFFC17
      Khaki1 #FFF380 
      Khaki2 #EDE275
      Goldenrod #EDDA74 
      Gold2 #EAC117
      Gold1 #FDD017 
      Goldenrod1 #FBB917
      Goldenrod2 #E9AB17 
      Gold #D4A017 
      Gold3 #C7A317 
      Goldenrod3 #C68E17
      Dark Goldenrod #AF7817 
      Khaki #ADA96E 
      Khaki3 #C9BE62
      Khaki4 #827839
      Dark Goldenrod1 #FBB117
      Dark Goldenrod2 #E8A317
      Dark Goldenrod3 #C58917
      Sienna1 #F87431 Sienna1
      Sienna2 #E66C2C Sienna2
      Dark Orange #F88017 
      Dark Orange1 #F87217 
      Dark Orange2 #E56717
      Dark Orange3 #C35617
      Sienna3 #C35817
      Sienna #8A4117 
      Sienna4 #7E3517 
      Indian Red4 #7E2217 
      Dark Orange3 #7E3117
      Salmon4 #7E3817
      Dark Goldenrod4 #7F5217
      Gold4 #806517
      Goldenrod4 #805817
      Light Salmon4 #7F462C
      Chocolate #C85A17 
      Coral3 #C34A2C
      Coral2 #E55B3C 
      Coral #F76541
      Dark Salmon #E18B6B 
      Salmon1 #F88158
      Salmon2 #E67451 
      Salmon3 #C36241
      Light Salmon3 #C47451 
      Light Salmon2 #E78A61 
      Light Salmon #F9966B 
      Sandy Brown #EE9A4D 
      Hot Pink #F660AB 
      Hot Pink1 #F665AB 
      Hot Pink2 #E45E9D 
      Hot Pink3 #C25283 
      Hot Pink4 #7D2252
      Light Coral #E77471 
      Indian Red1 #F75D59 
      Indian Red2 #E55451 
      Indian Red3 #C24641 
      Red #FF0000
      Red1 #F62217
      Red2 #E41B17 
      Firebrick1 #F62817 
      Firebrick2 #E42217 
      Firebrick3 #C11B17 
      Pink #FAAFBE
      Rosy Brown1 #FBBBB9
      Rosy Brown2 #E8ADAA 
      Pink2 #E7A1B0
      Light Pink #FAAFBA L
      Light Pink1 #F9A7B0
      Light Pink2 #E799A3
      Pink3 #C48793
      Rosy Brown3 #C5908E
      Rosy Brown #B38481 
      Light Pink3 #C48189
      Rosy Brown4 #7F5A58 
      Light Pink4 #7F4E52
      Pink4 #7F525D
      Lavender Blush4 #817679 
      Light Goldenrod4 #817339
      Lemon Chiffon4 #827B60
      Lemon Chiffon3 #C9C299 
      Light Goldenrod3 #C8B560 
      Light Golden2 #ECD672 
      Light Goldenrod #ECD872
       Light Goldenrod1 #FFE87C
      Lemon Chiffon2 #ECE5B6 
      Lemon Chiffon #FFF8C6
      Light Goldenrod Yellow #FAF8CC

  • Helpful or not?
    And no I didn't write it either it's another lesson I followed when I was studying for webdesign. Which I passed both elements. lol!




    Back to top Go down
    .tUrniP
    Lifer
    Lifer
    .tUrniP


    Posts : 910
    Join date : 2009-08-13

    Cascading Style Sheet(CSS)s- The pretty side. Empty
    PostSubject: Re: Cascading Style Sheet(CSS)s- The pretty side.   Cascading Style Sheet(CSS)s- The pretty side. Icon_minitimeTue Oct 18, 2011 3:56 pm

    I have to admit that I haven't read this yet ( I'm going to ) but my biggest problem with CSS is IE ( primarily IE6 ); I know that I'm not alone there, any advice?
    Back to top Go down
    Spellarella
    Lifer
    Lifer
    Spellarella


    Posts : 3905
    Join date : 2009-08-16
    Location : Peeking out of a drain.

    Cascading Style Sheet(CSS)s- The pretty side. Empty
    PostSubject: Re: Cascading Style Sheet(CSS)s- The pretty side.   Cascading Style Sheet(CSS)s- The pretty side. Icon_minitimeWed Oct 19, 2011 4:48 pm

    IE6? or IE9? or just IE in general.

    usual problems are smaller scaling, alignment and limited colours and font recognition.

    So usually to be honest you design for one maybe 2 browsers, ie or one of the others and make a note to say the sites best viewed in blah. There are step around but you have to cater for all things, like text over runs if CSS designed for IE, over runs in mozilla. Vice versa.

    Simple clean works, complicated best used for browser specific. Probably steps to combat some of the issues just means digging around to find them.

    Back to top Go down
    .tUrniP
    Lifer
    Lifer
    .tUrniP


    Posts : 910
    Join date : 2009-08-13

    Cascading Style Sheet(CSS)s- The pretty side. Empty
    PostSubject: Re: Cascading Style Sheet(CSS)s- The pretty side.   Cascading Style Sheet(CSS)s- The pretty side. Icon_minitimeWed Oct 19, 2011 5:21 pm

    Well, IE in general but quite often support back as far as IE6 will be required ( usually meaning graceful degradation ) but, while most browsers tend to follow and keep up with the standards ( or at least each other ), Microsoft seem content to just do their own thing. I usually spend upwards of 75% of my CSS time trying to workaround IE; Of course I'm slow anyway and I don't really know much but ...

    Thanks for the tips ... I much prefer clean and simple anyway so I guess I'll just get used to it.
    Back to top Go down
    Spellarella
    Lifer
    Lifer
    Spellarella


    Posts : 3905
    Join date : 2009-08-16
    Location : Peeking out of a drain.

    Cascading Style Sheet(CSS)s- The pretty side. Empty
    PostSubject: Re: Cascading Style Sheet(CSS)s- The pretty side.   Cascading Style Sheet(CSS)s- The pretty side. Icon_minitimeThu Oct 20, 2011 4:35 pm

    Go dig for some steps areound combatting the IE issue. Lots moved on since I've did this. So as it always is, fixes appear to combat the annoyance of IE.
    Back to top Go down
    buttercup

    buttercup


    Posts : 219
    Join date : 2012-02-05

    Cascading Style Sheet(CSS)s- The pretty side. Empty
    PostSubject: Re: Cascading Style Sheet(CSS)s- The pretty side.   Cascading Style Sheet(CSS)s- The pretty side. Icon_minitimeWed Mar 14, 2012 12:52 pm

    I know you said it's been a long time since you did any css but have had a chance to play around with css3?
    Back to top Go down
    Spellarella
    Lifer
    Lifer
    Spellarella


    Posts : 3905
    Join date : 2009-08-16
    Location : Peeking out of a drain.

    Cascading Style Sheet(CSS)s- The pretty side. Empty
    PostSubject: Re: Cascading Style Sheet(CSS)s- The pretty side.   Cascading Style Sheet(CSS)s- The pretty side. Icon_minitimeWed Mar 14, 2012 3:45 pm

    Other than watch Nicks video on it below. No. Have no need of it currently.

    Nicks video is here. Nicks Borders part 1
    Back to top Go down
    buttercup

    buttercup


    Posts : 219
    Join date : 2012-02-05

    Cascading Style Sheet(CSS)s- The pretty side. Empty
    PostSubject: Re: Cascading Style Sheet(CSS)s- The pretty side.   Cascading Style Sheet(CSS)s- The pretty side. Icon_minitimeWed Mar 14, 2012 4:12 pm

    Thanks for the link, looks like quite an interesting website ( and they seem to use Bootstrap 2 which is cool ).

    I find the newer technologies rather interesting, I just wish someone would wave a magic wand to make people keep their browsers up to date.
    Back to top Go down
    Spellarella
    Lifer
    Lifer
    Spellarella


    Posts : 3905
    Join date : 2009-08-16
    Location : Peeking out of a drain.

    Cascading Style Sheet(CSS)s- The pretty side. Empty
    PostSubject: Re: Cascading Style Sheet(CSS)s- The pretty side.   Cascading Style Sheet(CSS)s- The pretty side. Icon_minitimeWed Mar 14, 2012 4:33 pm

    Ahh but..... sometimes uptodate browsers can be not the wisest thing to have. Firefox had/has issues with something when it updated itself. Look at IE, many prefer the older ones than the newer ones. Its choice and what works for you.
    Back to top Go down
    buttercup

    buttercup


    Posts : 219
    Join date : 2012-02-05

    Cascading Style Sheet(CSS)s- The pretty side. Empty
    PostSubject: Re: Cascading Style Sheet(CSS)s- The pretty side.   Cascading Style Sheet(CSS)s- The pretty side. Icon_minitimeWed Mar 14, 2012 4:50 pm

    Except that failing to update holds the web development industry back and diminishes ones own online experience.
    Back to top Go down
    Spellarella
    Lifer
    Lifer
    Spellarella


    Posts : 3905
    Join date : 2009-08-16
    Location : Peeking out of a drain.

    Cascading Style Sheet(CSS)s- The pretty side. Empty
    PostSubject: Re: Cascading Style Sheet(CSS)s- The pretty side.   Cascading Style Sheet(CSS)s- The pretty side. Icon_minitimeWed Mar 14, 2012 4:55 pm

    Always a catch 22 somewhere.
    Back to top Go down
    buttercup

    buttercup


    Posts : 219
    Join date : 2012-02-05

    Cascading Style Sheet(CSS)s- The pretty side. Empty
    PostSubject: Re: Cascading Style Sheet(CSS)s- The pretty side.   Cascading Style Sheet(CSS)s- The pretty side. Icon_minitimeMon Mar 19, 2012 4:11 am

    I suppose so, it's a shame though.

    Especially since ( according to some random unverifiable survey I read ) it's still something like 30% of computer users that think their computer has the internet and that you get to it by double clicking that blue e.

    The other side to this is the people calling for a single browser approach, one used by everyone to provide a uniform experience for both users and developers. Although it could make it easier I'm not sure it would be any good for progress... any thoughts?
    Back to top Go down
    Spellarella
    Lifer
    Lifer
    Spellarella


    Posts : 3905
    Join date : 2009-08-16
    Location : Peeking out of a drain.

    Cascading Style Sheet(CSS)s- The pretty side. Empty
    PostSubject: Re: Cascading Style Sheet(CSS)s- The pretty side.   Cascading Style Sheet(CSS)s- The pretty side. Icon_minitimeMon Mar 19, 2012 10:06 am

    Trouble with a uniformed one browser is it would have to encompass everything. There lies the issue. It would be a huge file.
    Back to top Go down
    buttercup

    buttercup


    Posts : 219
    Join date : 2012-02-05

    Cascading Style Sheet(CSS)s- The pretty side. Empty
    PostSubject: Re: Cascading Style Sheet(CSS)s- The pretty side.   Cascading Style Sheet(CSS)s- The pretty side. Icon_minitimeMon Mar 19, 2012 1:48 pm

    What is this everything of which you speak?
    Back to top Go down
    Spellarella
    Lifer
    Lifer
    Spellarella


    Posts : 3905
    Join date : 2009-08-16
    Location : Peeking out of a drain.

    Cascading Style Sheet(CSS)s- The pretty side. Empty
    PostSubject: Re: Cascading Style Sheet(CSS)s- The pretty side.   Cascading Style Sheet(CSS)s- The pretty side. Icon_minitimeMon Mar 19, 2012 5:57 pm

    A browser can be made of many thing that appeal to certain groups of perople. There are the simple everyday normal general broswers. Fast browsers, programmers, downloaders, intergrated, educational, broswersand thats just the tip of the iceburg.


    A browser is complex, but getting one that is designed to fit and suit all will be impossible. A person who wants an everyday browser does not want a hefty lump if software that has all the bells, whistles and stuff that they will never use.



    Back to top Go down
    buttercup

    buttercup


    Posts : 219
    Join date : 2012-02-05

    Cascading Style Sheet(CSS)s- The pretty side. Empty
    PostSubject: Re: Cascading Style Sheet(CSS)s- The pretty side.   Cascading Style Sheet(CSS)s- The pretty side. Icon_minitimeTue Mar 20, 2012 2:53 am

    Bear in mind that the big 5 ( Chromium, Firefox, Opera, Safari and IE ) do that in 200mb or less and the better ones provide extensibility through plugins ( the best being, in my opinion, chrome web store ).

    This model allows for one to personally tailor their browser to their needs...

    I don't see why a single browser approach would necessarily lead to bloat but then I don't really know what an educational browser is so I may be missing the point.
    Back to top Go down
    Sponsored content





    Cascading Style Sheet(CSS)s- The pretty side. Empty
    PostSubject: Re: Cascading Style Sheet(CSS)s- The pretty side.   Cascading Style Sheet(CSS)s- The pretty side. Icon_minitime

    Back to top Go down
     
    Cascading Style Sheet(CSS)s- The pretty side.
    Back to top 
    Page 1 of 1

    Permissions in this forum:You cannot reply to topics in this forum
     :: Bits For PC's :: PC Problems and solutions.-
    Jump to: