Class
0 likes38 views
This document discusses using CSS classes to style HTML elements with multiple looks. CSS classes allow overriding default CSS styles and can be used to style the same element differently. The key points are: - CSS classes allow styling HTML elements with multiple formats by overriding default styles. - To create a class, add a class extension to the CSS code and specify that class in the HTML element. - CSS class styles will override default element styles. If a class styles an attribute already defined in the default CSS, the class value is used. - Classes provide a way to change default element styling without modifying the base CSS code.
Class
- 1. Search Home Web Tutorials Beginner Tutorial HTML Tutorial CSS Tutorial Scripting Javascript Tutorial PHP Tutorial Perl Tutorial Ajax Tutorial ASP Tutorial VBScript Tutorial Databases SQL Tutorial MySQL Tutorial Miscellaneous XML Tutorial Webhost Tutorial Flash Tutorial SEO Tutorial CSS Tutorial CSS - Introduction CSS - Selector CSS - Internal CSS - External CSS - Inline CSS - Class CSS - Background CSS - Font CSS - Text CSS - Padding CSS - Margin CSS - Border CSS - List CSS - Pseudo Class & Mouseover Advanced Topics CSS - Cursor CSS - Properties CSS - Position CSS - Layers CSS - Float CSS - ID vs Class CSS - Display Get Help! CSS Forum Contact Us cssclasses You may be wondering if it is possible to give an HTML element multiple looks with CSS. Say for example that sometimes you want the font to be large and white, while other times you would prefer the font to be small and black. CSS would not be very useful if it did not allow you to have many different types of formats for a single HTML tag. Well, you are in luck! CSS allows you to do just that with the use of classes. Advertise on Tizag.com the formatofclasses Using classes is simple. You just need to add an extension to the typical CSS code and make sure you specify this extension in your HTML. Let's try this with an example of making two paragraphs that behave differently. First, we begin with the CSS code, note the red text. CSS Code: HTML Code: Display: This is a normal paragraph. This is a paragraph that uses the p.first CSS code! This is a paragraph that uses the p.second CSS code! You can use CSS classes with any HTML element! However, what happens if we had already defined a value for the default <p> tag, would this cause any problems for classes of the paragraph tag? Well, when this happens the CSS class for any <p> tag will override the default <p> CSS. If the CSS class uses a CSS attribute already defined by the default CSS, then the formatting defined by the class will be the value that is used. It may be easier to imagine that the CSS for a generic HTML element is the starting point and the only way to change that look is to overwrite the attributes using CSS classes. Please see the example below for a visual of this tricky topic. CSS Code: Web Reference HTML Reference CSS Reference CSS Examples PHP Examples Help Tizag Grow Link to Tizag New - Tizag.com Forums! Recent Forum Topics: - Which Laptop(s) and Notebook (s) could u recommend? - Obhosting | unlimited reseller & master reseller hosting | 20%off - linked text - call a function Advertise Here More Tutorials! Microsoft Office Tutorials Artist Tutorials p.first{ color: blue; } p.second{ color: red; } <html> <body> <p>This is a normal paragraph.</p> <p class="first">This is a paragraph that uses the p.first CSS code!</p> <p class="second">This is a paragraph that uses the p.second CSS code!</p> ... p{ color: red; font-size: 20px; } p.test1{ color: blue; } p.test2{ font-size: 12px; } Page 1 of 2CSS Tutorial - Class 9/28/2010http://www.tizag.com/cssT/class.php
- 2. Go Back Continue HTML Code: Display: This is a normal paragraph. This is a paragraph that uses the p.test1 CSS code! The p.test1 paragraph remained the same size, but it's color changed. This is a paragraph that uses the p.test2 CSS code! The p.test2 paragraph remained the same color, but it's size changed. Remember, CSS code in classes will override the general CSS code for that element. p.test1 overrides p! foundsomethingwronginthislesson? Report a Bug or Comment on This Lesson - Your input is what keeps Tizag improving with time! Try it out! <html> <head> <style> p.first { background-color: gray; } p.second { background-color: red; } p.third { background: purple; color: white; } </style> </head> <body> <h2>CSS Classes</h2> <p class="first">This is the p.first paragraph</p> <p class="second">This is the p.second paragraph</p> <p class="third">This is the p.third paragraph</p> Submit Query 2003-2008 Erack Network | Copyright | Privacy Policy | Advertising Information Site design by Seattle Web Design <html> <body> <p>This is a normal paragraph.</p> <p class="test1">This is a paragraph that uses the p.test1 CSS code!</p> <p class="test2">This is a paragraph that uses the p.test2 CSS code!</p> ... Ads by Google CSS Web Design Free PHP Code CSS Servers MySQL Tutorial Page 2 of 2CSS Tutorial - Class 9/28/2010http://www.tizag.com/cssT/class.php