Incorporating CSS to HTML
Hello friends, today I'll teach some basic skills needed in order to code web pages from scratch to finish. By now, you already know that HTML (Hypertext Markup Language) is the language of the web without which you won't be able to create web pages. With HTML you can code the structure but that's how far you can go with HTML. In the past, HTML had tags that where specifically for the presentation and designs of the web page. But now, things has changed, the specifications has changed. Now, a different markup language is used specifically to style html pages. That language is called CSS, Cascading Style Sheets. With CSS, you can dynamically style and design web pages in a way that captivates the eye. Today we will show you how to incorporate CSS markup with your html code.Steps to follow
- Type in the html code below:
2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
4. <head>
5. <link type="text/css" rel="stylesheet" href="cssfile.css" />
6. <title>My first Web Page</title>
7. <meta http-equiv="content-type" content="text/html;charset=utf-8" />
8. </head>
9. <body>
10. </body>
11. </html>
Look at the code closely. It is written in xhtml (that is, eXtensible hypertext markup language). Notice that the code is number from 1 to 11. Numbering as such is not included in html, we put it there for easy reference to specific tags (<>) in the codes. In html, codes are marked up using tags. Tags begin with an open angle bracket like this <> and a closing tag with an angle bracket like this </ >.
For example, to add emphasis to a text, use the <em> tag to wrap around the text.
- <em>This text has been displayed with emphasis</em>
That's that about that! Let's move on to CSS, that's our focus. Like I said earlier, CSS is used in styling web pages and can be used along side JavaScript and Ajax to add some added functionality to a website.
From number 5 in the code above, the link tag has three attributes, that is, the type, rel, href.
The type attribute of the link tag suggests that the tag is linking to a css file, thus the browser is alerted about that. Next the rel attribute shows that the link attribute is linking to a style sheet. While the href attribute points to the source of the css file (that is, where the css markup code is located) -- this could be an absolute link or a relative path.
Let's get down to business. On the lines below, we will show you some basic CSS
CSS codes are called rules.
CSS RULES
body { background-color: red;font-family: Georgia;
border-bottom: 2px dotted gray;
}
p { background-color: yellow;
font-family: sans-serif;
}
If you typed the css rule above into a text editor, save it as whatever.css . All external css source files must be saved with a .css extension to show it is a CSS file.
This is all we can show you for today, watch out for up coming well detailed tutorials on html and CSS.
Image Credit: Icon Archive
3 comments:
This is a must read article for those aspiring to create their own websites.
www.Gprshub.net tnx bro..
Help me for advertiesing...
I've been doing that bro.
Post a Comment