Notes on Styling with CSS

Wanishi

Explorer

Posts: 10

1

Sunday, February 7th 2010, 2:23pm

css inline

style= is what we use to insert css in a particular tag
In this particular case we used the following code:

	Source code
1	<p style="background-color : #ffcc66; color : blue;">

Inline css is introduced right in the page itself as we type our text. It can be very useful in forums like this one and other platforms, assuming of course that html is allowed. I must say that the current thinking within the w3c working group with html is to remove the style attribute from future html specs because is doesn't contribute to separation of content and style. But its is still a useful code to use under certain circumstances and it is very powerful because it will overwrite other style sheets such as browser defaults or author style sheets. Its best uses is for testing or diagnostic purposes before committing a style to the official sheet, or to utilize on blogs and forums if allowed.

Go to the top of the page

Wanishi

Explorer

Posts: 10

2

Wednesday, February 10th 2010, 1:22pm

Here's an interesting and very useful css style (="white-space:pre;") this style allows us to format the white space in an html body of text exactly as we type it including line breaks, spaces in between characters or symbols, writing poetry without needing tags such as BR> or p>, etc, etc. The text on this message is an example of using such CSS style which I am using inline and just for fun here are some empty brackets just to show how they will be rendered under such CSS rule: [ ] of what is can do for us { hello! } (see the space in the brackets? I can see using it when I publish poems. it saves me a lot of headaches! end of pre!

Here's the code used:

	Source code
1	<p style="white-space:pre;"> text goes here.... end the p tag: </p>

p.s. Be careful not to extend your typing into a very long line. If you do, you may lose some of your text in unknown areas at the right of the screen. This is used only for short passages like in poetry where the lines are short. If i was still using such CSS rule on this last paragraph, you wouldn't be able to read some of the text because the lines extende to the limits of your screen and need to be adjusted automatically depending on the size of your screen and its resolution. Use css pre only when needed.

Go to the top of the page

Wanishi

Explorer

Posts: 10

3

Saturday, February 13th 2010, 11:59am

Notes on Color

17 colors names on css2.1 (css2 had only 16) css2.1 added ORANGE

Color values substitute color names. Color values are usually in hexadecimal

Color in hexadecimal is represented in pairs: 00 00 00
The first pair represent how much RED in the color value (00 determines no red color in such value)
The second pair represents GREEN (how much green is going to be mixed in to get the color we want).
The third pair represents how much BLUE in the color mix is going to be blue.
In short, these are our RGB values.

If the two values in the pair are the same number, CSS allow us to create a shorthand.
In our example the shorthand would be written as such: 0 0 0 (spaces don't matter, I'm writing spaces only for illustration purposes. The CSS color value should actually be 000000 or 000 )

To be safe, don't forget the ; at the end: 000; or 000000;

It is good to know that all the colors considered 'web-safe' (the famous 216 colors) can be written as a shorthand which makes such shorthand very popular in web design.

It is worth noting however that today's computers allow us to use other than 'web-safe' colors (actually millions of possibilities) and the use of 'web-safe' colors is no longer an important issue. There are other more important considerations when choosing colors, such as contrast and many other creative variants.

In my understanding, the only reason to consider 'web-safe' colors nowadays is if we are designing a 'vanilla' type software that may be modified by some one else such as a webmaster or a power user. In that case a 'web-safe' color pallet makes sense because it makes it more universal and avoids dithering. They always give a nice smooth color on web pages and in graphics.

-----------
Links must be styled in the proper order of them to be able to work. Here's a way of remembering which ones get styled first:
L link
O
V visited
E

H hover
A active (focus)
T
E

--------------------------- example:
a:link { color : #000;}
a:visited {color : #fff;}
a:hover { background-color : yellow; color : #000; text-decoration : none;}
a:active, a:focus {background-color "#91325d; color : #fff; text-decoration : none;}

Quoted

Further reading:
Wikipedia - This is a great overall explanation of colors for the web taking also in consideration web-print combination
W3Schools : A must have code reference.

Go to the top of the page

Wanishi

Explorer

Posts: 10

4

Saturday, February 13th 2010, 2:48pm

Substituting titles with images for font enhancement

Consider the following example: www sample 1
The code is as follows:

	Source code
1	<h2>This is my title </h2> <p>This is my text... </p>

Now, I would like to substitute the title "This is my title" with an image to enhance color and a font not readily available on all browsers.
Once I create and add the image to the image folder I need to embed it between the "h2" tags.
I add the following code:

	Source code
1	<h2 style="background : url(http://metronewark.org/images/thisismytitle.gif) no-repeat;">This is my title </h2> + the rest...

And this is the result: www sample 2
Ok, both the coded title and the imaged title overlap. What we need to do here is to shift the coded title off the screen so that a visitor will wee only the image but, if the visitor's browser does not accept CSS, he or she will be able to read the coded title instead and, search engines will also read the original title.

This is one of several ways to shift the coded title away from the screen. This method is very popular. Just add: (text-indent : -9999px; )

	Source code
1 2 3	<h2 style="background : url(http://metronewark.org/images/thisismytitle.gif) no-repeat; text-indent : -9999px;">This is my title </h2> <p>This is my text... </p>

Here's the final version of the page in question: www sample 3
The coded title text was positions at -9999px to the left. If we remove the CSS markup the title will return to its original position.

Go to the top of the page

Wanishi

Explorer

Posts: 10

5

Saturday, February 13th 2010, 3:07pm

We could use the same background declaration to place a background under the tile instead of substituting the title itself.
That's exactly what happened when I tried example 2 without shifting the coded title text away from the screen.
I could add a background image such as this one: yellowbg1.gif
By using the following code:

	Source code
1	<h2 style="background : url(http://metronewark.org/images/yellowbg1.gif) no-repeat;">This is my title </h2> + the rest...

And here's the result: www Sample 4

Go to the top of the page

Wanishi

Explorer

Posts: 10

6

Friday, February 19th 2010, 2:22pm

CSS Styling for listings

Here are some of my notes on styling listings.

Take for example a simple listing: Sample 5
There is no style applied to the links or the unordered listing as shown bellow:

Source code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sample 5</title>

</head>

<body>

<div>
<h3>Links</h3>
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 4</a></li>

<li><a href="#">link 5</a></li>
<li><a href="#">link 6</a></li>
<li><a href="#">link 7</a></li>
</ul>
</div>

<div>
<h3>Links</h3>
<ul>
<li><a href="#">link 8</a></li>
<li><a href="#">link 9</a></li>
<li><a href="#">link 10</a></li>

<li><a href="#">link 11</a></li>
<li><a href="#">link 12</a></li>
<li><a href="#">link 13</a></li>
</ul>
</div>

<div>
<h3>Links</h3>
<ul>
<li><a href="#">link 14</a></li>
<li><a href="#">link 15</a></li>
<li><a href="#">link 16</a></li>

<li><a href="#">link 17</a></li>
<li><a href="#">link 18</a></li>
<li><a href="#">link 19</a></li>
</ul>
</div>
</body>
</html>

Go to the top of the page

Wanishi

Explorer

Posts: 10

7

Friday, February 19th 2010, 2:43pm

Positioning listings

Now, after applying a positioning style we stacked them as columns instead of under each other: Sample 6

On Sample 6 the following CSS declaration was added to the Head:

	Source code
1 2 3	<style type="text/css"> div { float : left; margin-right : 20px; } </style>

The float is something that requires a separate explanation and I will get back to it later but basically, it pushes all the divs to the left stacking them one after the other. If there was no margin-right : 20px; all the listing groups would be together with no spaces separating them like Sample 7

(I made the group title longer so that we could see the problem)
Well, in our sample 7 there is space but look at the titles. They are together. If there were no titles the links would be together instead. By applying a margin-right : XXpx; we are giving it breathing space.
It is worth noting that we are not using a margin-left instead. The reason is that if we had used a left margin separation instead of a right margin separation, it would affect the first column, moving it more to the right than what we probably intended to: Sample 8
(Look at the first Group title. It has been shifted to the right)

Go to the top of the page

Wanishi

Explorer

Posts: 10

8

Friday, February 19th 2010, 3:13pm

Substituting the header title with an image

Now, if we apply CSS to add an image to the title as discussed on a previous note, it will look like this: Sample 9

I know it is not the prettiest title but it gives us an idea of what can be done.

Here's H3 code added to the Div:

	Source code
1 2 3 4 5 6 7	div h3 {width: 90px; height : margin : 0; padding :0; background : url(linkgroup.gif) no-repeat; text-indent : -9999px; }

Again, the -9999px indent pushes the actual title off the screen so that we cannot read it but it is still there and, if a visitor doesn't accept CSS, the written title will be seen instead. The same goes for search engines since they don't read text in images.

Go to the top of the page

Wanishi

Explorer

Posts: 10

9

Friday, February 19th 2010, 3:42pm

Adding a background image to links

We could also add a background to the Unordered lists as such: Sample 10

Here's the added CSS declaration:

	Source code
1 2 3 4 5	div ul{ list-style-type : none; margin : 0; padding : 0 0 30px 30px; background : url(bgblue.gif) no-repeat 0 100%; }

The bullets were removed by adding the list-style-type with the property of NONE.
The 0 margin on the image places it at the bottom.
The padding gives breathing space to the links.

Go to the top of the page

Wanishi

Explorer

Posts: 10

10

Friday, February 19th 2010, 3:59pm

Adding Styling to Bullets

The following CSS code adds an image to replace standard bullets: Sample 11

Here's the added code:

	Source code
1 2 3 4	div a{padding-left : 20px; background : url(li.gif) no-repeat 0 50%; text-decoration : none; }

The 20px given to padding allows for the space between the image and the anchor (link).

Go to the top of the page

Metronewark Community Board No. 1