|
| | Cascading Style Sheet(CSS)s- The pretty side. | |
| | Author | Message |
---|
Spellarella Lifer
Posts : 3905 Join date : 2009-08-16 Location : Peeking out of a drain.
| Subject: Cascading Style Sheet(CSS)s- The pretty side. Sat 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 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. | |
| | | .tUrniP Lifer
Posts : 910 Join date : 2009-08-13
| Subject: Re: Cascading Style Sheet(CSS)s- The pretty side. Tue 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? | |
| | | Spellarella Lifer
Posts : 3905 Join date : 2009-08-16 Location : Peeking out of a drain.
| Subject: Re: Cascading Style Sheet(CSS)s- The pretty side. Wed 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.
| |
| | | .tUrniP Lifer
Posts : 910 Join date : 2009-08-13
| Subject: Re: Cascading Style Sheet(CSS)s- The pretty side. Wed 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. | |
| | | Spellarella Lifer
Posts : 3905 Join date : 2009-08-16 Location : Peeking out of a drain.
| Subject: Re: Cascading Style Sheet(CSS)s- The pretty side. Thu 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. | |
| | | buttercup
Posts : 219 Join date : 2012-02-05
| Subject: Re: Cascading Style Sheet(CSS)s- The pretty side. Wed 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? | |
| | | Spellarella Lifer
Posts : 3905 Join date : 2009-08-16 Location : Peeking out of a drain.
| Subject: Re: Cascading Style Sheet(CSS)s- The pretty side. Wed 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 | |
| | | buttercup
Posts : 219 Join date : 2012-02-05
| Subject: Re: Cascading Style Sheet(CSS)s- The pretty side. Wed 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. | |
| | | Spellarella Lifer
Posts : 3905 Join date : 2009-08-16 Location : Peeking out of a drain.
| Subject: Re: Cascading Style Sheet(CSS)s- The pretty side. Wed 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. | |
| | | buttercup
Posts : 219 Join date : 2012-02-05
| Subject: Re: Cascading Style Sheet(CSS)s- The pretty side. Wed Mar 14, 2012 4:50 pm | |
| Except that failing to update holds the web development industry back and diminishes ones own online experience. | |
| | | Spellarella Lifer
Posts : 3905 Join date : 2009-08-16 Location : Peeking out of a drain.
| Subject: Re: Cascading Style Sheet(CSS)s- The pretty side. Wed Mar 14, 2012 4:55 pm | |
| Always a catch 22 somewhere. | |
| | | buttercup
Posts : 219 Join date : 2012-02-05
| Subject: Re: Cascading Style Sheet(CSS)s- The pretty side. Mon 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? | |
| | | Spellarella Lifer
Posts : 3905 Join date : 2009-08-16 Location : Peeking out of a drain.
| Subject: Re: Cascading Style Sheet(CSS)s- The pretty side. Mon 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. | |
| | | buttercup
Posts : 219 Join date : 2012-02-05
| Subject: Re: Cascading Style Sheet(CSS)s- The pretty side. Mon Mar 19, 2012 1:48 pm | |
| What is this everything of which you speak? | |
| | | Spellarella Lifer
Posts : 3905 Join date : 2009-08-16 Location : Peeking out of a drain.
| Subject: Re: Cascading Style Sheet(CSS)s- The pretty side. Mon 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.
| |
| | | buttercup
Posts : 219 Join date : 2012-02-05
| Subject: Re: Cascading Style Sheet(CSS)s- The pretty side. Tue 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. | |
| | | Sponsored content
| Subject: Re: Cascading Style Sheet(CSS)s- The pretty side. | |
| |
| | | | Cascading Style Sheet(CSS)s- The pretty side. | |
|
| Permissions in this forum: | You cannot reply to topics in this forum
| |
| |
| |
|