• Whats A Twink

    Date: 2011.02.24 | Category: General | Response: 0

    I think you would be surprised at the number of times I have been asked, “What’s a Twink?” Or my, personal, favorite “So how do two men have sex?”

    If you know me, you know I am never really bothered by questions – I never mind people’s candor. What does bother me, though, is the bulk of the people who ask are trying to work the gay market. Unsuccessfully, I might add.

    So, let’s expand our webmaster knowledge. Don’t worry, I am not about to explain how two men have sex (that I will save for my story site LOL)

    I have decided, however, to give you a Gay Glossary of sorts. There are many terms that can be included here. But, I thought to start off, we will hit the basics and add to it as time goes on. Keep an eye for future articles and additions on Gay Wide Webmasters.

    Here is a list of the most common terms on the Gay Adult ‘net:

    • Twink – A buff and lean young man; a 20 something. Age and leanness make the guy a twink. The best example is your typical bar room stripper.
    • Teen – This is the same thing as in EVERY market, hot young and under twenty – but LEGAL at 18.
    • Hunk/Stud – Beautiful, built and beefcake. The guys commonly posing for calendars and such.
    • Chubs (or chubby) – Just what it sounds like, a larger man. Not just muscular weight, most often heavy set.
    • Bears – This is a HAIRY man. Not a young guy, most often over thirty, sometimes with a husky build (but not always). You will probably see this niche sold as “Real Men”.
    • Cub – This is a YOUNG hairy guy. Sort of a HAIRY TWINK…
    • Daddies – Daddies are men over thirty, who like younger guys. (Just a side note here to clear up some misconceptions, not all gay men want to do young guys!)
    • Sons – the young male counterparts to Daddies. The young of the two can be a twink, cub or teen – makes no difference. This term is based on the visual couple. For our non-gay friends think of this as an example: the businessman who goes away for the weekend with his NEICE. See the comparison? LOL
    • Transvestite – is a man who dresses as a woman. Whether it is simple underwear or all our female attire. A lot of webmasters confuse this with Transsexual.
    • Transsexual – is a person who has decided to make the complete change and have a sex change.
    • Trans Gender – this is a more general term for people who live life as the opposite sex. They are in the process of, or have completed, a sex change.

    So know go have some fun. Try to classify your friends and lovers in these terms! I enjoy it when a webmistress comes up to me and says, “I heard your interview and I think my husband is a bear. But he’s a little twink-ish. What do you think?” This just makes my day! I have to laugh at the look on their husband’s face when they think I’m going to ask to examine them or something. “Turn you head and cough – OH! You’re a Twink…”

    Along with what works, I have to offer some terms that DO NOT work. If used incorrectly or out of context, then your attempt at marketing to gay men can be dreadful.

    • Faggot – I hate this word, personally. This is a word that is as derogatory to the Gay Community as other words are to a race.
    • Nancy boy – a typically non-US term that basically is used as a derogatory manner.
    • Lil Boys – a derogatory term used primarily in the Southern and Mid-Western US. It’s derived from the negative connotation that gay men are pedophiles.
    • Gay Owned and Operated. Allow me to be blunt – If it is not true, do not say it. This is probably the most OVER used phrase in the gay adult market. So much so, it is relatively meaningless today.

    We all need to remember from time to time, the key to success in any business is knowledge. Whether you are up selling to a sponsor or designing sites, knowing some of the more common terminology in the gay community can only help your ventures in the gay adult market. And remember, do not be afraid to try and NEVER be afraid to ask.

    As always, good luck!

    Article written by Gary-Alan

  • The Successful Marketing Approach

    Date: 2011.02.24 | Category: Promotion | Response: 0

    In today’s volatile and competitive marketplace, the strategic manager must possess a sophisticated perspective regarding creating and maintaining the overall image of the organization.

    In order to accomplish this goal, marketing must play a key role, regardless of the company’s size.

    To be truly effective, a company must be up-to-date with it’s marketing ‘psyche’. In bygone times, companies concentrated on items it was able to produce, not on customer needs and wants. This type of outdated thinking will most likely lead to a rather short lifespan.

    Today, marketing is a holistic approach that is often more complex than first thought.

    What Is Marketing?

    It is a process through which an organization identifies a need and then provides a means of filling or satisfying that need.

    Customers are more informed and savvy than in the past and they expect more – in the quality of both products and service. Today’s customer is not willing to merely sit passively by and consume – he wants a voice and relationship with the companies with whom he chooses to conduct business.

    Marketing is not deciding where and how to advertise. This is only one component of the process. Effective managers make sure they have a well-defined and mapped out strategy that deals with the entire lifecycle of the process. The most successful companies have a keenly honed customer-centric marketing model.

    This model outlines a process that allows the company to determine the needs and wants of a “target market” and deliver this while instilling in the customer the belief their company’s ‘satisfaction solution’ is better value than the competition’s.

    The first step in a marketing strategy involves the identification of unmet needs within a market and delivering/developing products and/or services to meet those needs.

    Define Your Market First.

    Is it a business-to-consumer company, a business-to-business company, or both? Regardless of the target(s) a company must be able to clearly identify a common need amongst a large portion of this market, as well as that portions propensity and ability to buy that product or service.

    Once the target market has been identified it is time to do some analysis. The depth, complexity and related cost should remain proportionate to the ratio of overall business this product or service is anticipated to generate.

    Analyze Internally.

    What will be involved in creating this product or service? Is there access to all of the necessary components? How much volume can be handled? Are their efficient distribution channels? What will it cost to make or provide this? The next phase is an external analysis that looks at specific trends within the target market. With this information in hand, a company is then able to make an informed decision as to whether or not it is feasible to proceed. Now that the target market has been identified and the operational side has been flushed out, a strategy can be addressed. How a company decides to communicate its message should be in correlation to its overall marketing strategy. Whether the most effective method of conveying you message to the target audience is through traditional advertising channels, the Internet or more innovative activities, it should be apparent from the prior analysis. The final phase of a marketing strategy should examine the component of customer relationship management: What processes are in place to service our customers? How do we ensure a positive resolution of customer complaints? What performance measurements will be used to determine how well clients are being serviced? And, most importantly: How will customer relationships be maintained so they will do business with us again and again? By developing a comprehensive strategy that spans the entire lifecycle of new to repeat client, a company will find it is able to effectively address the present needs and wants of it’s target markets, as well as being able to incorporate new areas as they develop. Article written by Lee

  • Building A Surfer Trap – Stage 3

    Date: 2011.02.21 | Category: Traffic | Response: 0

    Building A Surfer Trap – Stage 3.

    You should hopefully by now have a basic looking surfer trap ready on your server and on your hard drive.

    Now we need to start to ‘dirty’ this surfer trap up a little.

    We have already added 1 pop-up console to each of the FPA’s including the Multi-Site FPA.

    For the next step in this ‘dirtying’ process we need to add some additional links onto each of the FPA’s including the Multi-Site FPA.

    On the FPA’s what you need to do is create a ‘no thank you’ link so, if your surfer does not want to visit the site for the FPA you have sent them to you can send them to an alternative.

    This no thank you link can go to one of two places, you need to decide where you feel the traffic can be best utilized however, from my experience i would highly recommend using this first method:

    Link the ‘no thank you’ text on each of the single site FPA’s to another DIFFERENT niche FPA in your surfer trap so, as an example, if your surfer is on the All Petite FPA in your trap, the ‘no thank you’ link would lead to Just Toon’s. If they decide not to go with the Just Toon’s site, the ‘no thank you’ link on this FPA would go to Gay Ultra and so on, you need to ensure however, that the ‘no thank you’ link goes to a completely different niche to the one of the FPA the surfer is currently on.

    The second option you have is to link the ‘no thank you’ text to the ARS POTD (picture of the day) program. This will be your last chance at selling the surfer to one of the ARS pay sites.

    In addition to the ‘no thank you’ link on each of the FPA’s you also need to add a small table to the Single-Site FPA’s. ideally this should be four columns across and 2 rows down. This will give you 8 places to put a one or two word link going to another different niche FPA than the one the surfer is currently viewing however, you also need to ensure that these 8 links are going to a different FPA than the ‘no thank you’ link you have created.

    The above stage is where we could potentially start to lose people in the instructions therefore if you have ANY questions or queries regardless of how small they may be please post on the forums.

    This stage should hopefully only take you a couple of hours to complete and, once you have tested all of the links and uploaded the FPA’s to your server you are all set for the next MAJOR step in this project…. Generating Fresh Traffic.

    Article written by Lee

  • Using JavaScript To Auto Scroll Text

    Date: 2011.02.24 | Category: Scripts | Response: 0

    Using JavaScript To Auto Scroll Text.

    There may come a time when you would like to have some text on a page that is simply just to big to fit on a single page. Of course, you could always create a new document for this text but, what if you could make the text actually scroll through the surfers browser?

    The following JavaScript will do just that.

    Place the following section of JavaScript coding between your <head> and </head> tags:

    <SCRIPT LANGUAGE=”JavaScript”>
    <!–

    function scrollit() {
    for (I=1; I<=1200; I++) window.scroll(1,I);
    }

    // –>
    </SCRIPT>

    Along with the following JavaScript coding someone in the Body of your page:

    <FORM>
    <INPUT type=button value=”scroll” onClick=”scrollit()”>
    </FORM>

    Have a play around with the numbers in the first section of the JavaScript to speed up and slow down the rate of scrolling until you find a speed that is easy on the eye.

    Article written by Lee

  • Using Full Page Ad’s

    Date: 2011.02.24 | Category: Promotion, Traffic | Response: 0

    Full page ad’s can be used for more than just ‘adverts’ in fact, there is a wide and varied range of uses for them, below I have detailed some of the uses that I have tried in the past and from my experience, they seem to work well enough.
    Creating A ‘Hub’ Site – By interlinking FPA’s together in a range of niches and, offering your surfers a money bar linking to other FPA’s in different niches, you can actually get some good rankings in the SE’s and, if you utilize banner exchanges or counters on your FPA ‘hub’ site you can also ensure you get a fair amount of additional traffic. One thing I like to do with my FPA hub is use it as the ‘exit’ page when a surfer leaves one of my sites. This ensures that I am getting optimum traffic for my time spent a) building sites and B) building my hub.

    A lot of people I have spoken to about ‘hub’ sites simply forget about them once they have been built, personally, I do not see the point in doing this, if you build something like this why not send your exit, top list, counter, banner exchange traffic to the first page of your ‘hub’?

    Doorway Pages.

    FPA’s also make exceptional SE doorway pages, by optimizing your image names, meta tags and text on the individual FPA’s you are not only ensuring they WILL get ranked by the SE’s but, if you ‘hub’ them together as explained above you will also get some premium listings from them.

    Filter Pages.

    What I learnt to do early on is rather than send my surfers directly to the sponsors using the ‘standard’ linking codes is to send them first to an FPA with a money bar (or table ad) on it, this way, if they click the link in error and not realize that they are going to a pay site, you can give them an option, not only to use their ‘back’ button but also, to go to a different niche or, to continue into the sponsors tour. Now that you can link directly to a specific tour page on ARS sites, this method is a good way to give your surfers a ‘fresh’ tour front page.

    PPC Listings.

    An FPA is an ideal way to get sites listed in the PPC engines, not only do you show the surfers EXACTLY what is in the site they have just clicked on but, you also have the added option of being able to utilize blur consoles and exit consoles on them.

    One other thing that I will mention, is that often, you will find that FPA’s that you have made yourself, no matter how ‘amateur’ looking they are will work better than the ‘pretty’ sponsor built FPA’s.

    Hopefully, this article has given you some ideas on how you can better utilize FPA’s and not just use them in the same manner as every other adult site on the internet. If you have some good results from using FPA’s in this manner feel free to post about it on the ARSR Support forums and likewise, if you can think of any additional uses that have not been mentioned here let us know on the forums.

    Article written by Lee

  • Using Mainstream Sponsors On Adult Sites

    Date: 2011.02.24 | Category: Sponsors | Response: 0

    With the adult industry moving more and more into the mainstream web every week that passes as late i thought it would be an idea to show you guys how it is possible to use mainstream sponsor programs on your adult sites to build up a steady commission check even when a surfer going to your adult site doesnt actually buy anything from your adult sponsor.

    Mainstream Sponsor Programs – The Choices.

    The first thing that you need to do is to choose a mainstream sponsor that offers you a good choice of products / services to market to your surfers mainstream affiliate programs such as Click Bank, Commission Junction and, Amazon.com are all good places to find a selection of mainstream products and services you can offer your surfers in addition to the adult sponsors you currently use.

    Mainstream Affiliate Programs – Setting Up.

    The first thing that you need to do however in order to offer the mainstream affiliate program products to your surfers is to register a generic, non-adult domain name and, instantly get this domain setup on your current web server.

    This will be the domain name you use for all correspondence between the mainstream affiliate networks and yourself in addition, this will also be the ONLY domain that you utilize the mainstream linking codes on.

    Using Mainstream Sponsors – Getting Started.

    The first thing that you need to do now you have your domain and mainstream affiliate networks sorted out is to build a couple of specific ‘doorway pages’ on your new generic domain name. This could include something like an article or product review or perhaps something as simple as an image of the product and a short description which you can use to lead the surfer into the mainstream affiliate programs site, either way, the idea is to have the root of the domain 100% free of adult content and utilize specific doorway pages which you can link to from your adult sites.

    Generating Mainstream Traffic.

    Onto the really easy part, your current free sites all have an enter and exit link correct? If so then you are already half way finished, all you now need to do is to ensure that EVERY SINGLE exit link goes to your mainstream doorway page for a specific product or group of products. Make sure that you do not link to the root of your generic domain at any time but only to specific doorways and, that each of these doorways has a link to the root domain.

    By linking to your generic site in this way, you are enabling the surfer to choose whether they first of all, want to look at your adult site or, they want to leave the site and go to your mainstream affiliate network sponsor in the process giving you the potential of making a sale at the mainstream affiliate program.

    Mainstream Sponsor Programs – An Overview.

    By utilizing mainstream affiliate programs in this way you are not only potentially increasing your bottom lines but, you are also utilizing every single click that you get both to and from your site, to often webmasters send their exit links to places like disney.com or google.com and in doing so, they lose out on potential incomes, hopefully when you start marketing your exit links in the manner explained above you will begin to see the benefit of how both adult and, mainstream sponsors can be used in conjunction with each other in order to increase your bottom line profits.

    Article written by Lee

  • Getting Webmaster Traffic To Your Design Site

    Date: 2011.02.22 | Category: General, Promotion | Response: 0

    Just starting in the design biz? Well you’re going to need some traffic to your design work. You need to get your name out to as many people as humanly possible. If you don’t have the contacts, then you don’t have the work. Network, communicate, and setup your portfolio. These are the 3 most important steps when starting your design company, preceding these three steps are advertising and demonstrating.

    When I first started designing, I had no clue what I was doing except for designing websites. I knew I needed clients, but had no idea where to start. I met up with a ouple of other webmasters one night. I told them I had just started and was looking for some work. They took me in and taught me the trade. They showed me a few tricks in how to design things much quicker, and also subconsciously taught me to make sure as many people as possible see my work, and that they know who its from.

    I worked with my friends for a few months when things started to get slow, so I took it upon myself to start my own company. I still got outsourced work from them, but now was taking on my own clients, but I had forgotten one important step. Advertising, the biggest step to forget. So I started posting on message boards to get my name in the dirt. I received a few clients, but nothing large. Then one day out of the blue a man came to me and wanted 4 pay sites designed. Wow, a real client at last. He said he saw my posts on a resource forum and decided to use me for his work.

    I worked for this client for about 2 months, and more and more people were coming to me. I had been doing something good, but work started to slow and finally I realized I had been working for the same few clients and had not been getting anyone else in the door. Maybe board posting wasn’t enough? Exactly, its not, I asked around to see what I could do I had gotten a few suggestions like banner trades, recip’s, work for advertising. So I did them all. And soon enough I had more clients than I could shake a stick at.

    Network.

    Talk to people, people that are in the biz. Webmasters and designers. Talk to anyone you possibly can that could further spread your name of even bring work to you. If you do not network, then don’t plan on anything coming your way.

    Communicate.

    Get on boards, ICQ, AIM, MSN, whatever. Just make sure that people see you and know you are there. Send them emails with different offers, not spam, but personal emails. Take it upon yourself to try and get your name into the field.

    Portfolio.

    If you do not have one of these, then you might as well try to sell a spider to an arachnophobe. Design some fakes sites if you don’t have anything to show. Do some banners, tours, anything that shows the potential of your work. Make sure you present it as efficiently as possible. People do not want to root around not knowing what they are looking at.

    Advertise.

    Make banners, buttons, links, ads, and anything that you can stick your name on. Get listed on any and all Webmaster resource sites, and design sites. This will help you establish a name base and let people know you are around.

    Demonstrate.

    Write articles for resource sites, create different tutorials also, this will let people know you know what your doing. The more people that like your ideas, the more they will like you. Therefore the more likely you will get work.

    Follow these steps as I did and you will be on your way to having clients beating down your door. Also, make sure you really have something to offer before trying to sell your work. Be unique in what you design and how you present it. Clients love it when their sites are different from others, obviously.

    Article written by John

  • Displaying Special Characters On Your HTML Pag

    Date: 2011.02.22 | Category: WebDesign | Response: 0

    In order to display certain characters within your HTML pages, you must use a special code. The codes below display the HTML code and the character when displayed on your web page. To use any of the characters displayed within the chart, copy & paste the HTML code to the left of the character you would like to use.

    HTML Code Browser View HTML Code Browser View HTML Code Browser View HTML Code Browser View
    &copy; © &#33; ! &#95; _ &#157; 
    &reg; ® &#34; &#96; ` &#158; ž
    &nbsp; &#35; ` &#97; a &#159; Ÿ
    &quot; &#36; $ &#98; b &#160;
    &amp; & &#37; % &#99; c &#161; ¡
    &lt; < &#38; & &#100; d &#162; ¢
    &gt; > &#39; &#101; e &#163; £
    &Agrave; À &#40; ( &#102; f &#164; ¤
    &Aacute; Á &#41; ) &#103; g &#165; ¥
    &Acirc; Â &#42; * &#104; h &#166; ¦
    &Atilde; Ã &#43; + &#105; i &#167; §
    &Auml; Ä &#44; , &#106; j &#168; ¨
    &Aring; Å &#45; &#107; k &#169; ©
    &AElig; Æ &#46; . &#108; l &#170; ª
    &Ccedil; Ç &#47; / &#109; m &#171; «
    &Egrave; È &#48; 0 &#110; n &#172; ¬
    &Eacute; É &#49; 1 &#111; o &#173; ­
    &Ecirc; Ê &#50; 2 &#112; p &#174; ®
    &Euml; Ë &#51; 3 &#113; q &#175; ¯
    &Igrave; Ì &#52; 4 &#114; r &#176; °
    &Iacute; Í &#53; 5 &#115; s &#177; ±
    &Icirc; Î &#54; 6 &#116; t &#178; ²
    &Iuml; Ï &#55; 7 &#117; u &#179; ³
    &ETH; Ð &#56; 8 &#118; v &#180; ´
    &Ntilde; Ñ &#57; 9 &#119; w &#181; µ
    &Otilde; Õ &#58; : &#120; x &#182;
    &Ouml; Ö &#59; ; &#121; y &#183; ·
    &Oslash; Ø &#60; < &#122; z &#184; ¸
    &Ugrave; Ù &#61; = &#123; { &#185; ¹
    &Uacute; Ú &#62; > &#124; | &#186; º
    &Ucirc; Û &#63; ? &#125; } &#187; »
    &Uuml; Ü &#64; @ &#126; ~ &#188; ¼
    &Yacute; Ý &#65; A &#127; ? &#189; ½
    &THORN; Þ &#66; B &#128; &#190; ¾
    &szlig; ß &#67; C &#129;  &#191; ¿
    &agrave; à &#68; D &#130; &#192; À
    &aacute; á &#69; E &#131; ƒ &#193; Á
    &aring; å &#70; F &#132; &#194; Â
    &aelig; æ &#71; G &#133; &#195; Ã
    &ccedil; ç &#72; H &#134; &#196; Ä
    &egrave; è &#73; I &#135; &#197; Å
    &eacute; é &#74; J &#136; ˆ &#198; Æ
    &ecirc; ê &#75; K &#137; &#199; Ç
    &euml; ë &#76; L &#138; Š &#200; È
    &igrave; ì &#77; M &#139; &#201; É
    &iacute; í &#78; N &#140; Œ &#202; ?
    &icirc; î &#79; O &#141;  &#203; Ë
    &iuml; ï &#80; P &#142; Ž &#204; Ì
    &eth; ð &#81; Q &#143;  &#205; Í
    &ntilde; ñ &#82; R &#144;  &#206; Î
    &ograve; ò &#83; S &#145; &#207; Ï
    &oacute; ó &#84; T &#146; &#208; Ð
    &ocirc; ô &#85; U &#147; &#209; Ñ
    &otilde; õ &#86; V &#148; &#210; Ò
    &ouml; ö &#87; W &#149; &#211; Ó
    &oslash; ø &#88; X &#150; &#212; Ô
    &ugrave; ù &#89; Y &#151; &#213; Õ
    &uacute; ú &#90; Z &#152; ˜ &#214; Ö
    &ucirc; û &#91; [ &#153; &#215; ×
    &yacute; ý &#92; \ &#154; š &#216; Ø
    &thorn; þ &#93; ] &#155; &#217; Ù
    &yuml; ÿ &#94; ^ &#156; œ &#218; Ú

    Whilst the above list is by no means complete, it should contain the most useful characters and codes for you to build your sites using the special characters with ease.

    Article written by Lee

  • Formatting HTML Text Using Tags

    Date: 2011.02.22 | Category: WebDesign | Response: 0

    Formatting HTML Text Using Tags.

    As we know there are many elements to a website from graphics to text. In this article we are going to have a closer look at text and, more importantly how we format the text to look like we want it to.

    The text of the HTML pages we create, as you already know goes inside the <body> tag of our HTML pages but, unless you are using a WYSIWYG editor you can not just click a button and make it appear bold or italic therefore we need to get to know some of the text property tags that can be used to enhance our HTML text. Lets take a look at some of these now.

    <b> Any text inside these two tags will appear bold on our page</b>
    <i> Any text inside these two tags will appear in italic on our page</i>
    <u> Any text inside these two tags will appear to be underlined on our page</u>
    <big> Any text inside these two tags will appear BIG on our page</big>
    <small> Any text inside these two tags will appear small on our page</small>
    <sub> Any text inside these two tags will appear subscript on our page</sub>
    <sup> Any text inside these two tags will appear as superscript on our page</sup>

    There are also things called ‘heading tags’ these will work the same as the formatting tags mentioned above however there are only six of them and they look like this <hx> with the x being replaced by a number from 1-6 the lower this number is in the tag the LARGER our text will become so for example:

    <h1> Will be the largest heading text</h1>
    <h2> Will be the next smallest heading tag</h2>
    <h3> Will be smaller again </h3>
    <h4> Will be one size smaller again</h4>
    <h5> Will be the second to smallest heading size</h5>
    <h6> Is the smallest of the heading tags</h6>

    Also, you should remember that it *IS* possible to use more than one of the text tags in any single line of portion of text on our web page so for example, if i wanted to have bold underlined italic text my tags for the text would look like this:

    <b><i><u>This text is bold, in italics, and underlined</u></i></b>

    You will notice from the above example that the tags were opened and closed in the same order they were created this doesn’t have to be done like this but, in the long run, it is easier for you as a webmaster to code your pages this way.

    Hopefully this article has given you a further understanding on how we can format out text and you will be bale to put this into practice on the next site you build.

    Article written by Lee

  • Cascading Style Sheet Basics

    Date: 2011.02.21 | Category: WebDesign | Response: 0

    CSS (Cascading Style Sheets) have been around for a while now, and act as a complement to plain old HTML files.

    Style sheets allow a developer to separate HTML code from formatting rules and styles. It seems like many HTML beginners’ under-estimate the power and flexibility of the style sheet. In this article, I’m going to describe what cascading style sheets are, their benefits, and two ways to implement them.

    Cascading What’s?

    They’re what chalk is to cheese, what ice-cream is to Jell-O they complement HTML and allow us to define the style (look and feel) for our entire site in just one file!

    They get their name from the fact that each different style declaration can be “cascaded” under the one above it, forming a parent-child relationship between the styles.

    They were quickly standardized, and both Internet Explorer and Netscape built their latest browser releases to match the CSS standard (or, to match it as closely as they could).

    So, you’re still wondering what a style sheet is? A style sheet is a free-flowing document that can either be referenced by, or included into a HTML document (Kind of like using SSI to call a file but not, if that makes sense). Style sheets use blocks of formatted code to define styles for existing HTML elements, or new styles, called ‘classes’.

    Style sheets can be used to change the height of some text, to change the background color of a page, to set the default border color of a table the list goes on and on. Put simply though, style sheets are used to set the formatting, color scheme and style of an HTML page.

    Style sheets should really be used instead of the standard , < b >, < i > and < u > tags because:

    One style sheet can be referenced from many pages, meaning that each file is kept to a minimum size and only requires only extra line to load the external style sheet file

    If you ever need to change any part of your sites look/feel, it can be done quickly and only needs to be done in one place: the style sheet and furthermore, it is done globally.

    With cascading style sheets, there are many page attributes that simply cannot be set without them: individual tags can have different background colors, borders, indents, shadows, etc.

    Style sheets can either be inline (included as part of a HTML document), or, referenced externally (Contained in a separate file and referenced from the HTML document). Inline style sheets are contained wholly within a HTML document and will only change the look and layout of that HTML file.

    Open your favorite text editor and enter the following code. Save the file as styles.html and open it in your browser:

    Cascading Style Sheet Example.

    h1
    {
    color: #636594;
    font-family: Verdana;
    size: 18pt;
    }

    This is one big H1 tag!

    When you fire up your browser, you should see the text “This is one big H1 tag!” in a large, blue Verdana font face.

    Let’s step through the style code step by step. Firstly, we have a pretty standard HTML header. The page starts with the tag followed by the tag. Next, we use a standard tag to set the title of the page we are working with.

    Notice, though, that before the tag is closed, we have our tag, its contents, and then the closing tag.

    h1
    {
    color: #636594;
    font-family: Verdana;
    size: 18pt;
    }

    When you add the style sheet code inline (as part of the HTML document), it must be bound by and tags respectively. Our example is working with the tag. We are changing three attributes of the ’s style: the text color (color), the font that any tags on the page will be displayed in (font-family), and lastly, the size of the font (size).

    The code between the { and } are known as the attributes. Our sample code has three. Try changing the hexadecimal value of the color attribute to #A00808 and then save and refresh the page. You should see the same text, just colored red instead of blue.

    An Example Of An External Style Sheet.

    External style sheets are similar to internal style sheets, however, they are stripped of the and tags, and need to be referenced from another HTML file to be used.

    Create a new file called “whatever.css” and enter the following code into it:

    h1
    {
    color: #a00808;
    font-family: Verdana;
    size: 18pt
    }

    Next, create a HTML file and name it test.html. Enter the following code into test.html:

    External Style Sheet Reference Example.

    This is one big H1 tag!

    As mentioned above, you can see that the actual code in whatever.css is exactly the same as it was in the inline example. In our HTML file, we simply place a tag in the section of our page. The rel=”stylesheet” attribute tells the browser that the link to the external file is a style sheet. The type=”text/css” attribute tells the browser that whatever.css is a text file containing CSS (cascading style sheet) declarations. Lastly, the href=”whatever.css” attribute tells the browser that the actual file we want to load is whatever.css.

    Conclusion.

    Well, there you have it, a quick look at style sheets and how to implement both an inline and external version. Checkout the links below if you’ve never worked with cascading style sheets before. You will be surprised at some of the things you can do with them!

    Article written by Lee.

Premium Sponsors















Categories

Site Links