HTML/CSS

Color Codes

Basic

X11

Non Dithered

Color Schemes

This one is more of a cheat sheet where you can pick out your color schemes that I have put in front of you. The codes are right inside of the boxes for your convenience. It has been mentioned to me to make a cheat sheet type of lens, so here it is for you.

 

Borders and More

The Borders

When it comes to HTML and CSS, sometimes we want to have borders around our text to spice up your pages. There are a variety of different types of borders. You have regular ones and then rounded ones. Please remember not everything works in all browsers.Internet explorer is a prime example of a browser that seems to always cause problems. Solid, dashed, dotted, solid and double are the only ones that work on all browsers as far as I know.

The Borders

Solid: <p style=”border: solid 2px #000000″>

Dotted: <p style=”border: dotted 2px #000000″>

Dashed: <p style=”border: dashed 2px #000000″>

Double: <p style=”border: double 4px #000000″>

Groove: <p style=”border: groove 4px #000000″>

Inset: <p style=”border: inset 4px #000000″>

Outset: <p style=”border: outset 4px #000000″>

Ridge: <p style=”border: ridge 2px #000000″>

 

Did You Know….

You do not have to use the same border options throughout the whole box.

Here are the other names for borders you can use:
Border-right
Border-left
Border-top
Border-bottom

How About Rounded Borders?

Creating rounded borders is simular to making regular borders, but now you have the option to round them. Here is the code to get your started. All border options are the same so you can modify it accordingly.

<p style=”border:solid 2px #DAA520; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; background: #FFE4B5; padding: 5px”>

Some Browser Information

Sorry this does not work in internet explorer, but images will fix this problem.

You may be asking me what each of these mean. The start of the code is like you normally do, but then you start adding the information in so that you have rounded corners. A radius is what makes it curve whichever way you want it. Take the -moz-border-radius: 15px; section of the code. You can actually add another number to get a variation of the same code like 2px.

This is what you get: -moz-border-radius: 2px 15px;. Remember you have to do this for each separate browser.

You may be asking why there are multiple radius’. Here is the reason. They cover different web browsers as different ones read them in different ways. No one piece of software is designed exactly the same way. Does Windows act the same way as linux or mac’s OS? No it does not. The same goes for web browsers. They are designed by different people so there are different ways it handles the same idea.

-moz is easy to understand for most people. This one is used for mozilla which is also known as firefox.

-khtml which is usually used on Konqueror which is a browser that is typically used on Linux OS.

-webkit is typically used on google and safari.

Don’t Forget About The Variations

lets take a look at the section that says: -moz-border-radius: 15px;

Here you can do other things and creating other variations it where you can set different radius’ for each corner.

-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomleft
-moz-border-radius-bottomright

Do you see a pattern here? I added to the mozilla browser the location to edit. Don’t forget to do the same thing with the other browsers too.

Font Information

I Was thinking about fonts and how its important when it comes to any type of webpage or lens. When it comes to the letters, that in my book is a font. They all have different types and yes they do have names for them. That is what I am going to cover here and much more.

What Are The Choices?

    With different operating systems, there are different fonts that are available. When a site picks a particular font that is not available on your computer, it will replace itself with a default so that you can view the font.

Windows

  • Arial
  • Comic San MS
  • Courier New
  • Impact
  • Times New Roman
  • Symbol
  • Verdana

Macintosh

  • Chicago
  • Courier
  • Geneva
  • Monaco
  • New York
  • Palitino
  • Helvetica

Unix

  • Charter
  • Courier
  • Fixed
  • Lucida
  • San Serif
  • Clean
  • Helvetica
Lets Jump Into HTML and CSS!!
Now that I have touched on fonts, it is now time to actually go into the whole HTML and CSS aspect of it. Its really more CSS than HTML though.

Lets Talk About Font Face

We talked about the font types, but how to add it in. If you plan on using the system default; you don’t have to put it in unless you really want to. so, for Times New Romans, it would be: <p style=”font-family:times new roman;”>

And How Did I get the Big Black Letter?

Now you are probably wondering how in the word that I managed to get that big black letter on the introduction paragraph. This is how I did it.<b style=”font-size: 100px; float: left; color: black; line-height: 70px; padding-top: 2px; font-family: times new roman;”>Your letter here </b> Font-size cover the size of the font. Line-height is based off of how high the line will be. We added padding for only the top. Then we added the font type which I explained before. Feel free to experiment with the numbers to see what happens. You can use this code if you want to group multiple letter together. Depending on what you are trying to do, you may have to omit everything but the font-size part. Just experiment to see what works for you.

Some Other Great Codes

Font-weight: You can use this to set the weight of the font if you don’t want it bold or normal. Just add bold or normal depending on which way you are going with it.

Font-type: This is where you can add the type to your font like italics.

Text-transform: You can use uppercase, lower with this one.

Text-decoration: You can use line-through, blink, overline, and underline with this one.

Some Other things To Note

I know you have seen other fonts floating all over the internet. If you end up using those types for your sites or lenses, you have to remember that your user won’t see that font unless your user has that font installed on their computer. What they typically would see is their default font instead. I know that they may look nice, but not everyone sees the words on the page the same. The only way that a font looks the same no matter which fonts are installed is by graphics. I don’t think you will do that just to have that effect. Just remember what may work on your computer, may not work on another person’s computer.