ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

Easy HTML Code for Creative Pages

Updated on September 5, 2012

Keep Eyes on Your Site with Creative HTML and CSS Code

I'm not one to go crazy adding color and "splash" to a page, but learning a little CSS and HTML code to spice up your content makes it unique and appealing to readers. Here I'll share some of the code tidbits that help me to make professional and appealing pages, here at Squidoo and on my own sites, without blinding my visitors or obscuring what I've written. I'll also point you to more resources for such code.

To start with, I've simply justified the text in this introduction (forced it to line up to straight edges on both sides) by adding < p style = "text-align:justify" > to the beginning--without those spaces, of course--and a < /p > to the end.

Font Size and ColorChanging a Few WordsMaking Links in Your Text

Making Boxes around TextPlacing and Sizing Pictures

Picking Your Colors

Start with Some Basics: Changing Text Color and Size

Once You Know How, It's Easy to Add Anywhere

I purposely chose a very colorful theme for this lens so that I could show you how using contrasting color can really make your text "pop" for your readers. The HTML code for changing your text fits into the code in my introduction for alighing the text on both sides. The "p" part simply tells the browser that you're starting a new paragraph and the "style" requirements allow you to change all sorts of properties for your text and to keep those changes going until you add the "/p" ending.

You simply add your HTML requirements for text-align, color, font-size, font-weight, and line-height (I'll show you how to do that in a minute). If you use those exact phrases (with the hyphens) and a colon you can vary almost every aspect of how your words appear on-screen. Separate the requirements with a semicolon and a space and make sure they're all included between quotation marks.

For this text, I've set the color as #266806 and the font size as 120% of the normal letters.

For this, the color is #732c7a, the font is set at 150% of normal with a weight of bold, and I've added a line height of 1.2em (rather than the default 1.0) to separate the normal line spacing enough so that they are spaced a little wider apart for easier reading.

But, you may say, how does the code for that look? Like so:

< p style=" color: #732C7A; font-size: 150%; line-height: 1.2em; font-weight: bold;" >

HTML doesn't care in what order you place the various criteria so you can add one change, say font size, and see whether you need to add a line height change to make it legible or you can add the line height and then the font size, if you know that you'll need to do both.

Go Back to the Top

Don't Forget:

Take the spaces before and after the < and the > out of the HTML and CSS codes posted here, if you want them to work!

Changing Small Portions of Your Text

HTML Code for Bold, Italics, and Highlights

But what if you only want to emphasize a particular portion of your text, as I did with my sneaky highlight earlier? In that case, you'll need to use the < strong > or < em > tags to make your text bold or in italics respectively. You can sneak HTML attributes into these tags with the same "style" language as in paragraph formatting. Just be sure that you remember to "close" your tags with < /strong > or < /em > when you're done or you'll change the text on the entire rest of the page! For the highlight above, I've used the background-color code instead of the font-color HTML. I'll address finding colors to use a little later, but in this instance I simply used "yellow". I wrote:

< strong style="background-color: yellow;" >

and then closed the tag after the text I wished to highlight.

Be careful playing with the size of a small part of your font. If you make it too large on any line other than the first of your paragraph, like this, you'll either overlap your text and make it unreadable or push your lines apart and make the page look uneven and unprofessional. This paragraph is an exaggerated example for effect, but repeatedly using HTML for emphasis in that way will make you look hysterical or simply like someone playing with a new toy.

Remember: if you emphasize everything, nothing stands out. These are all meant for drawing attention to key points and adding a splash of color.

Go Back to the Top

links, web, internet, safety pins, green, words
links, web, internet, safety pins, green, words

Making Text Links Better

Anchor Text and Titles and NoFollow, Oh My!

Making a few of the words in a sentence into a link that takes your reader to a different (but still relevant) page is one of the basics of HTML. It's often the first thing that people learn to do. In its most simple form, a text link is coded as follows:

< a href="URL-HERE">words that link here< /a>

As always, take the spaces out of the example and replace my words with your own. Rather than typing the URL by hand, which opens the door to typos, right click on the address bar at the top of your browser and copy it then paste it where you need it. The words that show up as the link in your finished product are called anchor text and the best use of that space is to describe to your readers where it will take them, in a brief way. If I were linking to my writing blog, for instance, I could simply use a link like One Step Forward to take you there instead of using the words "click here" which doesn't tell Google that my link is relevant.You'll notice that, if you hover over that link, some words pop up to tell you more about it. That's called a TITLE and it's a big feature in web accessibility. You add it to a link as follows:

< a href="URL-HERE" title="Link Description" >words that link here< /a>

You add the title tag just after the URL to which you are pointing your link. When someone hovers over your link or a reader bumps into it that text will tell them what to expect if they follow the link. Simple, right?

Now, in theory Google and other search engines wander over your page and follow each of your links to see that they're relevant and not spam. If your site ranks well a little of your "juice" is passed along to the sites you find worthy of including. (Isn't that a lovely theory?) But sometimes you want to include a link that takes people to a place where they can buy products. That can look spammy to Google so you want a way to tell its little bots not to follow that link. Perhaps unsurprisingly, you use the "nofollow" attribute for that.

< a href="URL-HERE" title="Link Description" rel="nofollow" >words that link here< /a>

Now I can include an affiliate link for someplace like eMusic and tell Google not to follow that link because, even though it's a great product, they have plenty of Google juice and I don't. Wait...no, it's because the link benefits me financially and, even though I'm only using it here for explanation purposes, it might look spammy and is unrelated to my topic. Nofollow essentially says, "Please don't hold this one against me, search engines!"There's one more attribute that changes a link from something that takes someone away from your page to something that opens a new page for them to browse while keeping yours open as well. That is the target attribute, as I've used above. If you click on either of the working links it will open a new browser window instead of redirecting this one. It's used like so:

< a href="URL-HERE" title="Link Description" rel="nofollow" target="_blank" >words that link here< /a>

As you can see, adding attributes to your links is easy and exceedingly useful. This works for images, too, if you insert them just after the URL, so I won't repeat this whole section below.

Go Back to the Top

Where Do You Get CSS and HTML Tips?

There are many places to find the HTML and CSS tips for creating attractive and useful web pages, whether here on Squidoo on on the Internet at large. Please share you favorite resources with other readers.

Where do you find code?

See results

Making Fancy Boxes with HTML

Set Off the Good Stuff with Color!

Let's say you wanted to add a flashy box like this to your text to draw extra attention to something or set it off from the rest of your content.

That's easy enough to do, still using the HTML < p > tag with style elements. In this case, you'll want to add border and padding attributes. The border takes size, color, and solid/dotted/dashed settings and the padding controls how much appears between the border and the lines of text. You can set the padding on each side individually but using one amount means that your text is essentially centered in that border. The HTML code looks like this:

< p style="border: solid 10px #ff6600; padding: 10px" >

That's nice, but what if you wanted to get extra-fancy and have a two-toned border? There's an HTML code for that, too. < p style="padding: 5px; border: ridge 12px red; margin: 0 auto; width: 28em;" > You can change the background color, text alignment, font size, and anything else you like with the same attributes you've already learned to use above and control the width of the box with the cleverly-titled width attribute.

This more-complicated code gets you a pretty red box around the words that you're emphasizing.

The text, border, width, and background color codes allow for an infinite variety of looks. Keep in mind, however, that some color combinations are very difficult to read and a higher contrast between the font and the background will make it easier for people with vision difficulties to see. You want people to be able to read the very words to which you're trying to draw their attention! For instance, this box is terrible and should never be used.

Can you even read the results of this HTML disaster?

Go Back to the Top

While Squidoo automatically places a picture for you in many modules, sometimes you just need to put one of the size and in the location you desire to make your lens more attractive. Naturally, you can use CSS code to achieve that end. For instance, let's say that I wanted to put that picture of Bob Ross on the left instead of the right side, where the default image appears. I've already hosted it at Photobucket and have the URL for the photo. I could simply use the HTML code

to add the picture but that would start the text at the bottom of the photo.

Since I want the text to flow around it, I add the following code: < img src=http://img.photobucket.com/albums/v394/legbamel/bob-ross.jpg style="float: left; margin-right: 5px;" />

Bob's a little big, though, and I think I'd rather have him on the right with a bigger space between him and the words. Let's try something a little different. I've added width="100" height="125" to my HTML code just after the URL and before the style attributes to bring him down to size. Then I changed the float to the right and increased the margin to ten pixels instead of 5 (and switched it to the left side of the image). He's a little less overpowering, now, and right where I want him. But what if I wanted you to click on him to go to a different site?

If you click on the imeem logo here, (right click and open it in a new tab or window, so you don't lose your place here and have to re-load) it'll take you to my lens on finding free music on-line, where you can find great new music to enjoy. All I had to do was put the image HTML in the code for my link in place of anchor text, thus: < a href="https://hubpages.com/entertainment/free-legal-music-resources" >

What About Those Colors?

How to Find HTML Codes for Colors

There you are, trying to create a classy box for your text or a border for your photograph and you want to get just the right color. What to do? Pick one of these options and get the HTML code for the color you want. It takes some trial and error to get used to how the hexadecimal system works, but you can find plenty of resources for those handy codes on-line.

Some Basics

For a quick overview of HTML and color, try the w3 Schools site. In short, black is six zeroes, white is six f's, and grey can be anything from all 3s to all b's to a nice, light #d0d0d0 or the fours I've used for the section head, here.

For colors between, each two-digit subset assigns a value to the amount of either the red, green, or blue used to make a particular color (in that order). The values run from zero to nine and then from a to f. Think of that f as "full", as in the result is "full" of that particular value. Thus, if you want a very green green, you'd choose 00ff00, as you want no red, all of the green you can get, and no blue. That's too green, though. To tone it down, let's back off toward black a bit from the "full full" designation. Perhaps some nines would work. Ah, that's better.

More Complicated HTML Colors

As you can see, the closer to zero your value for any one digit, the darker that aspect of the color will be. That's great, and you can fiddle around for a hundred years trying to find just the right shade to go with your content. That's fun but time-consuming. Instead, try some tools for getting the color you need quickly. If you use Firefox, you can install Colorzilla, which puts a little eyedropper on the bottom of your browser window. Clicking on that will give you the hex code for any color on your screen when you hover over it, allowing you to match the color of your cousin's eyes or your kitten's tail exactly. If you're loyal to Internet Explorer, try Instant Eyedropper, instead.

Hundreds of designers have dedicated their sites to helping people find colors that work together. I find ColorSchemer one of the easiest to use. Take a look and enter an HTML hex code for the color you found with your eyedropper (or just picked for your page). The software will give you a range of compatible emphasis colors and a table of more subtle options. I chose the #009900 from above, for instance, and it returned some attractive options including this nice raspberry, a color I'd not have thought to use.

For the more advanced color designer, try Color Scheme Designer 3, which lets you specify what types of matches you'd like depending on how varied you'd like your color to be. I again put in the #009900 from above and got a slightly more-red raspberry color and a nice teal accent color to go with it.

Go Back to the Top

I'm always looking for new and uncomplicated ways to make my content look just the way I like it. I'm not a fan of the fancy or flashy, but it you've spotted a mistake or know of an easier or more effective way of doing things, please add it here. I've disabled the HTML in comments so you can code away and others can see what you've written without resorting to my "spaces" technique. Thank you!

Share Comments, Correction, and Kudos Here - Add HTML or CSS Tips or Tricks to Supplement Mine

    0 of 8192 characters used
    Post Comment

    • Syeda Zainab profile image

      kashif 

      3 years ago from Rawalpindi, Pakistan

      I like your post.keep it up.

      read this post to gain more information about the topic.

      http://entertainment7899.blogspot.com/2015/08/how-...

    • profile image

      kalaivani 

      4 years ago

      I loved the way you have explained it. I'm new to writing and I find it very useful and I'll keep coming back. Thank you so much.

    • profile image

      kurtkenobi 

      5 years ago

      keep coming back so useful. thx

    • bjj james profile image

      bjj james 

      5 years ago

      Very handy.

    • JeffGilbert profile image

      JeffGilbert 

      5 years ago

      Great info, thanks for sharing these, they come in handy!! :)

    • profile image

      anonymous 

      6 years ago

      get fucked cuntaroonys

    • profile image

      anonymous 

      6 years ago

      very nice lens........... appreciated

    • profile image

      AngryBaker 

      6 years ago

      Ohh.. great tips... I need to try some of these... bookmarking

    • Pam Irie profile image

      Pam Irie 

      6 years ago from Land of Aloha

      I'm bookmarking this to add a little spice into a few lenses. It's a very helpful page and I'm excited to try out some more codes. Baby steps, right? This is fun! :)

    • Elle-Dee-Esse profile image

      Lynne Schroeder 

      6 years ago from Blue Mountains Australia

      Thanks for these great tips.

    • Brite-Ideas profile image

      Barbara Tremblay Cipak 

      6 years ago from Toronto, Canada

      Love useful HTML pages, thank you (put it on my pinterest too)

    • Hilary242 profile image

      Hilary Daglish 

      7 years ago from New Zealand

      Thank you. There are some very useful tips in here which I will try.

    • javr profile image

      javr 

      8 years ago from British Columbia, Canada

      This lens is a big help. Thanks.

    • giacombs-ramirez profile image

      gia combs-ramirez 

      8 years ago from Montana

      Thanks for some great tips! Now if I just wasn't so laaaazzzzy....Blessed by an angel!

    • WildFacesGallery profile image

      Mona 

      8 years ago from Iowa

      What an excellent lens! I am electronically challenged so anything that explains things in an easy manner is a wonderful thing. I'll be favorite-ing this lens as well. :)5*

    • tandemonimom lm profile image

      tandemonimom lm 

      9 years ago

      Excellent!

    • profile image

      dodoloco 

      9 years ago

      Wow, these tips really fill in the gaps, really useful, thank you!

    • profile image

      anonymous 

      9 years ago

      Nice topics of hints and tips. Good info there! I add extra pictures into mine sometimes besides that hotlink back to my own site. I do not recommend hotlinking to just ANY picture or other content. That would be bandwidth stealing if there is no permission, but for me on my own sites I do not care.

    • profile image

      anonymous 

      9 years ago

      I'm visiting around at the sites of my WiWon team mates this morning. Thanks for collecting this info in a way that makes good, clear sense! I liked your idea of FF = full, it will help people who are fiddling with their colors.e

    • profile image

      kimmanleyort 

      9 years ago

      Really great resources here. Especially font color and size. Thanks.

    • Mihaela Vrban profile image

      Mihaela Vrban 

      9 years ago from Croatia

      Cool idea. Clean looking lens.Will be helpful to many people!

    • oneskms profile image

      oneskms 

      9 years ago

      I really need to get to grips with this

      Great resource

    • ctavias0ffering1 profile image

      ctavias0ffering1 

      9 years ago

      Excellent lens 5*

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)