| Here's the last part of this tutorial. Our topics | | | | style sheets within the head tags and how it is |
| are:Linking other pages and other websites | | | | implemented in the within the body tags.To define a |
| Using CSS in styling your web pagesLet's begin | | | | style, you have to use a selector as a reference. |
| here.Creating and placing hyperlinksIt is very | | | | Basic selectors are body, div, span, li, table, td and p. |
| important to create and place hyperlinks in your | | | | div is used for group of paragraphs, p is for one |
| website to help your visitors navigate your site from | | | | paragraph, span is for selected characters, words or |
| pages to pages. These are the links displayed in your | | | | phrases, li is for lists, table is for table and td is for |
| web pages that will change the web page displayed | | | | table data. The good thing here is you can make |
| when clicked by visitors. These must be prominent | | | | your own selectors using names you prefer.Creating |
| and properly placed in your pages. If not, your | | | | style sheets is the same as what we have done in |
| visitors will be confused and will eventually leave your | | | | CSS boxes. Whatever style properties you assigned |
| site unhappy or unsatisfied. Hence, he may never | | | | to those selecters, it will affect area or content of |
| return. So, make sure that your hyperlinks are | | | | your web pages where you have used the |
| prominent, descriptive and orderly placed in your | | | | corresponding selectors. See example below:< style |
| pages.Linking your pagesIn page 1, you have to place | | | | type="text/css"> |
| the following code where you want the visitor to | | | | body {margin: 10%;color: #00f;background: |
| click to go to your page 2:< a href=" | | | | #ff0;text-align: center;}< /style>In the above style, |
| title="description using relevant keywords">your link | | | | all your contents within the body tags (< body> and |
| descriptionLooking at the codes, "a" is html anchor | | | | ) will have the above style properties. Try it by |
| tag used for hyperlinks, "href" is the attribute | | | | typing the above in your mywebpage.html within the |
| referring to the URL of the destination page and | | | | head tags. Save it and refresh your browser and see |
| "title" refers to the description of your link. If | | | | effect in your web page.Let's see another example:< |
| possible, use relevant keywords in your description | | | | style type="text/css"> |
| for search engine optimization.Now, type the above | | | | p {margin: 20px;color: #cff;background: |
| in your mywebpage.html and replace the domain | | | | #ccc;text-align: right;}All of your content that you |
| name, web page name, title and link description with | | | | have placed within < p> and will have the above |
| yours. Use relevant keywords in your link description | | | | style properties. Now, type the above to your |
| for search engine optimization. Then, save and | | | | mywebpage.html within the head tags, save and |
| refresh your browser to show you how the above is | | | | refresh your browser and see the results.Now, let's |
| displayed on the web.To see more, hover or place | | | | make our own selectors. As explained in creating CSS |
| your cursor on the link. The "title" value will be | | | | boxes, we can make an id and a class selectors and |
| displayed on the link while the "href" value or URL of | | | | implement as follows:< style type="text/css"> |
| the destination page will be shown at the left side of | | | | #ownidselector {margin: 0px;text-decoration: |
| the bottom bar of browser window. It may work | | | | underline;background: cff;}.ownclassselector {margin: |
| only if you are online and your site is already active | | | | 10px;font-size: 16px;font-style: italic;color: |
| on the web.Linking to other websitesYou have to | | | | #f00;}.ownclassselector2 {font-weight: |
| place the following code in your website pages | | | | bold;font-family: courier;border: 1px dashed #cff;}< |
| where you want your visitors to click to go to other | | | | body>< div id="ownidselector">This is an example of |
| particular websites:< a href=" title="description using | | | | using the id selector |
| relevant keywords" target="_blank">your link | | | | < div class="ownclassselector">This is an example of |
| description< /a>If you notice, it is the same as linking | | | | using the class selector |
| your web pages but it is pointing to other website. | | | | < div id="ownidselector" |
| So, we added the "target" attribute with value of | | | | class="ownclassselector">This is an example of using |
| "_blank" to open the destination page into new | | | | both the id and class selectors |
| browser window. This will make your site remain | | | | < span id="ownidselector">This is an example of |
| active or open even if your visitors click the link to | | | | using span with id selector and class selector |
| other website.To try it, type the above in your | | | | This is an example of using both the id and class |
| mywebpage.html and replace the domain name, web | | | | selectors |
| page name and link description with yours. Use | | | | This is an example of using the two class selectors |
| relevant keywords in your link description for search | | | | at the same timeLet's me explain to you the above |
| engine optimization. Then, save and refresh your | | | | style properties that are not discussed in Creating |
| browser to how the above is displayed on the web. | | | | CSS Boxes:text-decoration: underline - creates |
| Click the link and a new browser window will open | | | | underline to the text or characters. You may use |
| while the page where you clicked the link remained | | | | "none" instead of "underline" to remove the |
| open.Hyperlinks with imagesYou may use images in | | | | underline.font-size: 16px - fixes the size of the font |
| your hyperlinks. In this case, the visitors can click an | | | | within the affected selector. You may use px, em, pt |
| image in your web pages with links that will send | | | | and % as unit of measure.font-style: italic - makes |
| them to other pages in your site or to other | | | | the text or characters italic. You may also use |
| websites you have linked to. See the example | | | | normal, oblique.color: #f00 - defines the color of the |
| below:Linking to your other web pages: | | | | text or characters. You may use different web |
| < a href=" to other websites: | | | | colors here. It is advisable to use web-safe colors as |
| < a href=" /a>. So, in place of link description, you | | | | other computers or browsers could not display other |
| use image. When your visitors click the image, the | | | | colors.font-weight: bold - makes the text or |
| page will change to the destination page.To try the | | | | characters bold. You may use also normal, bolder, |
| above, place the image that you want to be used | | | | lighter, 100 up to 900.font-family: courier - defines the |
| with hyperlinks in the same directory where your | | | | font type of the text or characters. Common font |
| mywebpage.html is located. Then, type the above | | | | types are arial, verdana and helvetica.Type the above |
| codes in your mywebpage.html but type only the | | | | codes to your mywebpage.html within the style and |
| image filename in the "src" value. Then, save and | | | | body tags as noted, then save and refresh your |
| refresh the browser to effect the changes. Hover or | | | | browser to see the effects of the above style |
| place your cursor on the image. The "alt" value or the | | | | properties. You may change the values, then save |
| image description will be displayed on the image while | | | | and refresh to familiarize yourself with styling |
| the "href" value or URL of the destination page will | | | | properties.For complete web-safe color codes and |
| be shown at the left side of the bottom bar of | | | | complete list of style properties, click hereWhen you |
| browser window.Styling your web page using | | | | have already familiarized yourself with the html and |
| CSSW3C.org requires the website style definitions | | | | CSS codes, it will be easy for you to create a web |
| must be placed in the style sheets or CSS. Styles are | | | | page.I hope you've learned something in this tutorial. |
| used to manipulate the design of the website such | | | | Just continue practicing and learning. Research, |
| font sizes, colors, font face, box properties, table | | | | research, research. There so many free tutorials here |
| properties, paragraph format, etc.Placing your styles | | | | on the web.To learn more of HTML and CSS, search |
| within the head or in a separate CSS file let you | | | | Google by typing "html tutorial" or "css tutorial" - Click |
| control the style of your web pages in just one page. | | | | Search and you will find many choices. |
| Now, I will tell you the easy way to create your | | | | |