 |
|
|
|
| |
Introduction To Cascading Style SheetsWritten by Mitchell Harper
Continued from page 1
Let’s step through style code step by step. Firstly, we have a pretty standard HTML header. The page starts with tag followed by tag. Next, we use a standard tag to set<IMG height=12 src="/the2.jpg" alt="repparttar 105172"> title of<IMG height=12 src="/the2.jpg" alt="repparttar 105173"> page we are working with. <p>Notice, though, that before<IMG height=12 src="/the2.jpg" alt="repparttar 105174"> <head> tag is closed, we have our <style> tag, its contents, and then<IMG height=12 src="/the2.jpg" alt="repparttar 105175"> closing </style> tag.<p><style> h1 { color: #636594; font-family: Verdana; size: 18pt; } </style> <p>When you add<IMG height=12 src="/the2.jpg" alt="repparttar 105176"> style sheet code inline (as part of<IMG height=12 src="/the2.jpg" alt="repparttar 105177"> HTML document), it must be bound by <style> and </style> tags respectively. Our example is working with<IMG height=12 src="/the2.jpg" alt="repparttar 105178"> <h1> tag. We are changing three attributes of<IMG height=12 src="/the2.jpg" alt="repparttar 105179"> <h1>’s style:<IMG height=12 src="/the2.jpg" alt="repparttar 105180"> text color (color),<IMG height=12 src="/the2.jpg" alt="repparttar 105181"> font that any <h1> tags on<IMG height=12 src="/the2.jpg" alt="repparttar 105182"> page will be displayed in (font-family), and lastly,<IMG height=12 src="/the2.jpg" alt="repparttar 105183"> size of<IMG height=12 src="/the2.jpg" alt="repparttar 105184"> font (size). <p>The code between<IMG height=12 src="/the2.jpg" alt="repparttar 105185"> { and } are known as<IMG height=12 src="/the2.jpg" alt="repparttar 105186"> attributes. Our sample code has three. Try changing<IMG height=12 src="/the2.jpg" alt="repparttar 105187"> hexadecimal value of<IMG height=12 src="/the2.jpg" alt="repparttar 105188"> color attribute to #A00808 and then save and refresh<IMG height=12 src="/the2.jpg" alt="repparttar 105189"> page. You should see<IMG height=12 src="/the2.jpg" alt="repparttar 105190"> same text, just coloured red instead of blue.<p>--------------------------------------- An example of an external style sheet ---------------------------------------<p>External style sheets are similar to internal style sheets, however, they are stripped of<IMG height=12 src="/the2.jpg" alt="repparttar 105191"> <style> and </style> tags, and need to be referenced from another HTML file to be used. <p>Create a new file called “mystyle.css” and enter<IMG height=12 src="/the2.jpg" alt="repparttar 105192"> following code into it:<p>h1 { color: #a00808; font-family: Verdana; size: 18pt } <p>Next, create a HTML file and name it external.html. Enter<IMG height=12 src="/the2.jpg" alt="repparttar 105193"> following code into external.html:<p><html> <head> <title> External Style Sheet Reference Example < itle> <link rel="stylesheet" type="text/css" href="mystyle.css" rel="nofollow"> </head> <body> <h1>This is one big H1 tag!</h1> </body> </html> <p>As mentioned above, you can see that<IMG height=12 src="/the2.jpg" alt="repparttar 105194"> actual code in mystyle.css is exactly<IMG height=12 src="/the2.jpg" alt="repparttar 105195"> same as it was in<IMG height=12 src="/the2.jpg" alt="repparttar 105196"> inline example. In our HTML file, we simply place a <link> tag in<IMG height=12 src="/the2.jpg" alt="repparttar 105197"> <head> section of our page. The rel=”stylesheet” attribute tells<IMG height=12 src="/the2.jpg" alt="repparttar 105198"> browser that<IMG height=12 src="/the2.jpg" alt="repparttar 105199"> link to<IMG height=12 src="/the2.jpg" alt="repparttar 105200"> external file is a style sheet. The type=”text/css” attribute tells<IMG height=12 src="/the2.jpg" alt="repparttar 105201"> browser that mystyle.css is a text file containing css (cascading style sheet) declarations. Lastly,<IMG height=12 src="/the2.jpg" alt="repparttar 105202"> href=”mystyle.css” attribute tells<IMG height=12 src="/the2.jpg" alt="repparttar 105203"> browser that<IMG height=12 src="/the2.jpg" alt="repparttar 105204"> actual file we want to load is mystyle.css. <p>--------------------------------------- Conclusion ---------------------------------------<p>Well, there you have it, a quick look at style sheets and how to implement both an inline and external version. Checkout<IMG height=12 src="/the2.jpg" alt="repparttar 105205"> links below if you’ve never worked with cascading style sheets before. You will be surprised at some of<IMG height=12 src="/the2.jpg" alt="repparttar 105206"> things you can do with them! <p>- http://www.devarticles.com/art/1/7 - http://hotwired.lycos.com/webmonkey/98/15/index0a.html - http://www.webreview.com/style/index.shtml - http://jigsaw.w3.org/css-validator/ <br><img src="images/ata.gif"><br>
<p>Mitchell is the founder and senior editor of http://www.devarticles.com. DevArticles provides its readers with top quality ASP, PHP and .NET articles, interviews and product reviews. If you're looking for insider tips and tricks, you'll also find them at DevArticles. You can visit DevArticles by clicking on this link: http://www.devarticles.com.<p><br><br><br></font></td><!-- google_ad_section_end --><!-- google_ad_section_start(weight=ignore) --><td align="top" width="10%"></td><td align="top" width="45%"><h2>CSS: The Basics - ID's and Classes</h2><font size="2">Written by Eric McArdle</font><br><br><script type="text/javascript"><!--
google_ad_client = "pub-5766870852072819";
google_ad_width = 234;
google_ad_height = 60;
google_ad_format = "234x60_as";
google_ad_channel ="9238851329";
google_color_border = "CFB9A1";
google_color_bg = "CFB9A1";
google_color_link = "000000";
google_color_url = "431B02";
google_color_text = "431B02";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<font size="2"><br>Continued from page 1<br><p><div id="navigation"> <div id="left"> <p></div> </div> <p>Remember to close<IMG height=12 src="/the2.jpg" alt="repparttar "> id's in order. <p>Now, onto css classes. <p>Creating Classes<p>To create a class in your css, use this <p>.subtitle { color: #000000; } <p>To insert<IMG height=12 src="/the2.jpg" alt="repparttar 105167"> class into your html, do this <p><p class="subtitle" </p <p>Now, you can use<IMG height=12 src="/the2.jpg" alt="repparttar 105168"> same class repeatedly in<IMG height=12 src="/the2.jpg" alt="repparttar 105169"> same page unlike Id's. <p>I also want to tell you something about link attributes. You should always keep them in this order: <p>a { color: #006699; text-decoration: none; font-size: 100%; } <p>a:link { color: #006699; text-decoration: none; } <p>a:visited { color: #006699; text-decoration: none; } <p>a:hover { color: #0000FF; text-decoration: underline; } <p>a:active { color: #FF0000 } <p>Of course, you can change<IMG height=12 src="/the2.jpg" alt="repparttar 105170"> colors and text-decorations. This is just something I cut out of my code! <p>Okay, these are<IMG height=12 src="/the2.jpg" alt="repparttar 105171"> basics. What I highly recommend is to go and download Topstyle Lite by going here: <p>http://www.bradsoft.com opstyle slite/index.asp <p>It's free and is a very helpful css editor. It not only color codes and organizes your code, but it provides you with tons of attributes that you can add to your class and id elements with just a click. They also provide a screen at<IMG height=12 src="/the2.jpg" alt="repparttar 105172"> bottom to view your css code as you create it. Very useful for a free edition and I'm looking to buy<IMG height=12 src="/the2.jpg" alt="repparttar 105173"> pro version soon. <p>Now, this was just a very very brief explanation of<IMG height=12 src="/the2.jpg" alt="repparttar 105174"> vital elements needed when structuring your css. I have a good feeling that when you download top style lite, you will learn how to use <IMG height=12 src="/the2.jpg" alt="repparttar 105175"> hundreds of attributes in your classes and id's <p>Good Luck in Your Web Designing Efforts! <br><img src="images/ata.gif"><br>
<p>Eric McArdle is the publisher of the TrafficaZine Online Marketing Newsletter which is a publication designed to assist the online marketing and/or web designing entrepreneur with the basic tools and resources that will greatly assist them in taking further steps into bettering their online business. http://www.trafficazine.com<br><br><br></font></td><!-- google_ad_section_end --></tr><tr><td> <a class="mlink" href="Introduction_To_Cascading_Style_Sheets-5170.htm"><</a>Back to Page 1</td></tr></table><script type="text/javascript"><!--
google_ad_client = "pub-5766870852072819";
google_ad_width = 728;
google_ad_height = 90;
google_ad_format = "728x90_as";
google_ad_channel ="8831454965";
google_color_border = "CFB9A1";
google_color_bg = "CFB9A1";
google_color_link = "000000";
google_color_url = "431B02";
google_color_text = "431B02";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</td>
</tr>
</table>
<table width="770" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td height="48" align="center" background="images/bg_nav_bottm.jpg"><span class="style3">ImproveHomeLife.com © 2005<br> <a href="terms.html" rel="nofollow">Terms of Use</a></span></td>
</tr>
</table></td>
</tr>
</table>
<script type="text/javascript">
var HASH_ESCAPED="%23";
function TrackIt(adUnit){
if (window.status)
{
var adDomain = escape(window.status.substring(6));
var pyPage = document.location.pathname;
var params = document.location.search;
var hasAnchor = params.lastIndexOf(HASH_ESCAPED)!= -1;
params = hasAnchor? (params.substring(0, params.lastIndexOf(HASH_ESCAPED))) : params;
pyPage = escape(pyPage.substring(pyPage.lastIndexOf('/') + 1));
pyPage = pyPage + params;
var curTime = new Date().valueOf();
var bug = new Image();
bug.src = '/track/adsenseTrack.php?pyPage=' + pyPage + '&adDomain=' + adDomain + '&adUnit=' + adUnit + "&time=" + curTime;
}
}
function TrackIt0() {TrackIt(0); }
function TrackIt1() {TrackIt(1); }
function TrackIt2() {TrackIt(2); }
var elements = document.getElementsByTagName("iframe");
for (var i = 0; i < elements.length; i++)
{
if(elements[i].src.indexOf('googlesyndication.com') > -1)
{
//elements[i].onfocus = TrackIt;
if (i==0) elements[i].onfocus = TrackIt0;
if (i==1) elements[i].onfocus = TrackIt1;
if (i==2) elements[i].onfocus = TrackIt2;
}
}
</script>
<!--WEBBOT bot="HTMLMarkup" startspan ALT="Site Meter" -->
<script type="text/javascript" language="JavaScript">var site="s19improve"</script>
<script type="text/javascript" language="JavaScript1.2" src="http://s19.sitemeter.com/js/counter.js?site=s19improve">
</script>
<noscript>
<a href="http://s19.sitemeter.com/stats.asp?site=s19improve" target="_top">
<img src="http://s19.sitemeter.com/meter.asp?site=s19improve" alt="Site Meter" border=0></a>
</noscript>
<!-- Copyright (c)2002 Site Meter -->
<!--WEBBOT bot="HTMLMarkup" Endspan -->
</body>
</html>
|
| |
