CSS: Attributes - Part 1 [#5]

CSS: Attributes - Part 1 [#5]

Postby omoi » Sat Jun 02, 2007 12:19 am

In our past few tutorials, we have talked about the shell of CSS code, but haven't said much about the turtle; that is, we haven't talked about what goes into the code proper.

Well, we are going to talk about some of those attributes today. For the record, I am only going to talk about the attributes I use, which fall into the realms of CSS1 and CSS2. Why? Because they are more widely supported. There is a CSS3 standard with some really next features, but not all browsers can parse that kind of CSS (translation: "if you put that in your code, some browsers will 'get it', but some won't). For more about these and other CSS standards, visit w3schools.

First, I would like to talk about colors.

In this (or any other code) that asks for colors, there are usually three ways to specify colors.

Unfortunately, I only use two, so that's all I am going to tell you about. Those two are keywords and hexadecimal (or hex for short) color values.

AliceBlue
AntiqueWhite
Aqua
Aquamarine
Azure
Beige
Bisque
Black
BlanchedAlmond
Blue
BlueViolet
Brown
BurlyWood
CadetBlue
Chartreuse
Chocolate
Coral
CornflowerBlue
Cornsilk
Crimson
Cyan
DarkBlue
DarkCyan
DarkGoldenRod
DarkGray
DarkGrey
DarkGreen
DarkKhaki
DarkMagenta
DarkOliveGreen
Darkorange
DarkOrchid
DarkRed
DarkSalmon
DarkSeaGreen
DarkSlateBlue
DarkSlateGray
DarkSlateGrey
DarkTurquoise
DarkViolet
DeepPink
DeepSkyBlue
DimGray
DimGrey
DodgerBlue
FireBrick
FloralWhite
ForestGreen
Fuchsia
Gainsboro
GhostWhite
Gold
GoldenRod
Gray
Grey
Green
GreenYellow
HoneyDew
HotPink
IndianRed
Indigo
Ivory
Khaki
Lavender
LavenderBlush
LawnGreen
LemonChiffon
LightBlue
LightCoral
LightCyan
LightGoldenRodYellow
LightGray
LightGrey
LightGreen
LightPink
LightSalmon
LightSeaGreen
LightSkyBlue
LightSlateGray
LightSlateGrey
LightSteelBlue
LightYellow
Lime
LimeGreen
Linen
Magenta
Maroon
MediumAquaMarine
MediumBlue
MediumOrchid
MediumPurple
MediumSeaGreen
MediumSlateBlue
MediumSpringGreen
MediumTurquoise
MediumVioletRed
MidnightBlue
MintCream
MistyRose
Moccasin
NavajoWhite
Navy
OldLace
Olive
OliveDrab
Orange
OrangeRed
Orchid
PaleGoldenRod
PaleGreen
PaleTurquoise
PaleVioletRed
PapayaWhip
PeachPuff
Peru
Pink
Plum
PowderBlue
Purple
Red
RosyBrown
RoyalBlue
SaddleBrown
Salmon
SandyBrown
SeaGreen
SeaShell
Sienna
Silver
SkyBlue
SlateBlue
SlateGray
SlateGrey
Snow
SpringGreen
SteelBlue
Tan
Teal
Thistle
Tomato
Turquoise
Violet
Wheat
White
WhiteSmoke
Yellow
YellowGreen


Lots of colors, eh? Yeah. They are acceptable for color keywords as far as CSS goes... unless you want to validate your page at w3schools. If you are going to do that, they only have the following colors available:

aqua
black
blue
fuchsia
gray
green
lime
maroon
navy
olive
purple
red
silver
teal
white
yellow


Sad, right? Not quite. Look at this quote:

w3schools CSS color page wrote:Note: If you want your pages to validate with an HTML or a CSS validator, W3C has listed 16 color names that you can use: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. If you want to use other colors, you must specify their RGB or HEX value.


In other words, if you want the most out of your colors, then you want to use hexadecimal values. I can't list them all. Why? Because I would then have to list 16,384 colors! That's right, folks. 16,384 colors at your disposal.

Personally, I use hex colors frequently because it gives me a better control over my colors. Here's an example of a color.

Code: Select all
#520000;


Now, not going into the math behind this value, this color would give you a nice dark share of red. All hex color values start with a "#" sign and then are followed by a six-digit number. Always six. Never more. Never less. Programs will not read them with more or fewer.

Going on, in CSS, it is that simple. Watch.

Code: Select all
color:#520000;


Now, whatever tag, class or ID we attach this declaration to, it will have that nice deep red color we have come to love in the last few seconds. You can use hexadecimal values for anything that excepts colors. Even [color][/color] tags in bbcode! Try it!

Let's wrap this up with a little discussion on font.

There are many ways to handle things with font, but let's talk about font-specific things.

The font-weight attribute controls the boldness of the font. If you want your font to be bold, then you use this attribute like this:

Code: Select all
font-weight:bold;


"Easy-peasy" as they say.

If you want to work with the actual font you are using, use the font-family attribute. With this, not only can you specify the font you want to use which you can see here:

Code: Select all
font-family: Arial;


But you can even set up backup values in case someone can't read your first pick! You can set up to three choices like this:

Code: Select all
font-family: Verdana, Arial, Sans-serif;


Cool, yes? See that last value? That sans-serif value isn't a specific font. Instead, it lets your computer pick a generic sans-serif font for you.

side note wrote:What is sans-serif anyway? Well, have you ever looked closely at a font like Times New Roman? If so, you may have noticed that it looks quite a bit different from Arial. That's because on the ends of letters like m, n, or p, it has little "flags" on the ends that make it look all "professional" and sort of more "frilly" than the average Arial. They are little "tails" that stick out at the top and/or bottom of a letter.

Sans is simply a french word meaning "without".

Serif is a french word meaning "tail".

So, put them together and you have "sans-serif" or "without tail" fonts. Nice, yes? Just thought you wanted to know.


word on the street wrote:Sans-serif look better for on-screen text while serif font look better for printed media. Think about this when you make your sites.


In case you haven't noticed... wrote:Most of the values in CSS that have more than one word use a dash between words. For example "background-color" or "font-family". Noticing small details in syntax like that is crucial to learning any kind of code.


The last font attribute I would like to discuss is font-size. This is important because this and many other attributes have two ways of being defined:

1. Absolutely.
2. Relatively.

A relative font size would be something like "points". In this case, the font can be sized relative to a certain letter of the alphabet or a font's individual measurements or even the way your OS handles measuring things.

An absolute reference is usually that which cannot be changed. These look the same no matter what system, however they may or may not be able to be resized.

The reason this is important is because in some browsers (for example: firefox), you can specify the size and font type every page has unless is has its own particular font size and such defined. That means that if you want better control on the initial appearance of your font, then you want to use pixels. If you care more about the user controls of your fonts, use points or picas or something else that the user can define.

One more thing: there are also keywords for font sizes. Note that these are relative:

x-large
large
medium
small
x-small


Let's catch up here:

font-weight for boldness.

font-family for the font you want the people to see on your site.

font-size for the size of your font. Two types of sizes: absolute and relative.

For a more comprehensive list of font properties and values, check out the CSS Font Properties page on w3schools.

And stay tuned for more CSS value talk in the next tutorial.
Last edited by omoi on Wed Jun 06, 2007 1:07 am, edited 1 time in total.
Image

Read the rules.
Check this topic and make your suggestions known!
This is how we make suggestions.
User avatar
omoi
Moderator Team
Moderator Team
 
Posts: 1076
Joined: Wed May 23, 2007 8:31 pm

Re: CSS: Attributes - Part 1

Postby Brent » Sat Jun 02, 2007 2:42 am

Nice!
Image
User avatar
Brent
Premium Member
Premium Member
 
Posts: 1821
Joined: Wed May 23, 2007 8:38 pm
Location: AZ, USA

Re: CSS: Attributes - Part 1

Postby super3boy » Sat Jun 02, 2007 11:25 am

Amazing. In paint .net you can get the hex value from the color window.
Image
Image
Image
Image
User avatar
super3boy
Site Admin
Site Admin
 
Posts: 4945
Joined: Sun May 20, 2007 3:57 pm
Location: Atlanta, GA

Re: CSS: Attributes - Part 1

Postby omoi » Sun Jun 03, 2007 10:43 pm

super3boy wrote:Amazing. In paint .net you can get the hex value from the color window.


Anry color picker is an amazing piece of software for things like that. It can take any color and give you a hex value for it. Not only that, but it can also give you a list of complementary colors based on either light color frequencies (RGB colors) or the paint/pigment color palette (RYB colors).
Image

Read the rules.
Check this topic and make your suggestions known!
This is how we make suggestions.
User avatar
omoi
Moderator Team
Moderator Team
 
Posts: 1076
Joined: Wed May 23, 2007 8:31 pm

Re: CSS: Attributes - Part 1

Postby super3boy » Tue Jun 05, 2007 5:12 pm

Might try that sometime. I think there is also a firefox plug in for that.

I will have to search
Google

later for that.
Image
Image
Image
Image
User avatar
super3boy
Site Admin
Site Admin
 
Posts: 4945
Joined: Sun May 20, 2007 3:57 pm
Location: Atlanta, GA


Return to CSS

Who is online

Users browsing this forum: No registered users and 1 guest

cron