Neutrality 0 Report post Posted February 27, 2005 This tutorial will help those who want to get away from the mediocre formatting functions of HTML and into the stylizing formatting functions of CSS. Now here is a simple run-down of what CSS is. CSS stands for Cascading Style Sheets. It's used to expand the possibilites of a website in terms of color, style, positioning and whatnot. It's a very simple scripting language (or markup language if you will ), that has no other purpose than to add style to a website. Now, let's get into the process of using CSS in webpages. Let's start off with the ways CSS can be used. It can be used in three ways: a) through the current page, b ) through an external .css file and c) through the style attribute in any HTML element. I'll be focusing on the first one in this tutorial only. This is how it would be written. But don't worry, I'll explain what it all means. <head><style type='text/css'><!--//Style properties go here--></style></head>Now, this is the set up of every css that you use within the current page. The <head> tag should be recognizable to you. The STYLE tags let you create astylesheet within the webpage's HEAD tags (always remember to put stylesheets within the HEAD tags). A stylesheet is just a set of style properties as you will see. The 'type=text/css' component makes sure that the Browser reads the text as CSS and not as HTML. Okay, you now maybe wondering what these <!-- --> are for. Well, this is an old practice done by many specifically for users with older browsers. Older browsers can not read CSS, so some use those <!-- --> to "comment" out the code. That means that the Browser does not look at that code. It just continues interpreting the HTML code (this same procedure applies to Javascript as well). Now that you have the format down pat (well I hope you do), let's move on to some actual style properties. Here is a small example: <head><style type='text/css'><!--BODY { background-color: black; font-family: Arial; font-size: 10; }TABLE { background-color: #555555; }--></style></head>Here we have two html tags, BODY and TABLE. But they aren't tags. They are referred to as elements. These elements have been given several properties.As you can see, there are a number of properties inside these elements. A property is basically the same as an attribute in HTML. The only difference is that properties are assigned values without an equal sign. Instead, a colon ( is used. And after each property set, a semicolon( is used. Please be sure to use these properly. Your stylesheet will not work properly if you leave out a colon or semicolon. Each set of styles needs curly brackets { }. Don't forget these either, or else your stylesheet will not work. Now, the BODY element contains three properties: background-color, font-family, and font-size. I'm assuming that you know what these mean, so I don't really need to explain them. The TABLE element contains one property - background-color. The BODY and TABLE's properties are global - this means that all HTML tags, including BODY and FONT, will take on the same properties as these two elements. This can be a blessing and a curse. Unless you use classes (which I will get into soon), everything within the body of the page will take on those font properties. And the same goes for the tables. Every table used in an HTML page will have the same background color. But what if you want more flexibility? What if you want to have different tables with different colors and different fonts? Well, this is where classes come in. Classes are basically sets of properties that don't effect all HTML tags in a webpage - but effect specific tags. Think of a class as a set of traits. Each human has a set of traits. One human can draw, write fast, swim, while another can run fast, read quickly, and dance. The traits are the properties. I hope I didn't lose you there. Here's an example of a class: <head><style type='text/css'><!--.myfirstfont { font-family: Verdana; font-size: 10; color: blue; }.mysecondfont { font-family: Arial; font-size: 12; color: red; }.mythirdfont { font-family: Tahoma; font-size: 16; color: green; }--></style></head>Okay, there are three classes in this code. Each class in this code (myfirstfont, mysecondfont, mythirdfont), set aside a number of properties for any specific HTML tag. These would most likely be used in FONT tags, but that's not importantright now. You understand what these properties mean, so now what? At this point, these are useless. Utterly useless. For them to be of any use, you'll have to embed them into HTML (don't worry, it's not hard). Here is a sample HTML page that embeds those three classes into FONT tags: <html><head><style type='text/css'><!--.myfirstfont { font-family: Verdana; font-size: 10; color: blue; }.mysecondfont { font-family: Arial; font-size: 12; color: red; }.mythirdfont { font-family: Tahoma; font-size: 16; color: green; }--></style></head><body><font class="myfirstfont">Here is my first font.</font><br><font class="mysecondfont">Here is my second font.</font><br><font class="mythirdfont">Here is my third font.</font></body></html>Take a look at those three lines of HTML between the BODY tags. There arethree FONT tags used. Now, the three classes we made earlier have been embedded into the HTML. You do this by using the CLASS attribute as shown above. I hope this tutorial was of use to you. It's purpose was to introduce the basics to those just starting off in web design. I've provided a list of CSS properties. If you want to learn what these properties do, plus many other properties, visit http://forums.xisto.com/no_longer_exists/. text-align, text-decoration, text-transform, font-family, font-size, color, font-weight font-style, margin-left, margin-right, margin-top, margin-bottom, background-color background-image, vertical-align, align Share this post Link to post Share on other sites
Roly 0 Report post Posted February 28, 2005 You can also use the link tag to link to an external style sheet<link rel="stylesheet" type="text/css" href="default.css" />In the default.css file you put the CSS code. Share this post Link to post Share on other sites
mizako 0 Report post Posted February 28, 2005 You can also use the link tag to link to an external style sheet <link rel="stylesheet" type="text/css" href="default.css" /> In the default.css file you put the CSS code. 54665[/snapback] Totally agree Roly. In that way you provide a unique CSS page for the whole site and you decrease the size of your html pages avoiding repeating the style tag in every page. Share this post Link to post Share on other sites
spacemonkey 0 Report post Posted March 3, 2005 Also, you should point out the different types of classes in CSS. A "Generic" class is the type of class that you have used in your tutorial, it can be applied to any HTML element: .verdana_class { font-family: Verdana; font-size: 8pt; color: #FF0000;}<table class="verdana_class"><tr><td>blah</td></tr></table> A "Tag Level" class can only be applied to a certain tag that you identify. This way, you can use the same class name, but make it tag-specific in order to apply different formatting where needed. An example: div.verdana_class { font-family: Verdana; font-size: 10pt; color: #FF0000;}span.verdana_class { font-family: Verdana; font-size: 10pt; color: #00FF00;}<div class="verdana_class">This is red Verdana text</div><span class="verdana_class">This is green Verdana text</span>I should also mention that new standards are being created in which every tag must be lower case, so: BODY { text-align: left; }should become: body {text-align: left; } A good reference for HTML and CSS tags can be found at http://www.htmldog.com/. Share this post Link to post Share on other sites
andrewsmithy 1 Report post Posted March 16, 2005 Additional CSS Stuff Here are a couple more basic CSS tips that might be helpful: First, if you want to access a element further down within a structure, you can prefix the element you want to add the styles to with the element name. For example: <style type="text/css"><!-- /* Here we want to define a style for a <span> element inside of a <div> element */ div span { font-size: larger; }--></style>In the previous example, we've taken a <span> element and given it a style based on its parent tag being a <div> tag. This way you can create unique styles without having to give it a class or an id. Font Styling I'm going to show you some easy font controls in css. This is part of what makes css so much more powerful than plain HTML. You can precisely control the appearance of your page with css. I'll just list several css directives that you can use to format your text with: font-family: Name_of_font, Name_of_backup_font, etc; font-size: [x-small, small, medium, large, larger], [12 px, 15pt, 3ex (the height of the letter "x" in the font)]; // These are just several possibilities. Subsitute your own values in. font-weight: 100-800, [normal, bold, bolder]; //These control the font weight, or how bold it is color: [#00000, "Hexadecimal"],[rgb(255,255,255) "Red Green and Blue Values, respectively, with values from 1 to 255] or the sixteen pre-defined colors such as [red,green,blue,black,white,orange,magenta,silver,etc.]; Other Directives that may be useful would be: line-height:px, pc (picas), pt, in, mm, cm, em (height of the letter "m" in the font) letter-spacing: Same as above Browser Bugs Don't freak out if your css is not working the way you want it to. Sometimes certain browsers don't support css the way the W3C (World Wide Web Consortium) wants it to be. You can't always fix that. Netscape 4.x has a bug where if you resize the page, the page loses its styling. I'll write a quick article on how to fix that too. Just remember, its not all your fault. I guess that's all I have to say for now. I'll try to post more stuff for you that need to learn css. Hope that this helps. Share this post Link to post Share on other sites
haron 0 Report post Posted March 17, 2005 Good tutorials! Most browsers support CSS 1.0, but CSS 2.0 is not supported in some browsers. Gecko browsers (Firefox and Mozilla) support CSS 2.0, but Internet Explorer does not. Visit this page in Internet Explorer and any Gecko Browser. http://forums.xisto.com/no_longer_exists/ Site is in Serbian, but you can see menu above in Gecko Browsers, but not in IE. Share this post Link to post Share on other sites
andrewsmithy 1 Report post Posted March 18, 2005 Netscape Browser Resize FixSorry, but I couldn't find the edit button, so I had to double post. Briefly, I'll explain the Netscape browser resize bug. First, the problem is that when you resize Netscape 4.x all the CSS styling disappears, and the html formatting takes over. To fix this you must use some JavaScript. First, you need to place this code in the <head> tag of your page. <script language="javascript" type="text/javascript"> //<!-- //<![CDATA[ function refreshPage () { location.href = location.href; } if (navigator.appName.indexOf("Netscape") != -1 && parseInt(navigator.appVersion) == 4) { window.onresize = refreshPage(); } // ]]> // --></script> This will solve the resize bug. Reply if this helps you at all. Share this post Link to post Share on other sites
leiaah 0 Report post Posted June 18, 2005 Hey how about putting images on a cell? I was given a code to switch styles on a click of button. So far I know how to change fonts styles and some background but I don't know how to change images within a cell. If I have a table with two cells with two different images, clicking the style-switch button changes the appearance of the page and naturally those two images.What's the code in CSS for images inside a cell/table? I really hope someone could help me out. I've been looking for this topic for days now! Share this post Link to post Share on other sites
whyme 0 Report post Posted June 22, 2005 Just a note,Technically, you should not use these <style type='text/css'></style> by incoporating the CSS directly to your HTML file, your broswer needs to load the CSS again and again, which increases page load time.Instead, you should create a seperate CSS file, and include it in the <head> tags like this:<link rel="stylesheet" type="text/css" href="mystylesheet.css" media="screen" /> whyme Share this post Link to post Share on other sites
leiaah 0 Report post Posted June 25, 2005 I got it! Everything works fine now. Check my site it has a CSS style switcher code that I had just added. Share this post Link to post Share on other sites
