HTML and CSS
HTML and CSS work closely together. Let me tell you one thing about myself. I've been playing with HTML since 98, but the past few years, i've been using it even more and most of what I have learned, I've learned on my own. I even know css which is a bit different than html, but it really does help you to make great websites. CSS picks up where html does not. One example would be the hyperlink colors. You can change those in css. You can still change the text in html, but css can change the color of the hyperlinks. You may ask what is html and css stand for? HTML is hyper text markup language and CSS is cascade style sheets.

Site Navigation

- Do you Know HTML and/or CSS?
- Basic HTML And CSS
- Do you need a book?
- More Fun Stuff
- Do You Want To Add Borders and Rounded Corners?
- Bulleted Lists
- How do I go about using a picture instead of colors for the background? Can I do that?
- Special Characters
- Now that I wrote this, do you understand?
- Do you have a favorite CSS or HTML Link?
- Looking For the Color Codes?
- Are You Looking For Premade Color Schemes?
- How About Some Graphics For Your Lenses?
- Are you Confused or just have something to say?
- Need More Help?
Do you Know HTML and/or CSS?
Basic HTML And CSS
Do you need a book?
You know you want it!!!!
HTML & XHTML: The Complete Reference (Osborne Complete Reference Series)
Amazon Price: $26.39 (as of 07/13/2009)![]()
List Price: $39.99
Used Price: $2.49
Release Date: 12/31/1969
Usually ships in 24 hours
Basic HTML

So you want to learn HTML huh? Lets start with something simple
HTML Codes you need to know
Bold - <b>
Underline - <u>
Italics - <i>
Webaddress Link - <a href="yourwebaddress.com">Webaddress Name</a> If you want the link to open up in a new window you would have to do this <a href="yourwebaddress.com" target="blank">Webaddress Name</a>
For images its similar but instead its <img src="imagewebaddress.jpg">
If you want to put the link and image together it would be like this: <a href="yourwebaddress.com"><img src="imagewebaddress.jpg"></a>
More Fun Stuff
Basic CSS

In HTML, normally to make a color for the background all you have to put in is <BGCOLOR="#colorcode"> Since squidoo does not allow this, we have to resort to css coding for backgrounds.
In CSS, the code would be
<p style="background:#colorcode">
For black background you would get: <p style="background:#000000">
Instead of using #colorcode, you can replace it with the colorname instead so you would get <p style="Background:red"> for red.
For text its simular.
<p style="color:#colorcode">
So if you want white text, you would do this:<p style="color:#ffffff"> White text here. </p>
As stated for the background the same goes for the text Instead of using #colorcode, you can replace it with the colorname instead so you would get <p style="background:red"> for red.
Squidoo does not allow html color codes, but if you were to do the html version it would be <font-color="#colorcode">
More color codes are located below in the colors section.
Do You Want To Add Borders and Rounded Corners?
-
Borders and More
-
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 brows...
Bulleted Lists
-
Bulleted Lists
-
Bullet list are one of the things we use quite often when we want to highlight facts in a lens. Up until now we were not able to put boxes around bullet lists, but that is changing now. We have come up with a way to do it.
How about adding font sizes

To add font size, you would have to do this: <p style="border: dotted 2px #000000;width:500px;font-size: 20px">
Please note that I added in is ;font-size: 20px
If you want to change the default font you would need to add this;font-family: Courier
If you want a different font, just change where it says Courier to whatever the font name you want to change to like Arial.
Now I am sure that you have seen it where there is one letter at the beginning of a sentence happens to be bigger but how do you accomplish that? Here is how: <b style="font-size: 100px; float: left; color: black; line-height: 70px; padding-top: 2px; font-family: times new roman">Your Letter Here</b>
But I want to add width and background color to it!!!

To add width, you would have to do this: <p style="border: dotted 2px #000000;width:500px;"> You Should notice that there will be an ending of </p>If you want to add text to the inside the borders like I have done with this lense,you need to put the text in between <p style="border: dotted 2px #000000;width:500px;"> and this.</p>
If the text seems too close to the edge of the borders, you can move it farther away from the border by adding ;padding to it. This is what you would get with the previous examples. <p style="border: dotted 2px #000000;width:500px;padding; 5px"> As you can tell I used 5px as the padding.
The 500px is not set in stone. Experiment with the numbers and you should see what you get. The 2px you see is how thick the border is. You can play with that too.
To add background color you need to do this: <p style="border: dotted 2px #000000;width:500px; background: #FFCCCC">
To add text color to this you need to do this: <p style="border: dotted 2px #000000;width:500px; background: #FFCCCC;color: #FFFFFF;">
As you do all of this, look at the pattern on how this is done. You may not get everything right away, but as you do it more, you will start understanding how it is done.
How do I go about using a picture instead of colors for the background? Can I do that?

Now what did I do to get this image into this box? This is what I did. <p style="background-image:url(http://i302.photobucket.com/albums/nn98/trekkieamber/plain5.png);width:500px;border: dotted 2px #000000; padding: 5px;">
Please note that is the exact address of the image that I am using. Your webaddress would be something different depending on the image that you are using.
How about alignment?

To have the text or boxes go to right or left you need to do this: <p style="border: dotted 2px #000000;width:500px; float: right; font-size: 20px">
You notice that I added ;float:right
So if you want left you'd do this:;float:left
Special Characters
" - "
& - &
< - <
> - >
© - ©
® - ®
Now that I wrote this, do you understand?
Do you have a favorite CSS or HTML Link?
If you have a favorite CSS or HTML link, please feel free to add it here. Before adding any squidoo links here, please double check that it has not been lensrolled first. I've already had people doing that.
HTML Goodies
Free html tutorials and help, images, color codes more...2 points
HTML Cheatsheet - Webmonkey
The Web Developer's Resource2 points
W3Schools Online Web Tutorials
HTML XHTML CSS JavaScript XML XSL ASP SQL ADO VBSc more...2 points
Looking For the Color Codes?
Since this lens has managed to get longer and longer, we now have a separate lens that covers colors
-
The Guide to Colors On HTML
-
My HTML and CSS lens has managed to get a bit big so I decided that I need to split it up a bit. This is what this lens is all about. What I am basically going to cover is the different colors that you can use in your own lenses. I know they all work...
Are You Looking For Premade Color Schemes?
Check out this lens.
-
HTML and CSS Color Schemes
-
This is my second to my series of CSS and HTML related lenses. The first one was a detailed lens on how to put html and CSS into your lenses. This one is more of a cheat sheet where you can pick out your color schemes that I have put in front of you....
How About Some Graphics For Your Lenses?
-
Graphics for Squidoo
-
I have created numerous graphics over the years. Some of my work is out of this world and some are just okay but nothing to write home about. I figured that this lens will be another great resource that you can use as an outstretch of my HTML and CSS...
Are you Confused or just have something to say?

If you are confused about something, post it here and i'll either answer it here in the comment box or I will edit the lense to answer that question. If you have a question or comment, it goes here too.

FunGifts4All wrote...
Great lens. Used some of this info on my newest lens Thanks for sharing.
Trekkiemelissa wrote...
in reply to jessicahoward Take your time. Grasp learn the html part first and then try with the css.
Need More Help?
Come check out my HTML and CSS Mentoring lens out. I am here to assist you.
-
HTML And CSS Mentor
-
Many of you start writing your lenses without any HTML and CSS, but as you start understanding Squidoo, you want to learn how to spice your lenses up. HTML and CSS is just the ticket that you may be looking for. Here, on this lens, you will learn fr...
by Trekkiemelissa
Related Topics
Trekkiemelissa Recommends...
Favorited By
- Spook
- grannysage
- CrypticFragments
- Slothlover
- AshleyBretting-M.S.
- monarch13
- vbright105
- timthom1
- MyChildCreatesowner
- singaporehosting
- Squidster
- Susan52
- topstuff
- MerryM
- stargazer00
- EelKat
- KathyMcGraw
- AndyPo
- The_Homeopath
- clouda9
- karmasherbs
- Bruceman
- seegreen
- RentMyGarden
- Reggie_Marigold
- Shondra
- squidoocooler
- OldGrampa
- gracie213
- Jewelsofawe
- See all 68 people





