Articles and tutorials regarding CSS http://www.troobloo.com/tech/css.shtml en-us http://www.htmlcenter.com/tutorials/tutorials.cfm?id=58&type=CSS CSS is a set of page markup definitions that can be applied to HTML documents to define how pages are rendered. This addition to the HTML tag set can be applied by Authors internally in each HTML document or they can reside in a separate server side file that is referenced and applied to the document. The end user may also define their own Style Sheet that resides on their local system to be applied to all of the documents that they browse. So, what are the advantages of CSS and HTML... http://www.htmlcenter.com/tutorials/tutorials.cfm?id=59&type=CSS Tutorial Written By: Bob Lists CSS Selectors can provide the Author extended control over how their Lists are formatted. Properties can be applied to the markers that appear before the list items to provide order to the information. In addition to the regular list styles that are available in HTML the author can also define their own marker item by using an image. Other proposed CSS declaration values would control how the list item markers are applied and indented in relation to the... http://www.htmlcenter.com/tutorials/tutorials.cfm?id=53&type=CSS Tutorial Written By: Bob Aural style sheets To provide visually impaired users access to your pages CSS has provided some formatting declarations that will control how your pages are converted to synthesized speech. To date there are no browsers or addon products that will take advantage of these features. One similar application would be the Hawaii Education Literacy Project's Freeware application Read To Me. Although their program uses proprietary scripting to define how web pages are... http://www.htmlcenter.com/tutorials/tutorials.cfm?id=56&type=CSS Tutorial Written By: Bob Style Sheets in External Files Link To define an external Style Sheet to be used to format your HTML you use place a Link element in the Head area of the HTML file. The basic tag would be: <LINK REL=stylesheet HREF="mystyle.css"> Where HREF tells the location and file name and REL indicates the file is a Style Sheet. Additional Declarations include: Media Media is used to define the application of the CSS to its end use. If more than one external style sheet is... http://www.htmlcenter.com/tutorials/tutorials.cfm?id=63&type=CSS Tutorial Written By: Bob Tips & Tricks Link Color Want to make some of your links a different color? Try adding a color style to your link. <A href="file.html" style="color: green" > click here </A> Mouseover Link Color Want to make your links change a different color? Try using the hover declaration. Works in IE4 & IE5 <style> A:hover {color:green} </style> <A href="file.html" > click here </A> No Underline Link Want to remove the underline from your links? Try adding a color style to... http://www.htmlcenter.com/tutorials/tutorials.cfm?id=62&type=CSS Tutorial Written By: Bob Text Formatting Where Font attributes apply to the character level Text Formatting applies to how the characters are manipulated to makeup words and how words are used to make sentences. Indenting The text-indent property will allow you to indent the first line of a block of text. Values include: length, percentage P { text-indent: 3em } Text Alignment Defines how a block of text will be aligned within a containing element. Values include: left, right, center,... http://www.htmlcenter.com/tutorials/tutorials.cfm?id=60&type=CSS Tutorial Written By: Bob Selectors A Selector is the definition of a formatting Style that can be applied to a HTML Element. The Selector has three basic parts: Element { Declaration : Value } The Declaration and Value are surrounded by {} braces and the Declaration is separated from the value by a colon : and a space. The Selectors relation to common HTML would be similar to this tag structure that is used to define the color of a font: < font color = orange > Where Font is the Element... http://www.htmlcenter.com/tutorials/tutorials.cfm?id=57&type=CSS Tutorial Written By: Bob Font Specifications Font family A font family is a group of fonts that resemble each other. When you are defining your selector to set the font family your text will be rendered in you can use Exact Names that refer to fonts that are installed on the enduser's system (Arial, Verdana) or you can define Generic names as a last resort. Possible Generic Font Family names include: cursive, fantasy, mono-space, serif and sans-serif. When you are defining Generic... http://www.htmlcenter.com/tutorials/tutorials.cfm?id=55&type=CSS Tutorial Written By: Bob Cursors To add context to the elements in your documents you can use the Cursor property to control how the pointer will be displayed when it passes over your elements. This declaration only works in IE4 Animated cursors can not be defined. Values and their descriptions include: auto: Allows the Enduser's browser to select the Cursor. crosshair: Crosshair default: Default Cursor pointer: Pointer that indicates a link. move: Indicates something is to be moved... http://www.htmlcenter.com/tutorials/tutorials.cfm?id=54&type=CSS Tutorial Written By: Bob What is Cascading? Because both the Author and the Enduser have the ability to use and apply their own style sheets, Cascading is used to control which Style Selector will be used and which Style Selectors will be overridden. Normally if the Author and Enduser apply different values to the same element the author's settings will override the enduser's. However because there are situations where the enduser's settings should have a higher priority the cascading... http://www.devarticles.com/c/a/Web-Style-Sheets/The-Power-of-CSS/ ( Page 1 of 4 ) CSS or cascading style sheets are used to create a set of styles that can be applied to your fonts, tables and most other attributes of your web page. These styles allow you to create a much cleaner, faster web page that search engines love and also makes life much easier on the designer when global changes to these styles need to be applied. It is also always critical to always keep in mind your target audience and the average Internet connection speed these users have.... http://www.devarticles.com/c/a/Web-Style-Sheets/Learn-CSS-part-1/ ( Page 1 of 7 ) While HTML lets you do many things, Cascading Style Sheets (CSS) let you do even more. In particular, they can save you a great deal of work when you want to make changes to the appearance of a Web page or even an entire website. This first article in a series covering CSS will explain where the CSS specification comes from and show you just a few of the ways you can use CSS. Welcome to the series Learn CSS (Cascading Style Sheets) . This series of articles will give you... http://www.xml.com/pub/a/1999/01/walsh2.html by Norman Walsh January 19, 1999 XSL and Cascading Style Sheets (CSS) have similar goals, and it's useful to compare them. XSL is more powerful than CSS in many ways, but it's also more complex. XSL and CSS are not competitors. For some common applications (like HTML+ documents that use mostly HTML but have a few extra non-HTML tags thrown in), CSS will be the easiest solution. For others, the manipulative power of XSL will be required. Although very different, XSL and CSS have two... http://www.devarticles.com/c/a/Web-Style-Sheets/Learn-CSS-part-2-Units-of-Measurement/ ( Page 1 of 5 ) In this second article in a multi-part series covering Cascading Style Sheets (CSS), we will discuss units of measurement for establishing the size of certain elements in your Web page. You will learn the difference between absolute and relative units of measurement, and which ones are better to use for particular purposes. You have been introduced to CSS in the first article. Now we will discuss the basic concepts that you should understand in order to maximize your CSS... http://www.devarticles.com/c/a/Web-Style-Sheets/Cross-Browser-Issues-CSS-Hacks-Understanding-Compatibility/ (Page 1 of 5 ) One of the greatest problems with CSS, or Cascading Style Sheets, is the issue of cross browser compatibility. What may look great in Mozilla browsers looks terrible in Internet Explorer, and may totally break in Netscape. The biggest mistake a web designer or developer using CSS can make is to design for only one browser, or to assume that since the largest group of viewers use IE, to disregard its flaws that are apparent in other browsers. This article and the next in... http://www.developerfusion.com/show/3833/ by Gez Lemon Read Comments Rate this resource Viewed 215 times Rating: 2 users 4 out of 5 Next > Cascading Style Sheets (CSS) were introduced by the World Wide Web Consortium to help determine the layout of an HTML document. Removing the formatting from the HTML document allows you to quickly apply a style to a whole site, rather than going through each document and changing the tags that represent the style. It also means that the content of the HTML document isn't bloated by extra... http://www.devarticles.com/c/a/Web-Style-Sheets/Cross-Browser-Issues-CSS-Hacks-Explained-Tips-Tricks-Fixes/ (Page 1 of 5 ) Anyone who creates Cascading Style Sheets knows that Internet Explorer is a headache of a browser to build for because of the way it handles CSS. In this article, Jennifer goes into detail about how to deal with some of the most common bugs, and notes which ones may be fixed in IE 7. In the previous article (which you can read here ), I covered some cross browser compatibility issues that web developers and designers who use Cascading Style Sheets, or CSS, may run across.... http://www.intranetjournal.com/articles/200102/csstutorial1a.html - Introduction - CSS Background properties - CSS Classification properties - CSS and Printing - CSS Pseudo Classes and Elements CSS Tutorial Part I Of Interest · Intranet eXchange Discussion Board · Advice and Opinions email this page Jim Miller , Editor Intranet News Ingeniux Content Management System Goes to School Stellent Content Management to Aid British Red Cross Search Continues with Intelliseek Search Server Enterprises Drives Demand for Content Delivery Network Services More... http://www.devarticles.com/c/a/Web-Style-Sheets/Learn-CSS-part-7-Pseudo-Elements/ ( Page 1 of 6 ) We have discussed CSS selectors in the last three articles in this sereis. We have said that a selector can be a markup element, an attribute selector based on the class and ID attributes, or a structured selector based on the document structure. CSS introduces pseudo elements, which we will be discussing in this article. This is one area of functionality that you can't achieve using HTML, and you will be amazed how easily you can achieve it in CSS. As you know, a... http://www.devarticles.com/c/a/Web-Style-Sheets/CSS-shorthand-at-a-glance/ ( Page 1 of 8 ) What could be simpler and faster than using CSS to set up your website? Using CSS shorthand to set up your website. While not all browsers support all of CSS shorthand's features, enough of them are supported to allow you to write tighter code, and create a website that loads more quickly. CSS is one of the simplest and most convenient tools available for Web developers. As you probably know, it s a language for defining the formatting and visual presentation used in a... http://www.devarticles.com/c/a/Web-Style-Sheets/Learn-CSS-Selectors/ ( Page 1 of 4 ) So far in our series covering CSS, we have used only the simplest type of selector. There are many other types of selectors, which give you a lot of power to adjust the styling of your Web documents. In this article, you will learn about the group, universal, class and ID selectors. We have been using the simplest type of selector in CSS, namely the element selector, like p, h4, body and so on, which apply certain style and formatting rules to all occurrences of the... http://www.devarticles.com/c/a/Web-Style-Sheets/Learn-CSS-Selectors-Part-3/ ( Page 1 of 4 ) This will be the last discussion about CSS selectors in this series. In this article we will discuss the descendant, child and sibling selectors, with numerous code examples. It is the sixth article in our series covering CSS. To understand structured CSS selectors, you need to understand how markup documents like HTML documents are structured. As you know, every HTML document begins with the element <HTML>. This is called the root element because it's the beginning of... http://www.devarticles.com/c/a/Web-Style-Sheets/Learn-CSS-Introduction-to-Inheritance-Specificity-and-Cascade/ ( Page 1 of 4 ) We are still discussing the basic concepts of CSS. In this article (and the next part) we will talk about how the structure of the CSS document can affect Web page design. Actually, there's something that I haven't discussed until now, which is what are the places that we can use to write styles and how it can affect the Web page. This is also related to the cascade, inheritance and specificity concepts which help you to understand how to structure your CSS document.... http://www.eggheadcafe.com/articles/20030221.asp By Peter A. Bromberg, Ph.D. Printer - Friendly Version Recently at work I got handed a CSS stylesheet to use that I was completely unfamiliar with, and asked to doctor up some HTML reports I'm working on to make them look nicer. That's pretty easy stuff if you are the person who authored the CSS or if you are familiar with using it. But generally, stylesheets have rules that are related to each other by design, in order to create a "content concept" for the site they were designed for,... http://www.devarticles.com/c/a/Web-Style-Sheets/Learn-CSS-Manipulating-Colors/ ( Page 1 of 5 ) In the thrid part of this series still covering CSS Basics, Michael Youssef discusses manipulating colors in CSS. He also takes a brief look at the hexadecimal number system and how it's useful with color values. He also defines the meaning of a keyword and the Hexadecimal number system. Colors can change the way your websites look, and your users form a first impression from the colors you use. So even if your content is very unique, bad colors will mean fewer users. In... http://www.devarticles.com/c/a/Web-Style-Sheets/Learn-CSS-Selectors-part-2/ ( Page 1 of 7 ) In the first article covering selectors, we discussed the CSS group, universal, class and ID selectors. In this article, we continue our discussion of selectors with various attribute selectors. Attribute Selectors CSS 2 introduced four attribute selectors. CSS 3 introduced three more, so we will be discussing seven attribute selectors in this article. As the name implies, attribute selectors apply certain styling properties to the element (or elements), based on the... http://www.phpbuilder.com/columns/tim20000821.php3 Tim Perdue Whoever said CSS would solve all your cross-platform browser display issues needs to lay off the pipe a little. I have yet to get CSS to work perfectly across all browsers / platforms, but I have gotten it to work "good enough" to get by. I did it by using some fairly simplistic browser detection, as in recycling a library I wrote for SourceForge (which was recycled from a library on GotoCity.com). Here are some of the things I discovered while setting up CSS on a handful of... http://www.xml.com/pub/a/2005/01/19/print.html by Håkon Wium Lie , Michael Day January 19, 2005 Longtime readers of XML.com will remember the battles between XSL and CSS that took place in these columns in 1999 and that were memorialized in XSL and CSS: One Year Later . Since then, the two languages have coexisted in relative peace: CSS is now used to style most web sites, XSLT (the transformation part of XSL) is used by many server-side, and XSL-FO (the formatting part of XSL) has found a niche in the printing industry. A recent... http://www.oreillynet.com/pub/a/javascript/synd/2002/11/15/css_pitfalls.html by Peter-Paul Koch and Apple Developer Connection 11/15/2002 As we know all too well, the Windows and Macintosh builds of Microsoft's Internet Explorer 5 are based on different rendering engines and therefore react differently to the same HTML or CSS. This means that Web developers have to test their pages in both browsers--they can't assume that a page that works in one will work in the other. In general, the Mac version of Explorer is more strict in its standards compliance (and... http://www.devarticles.com/c/a/Web-Style-Sheets/DIV-Based-Layout-with-CSS/ ( Page 1 of 9 ) Most Web page designers use a table-based layout to achieve a coherent and consistent look. There's a different way to achieve the same look. Using CSS and DIV tags reduces markup code, speeds up page downloads, separates content from its visual presentation, and brings your code closer to Web standards compliance--all while making your website more appealing to search engine spiders. Alejandro Gervasio explains how it's done, with copious examples. Introduction We see... http://www.devarticles.com/c/a/HTML/Preloading-HTML-Content-with-CSS/ ( Page 1 of 6 ) Website designers often use JavaScript to expose dynamic content to visitors. Sadly, updating JavaScript can be painful at best. CSS can help to overcome JavaScript's limitations -- and the two together open up some lovely possibilities. Alejandro Gervasio explains, with dynamic examples. When we re dealing with the common task of fetching some dynamic content to our Web pages to make them more appealing and juicy to visitors, usually we retrieve some database records... http://www.devarticles.com/c/a/Web-Style-Sheets/CSS-Standards-Compliance-in-Internet-Explorer-7/ (Page 1 of 4 ) There has been much anticipation and intense hype surrounding the release of Internet Explorer 7. Improvements range from better security issues to customization of user features; but the excitement in some web developers has been prompted by the compliancy standards of CSS that IE 7 embraces. I can also say that an equal number are trying not to vomit at the idea of having to go back and seek out every style sheet they wrote that may break in the light of the new... http://www.devarticles.com/c/a/Web-Style-Sheets/CSS-Constants/ ( Page 1 of 7 ) One feature designers often wished they had with style sheets are constants - the chance to define something once and reuse it over and over in the style sheet document. This article shows some techniques for how to achieve that and discusses their pros and cons. A constant nagging When reading CSS related forums or mailing lists, you ll sooner or later find someone asking how they can define a constant in CSS - something to define once in the CSS document and reuse... http://www.devarticles.com/c/a/Reviews/Super-Styling-with-a-Dedicated-CSS-Editor/ ( Page 1 of 6 ) If you ve read Dan Wellman's introductory series on XUL, you ll know that there are better uses for your humble text editor than creating stylesheets. The move from Notepad to a dedicated CSS editor will increase your output and give you an advanced environment in which to develop more complicated and effective stylesheets. Notepad is great, because it s always there (or something very similar), so on almost any machine you can load it up and begin work. It is also a... http://www.developer.com/dhtml/article.php/640801 By Joe Burns Go to page: 1 2 Next So. Do you like my scrollbar? I've found that most users don't like scrollbars all that much. Most would rather click and go from page to page, but scrollbars are part of the Web and differing screen sizes make it nil to impossible to never attain a scroll bar. I ran across only one of these CSS commands while surfing my University's Web site . The Webmaster had placed them on the homepage to get a nice green scroll. That's one of the school's colors. I... http://www.devarticles.com/c/a/HTML/HTML-CSS-and-tables-the-beauty-of-data/ ( Page 1 of 7 ) Assistive technology gags when it encounters HTML tables coded by the old school methods. Using the new coding lets you make tables more accessible to your users, and it really isn't that much harder--just remember what a table really is. Chris Heilmann reminds us, and gives an introduction to CSS. HTML tables are still frequently discussed on various mailing lists, forums and chat channels. Many people have realized that they are not the most clever method of defining... http://www.devarticles.com/c/a/JavaScript/Creating-PopUp-Notes-with-CSS-and-JavaScript-Part-I/ ( Page 1 of 4 ) A pop-up note contains information and can be made to appear when a visitor to your website moves the mouse over the appropriate area. Alejandro Gervasio explains how to create several different kinds of pop-up notes using CSS and JavaScript. Within the structure of Web pages, pop-up notes are useful accessibility elements. They are often used to create footnotes, sidebars for articles, or to define an acronym, among other things. They're widely employed by numerous... http://www.devarticles.com/c/a/Web-Style-Sheets/Introduction-to-CSS-Positioning-Properties-Part-1/ ( Page 1 of 6 ) Web designers gained a great deal from the CSS2 specification, especially when it comes to increased flexibility to position HTML elements exactly where they want them within Web pages. Keep reading to learn more. Today, many websites are progressively relying more and more on CSS to define the appearance of each Web document. This noticeable step forward takes advantage of the powerful capabilites that style sheets have to offer to Web designers. The implementation of... http://www.devarticles.com/c/a/Web-Style-Sheets/Introduction-to-CSS-Positioning-Properties-Part-2/ ( Page 1 of 6 ) In this second part of a two-part article, we examine more positioning properties available in the CSS2 specifications, and use what we've learned to build a simple drop-down menu without employing any JavaScript. Welcome back! Here we are again, in order to closely look at more CSS Positioning properties. In part 1 of this article, we've explained some basic definitions and explored different commonly used properties. Now, it's time to move forward and find out more... http://www.devarticles.com/c/a/Web-Style-Sheets/Learn-CSS-Pseudo-Classes/ ( Page 1 of 5 ) We met pseudo elements in the last article. In this article we will discuss pseudo classes, which give you the ability to apply certain styling rules on specific states of an element. In this part we discuss the following pseudo classes: :link, :visited, :hover, :active and :focus, :root, :first-child, and :last-child. Note that with CSS 3 there are many new pseudo classes. Not all of them are implemented, however, so I will discuss only the pseudo classes that have been... http://www.devarticles.com/c/a/JavaScript/Creating-popup-notes-with-CSS-and-JavaScript-Part-II/ ( Page 1 of 4 ) A pop-up note contains information and can be made to appear when a visitor to your website moves the mouse over the appropriate area. In our second of two articles about pop-up notes, Alejandro Gervasio explains how to create multiple pop-up notes on a Web page using CSS and JavaScript. Creating multiple pop-up notes Once we ve taken an in-depth look at our previous example, it s easy to generate multiple pop-up notes with JavaScript. The basic idea rests on tying each... http://www.devarticles.com/c/a/Web-Design-Standards/Matching-div-heights-with-CSS-and-JavaScript/ ( Page 1 of 4 ) It's not unusual for the layout of a Web page to feature multiple columns. Unfortunately, when creating this layout while using general <div> containers, you can end up with columns of uneven height, depending on their content. This looks very unprofessional. Alejandro Gervasio explains a way to keep your column heights even using CSS and JavaScript. Introduction CSS based design is really a powerful approach for most Web developers who consciously keep a website's... http://www.htmlcenter.com/tutorials/tutorials.cfm?ID=61&type=CSS Tutorial Written By: Bob Tables Caution should be used when defining selectors that alter the proportions and layout of your tables. If selectors are used to set widths or row and column spanning there is the possibility that your documents could become unreadable by User Agents that can not correctly parse the selectors. Tables are often used by Authors to organize their page content into readable and visually appealing documents. Tables are defined by using a layered grid. The <TABLE>... http://www.htmlcenter.com/tutorials/tutorials.cfm?ID=131&type=Photoshop Tutorial Written By: Surefire This tutorial will teach you how to do a cool metallic texture and how to apply it to a metallic looking pane. Create a new image about 100x100. Use the Linear gradient tool with a Spectrum gradient selected. Make the gradient from the top left corner to the bottom right corner. Make this image into grayscale. Then adjust the brightness and contrast as shown. Now you have a neat metallic looking texture. You can use this effect on text to give great effect.... http://www.devarticles.com/c/a/Web-Style-Sheets/What-is-CSS/ ( Page 1 of 5 ) Style sheets are a very powerful tool for the Web site developer. They give you the chance to be completely consistent with the look and feel of your pages, while giving you much more control over the layout and design than straight HTML ever did. Style sheets are a very powerful tool for the Web site developer. They give you the chance to be completely consistent with the look and feel of your pages, while giving you much more control over the layout and design than... http://www.oreillynet.com/pub/a/mozilla/synd/2002/10/15/xml_transformations.html by Scott Andrew LePera and Apple Developer Connection 10/15/2002 As the adoption of XHTML continues to expand in Web development circles, the inevitable question arises: Can't we just skip over the browser-specific cruft of HTML and create our documents in pure XML? XML in the browser has been the subject of many spirited discussions about bleeding-edge Web development. Some feel that XML in place of HTML isn't ready for prime time due to the lack of user agents that can properly parse... http://www.devarticles.com/c/a/JavaScript/Building-a-Dynamic-Menu-with-CSS-and-Javascript-concludedt-2/ ( Page 1 of 4 ) Dynamic menus that highlight the link where a website visitor is located can make site navigation a much more pleasant experience. In this article, the second and final part of the series, we learn more about dynamic menus in JavaScript and then check out the menu class. The Dynamic Menu Before diving into brand new material, it s necessary to step back for a moment and refresh our memory of the first article. Let s look back and reorder our ideas befor making our way... http://www.devarticles.com/c/a/JavaScript/Building-a-Dynamic-Menu-with-CSS-and-JavaScript-part-1/ ( Page 1 of 4 ) Dynamic menus that highlight the link where a website visitor is located can make site navigation a much more pleasant experience. In this article, the first in a series, we will cover the construction process of a dynamic menu, extensively using the DOM methods within user-defined JavaScript objects to help us learn how to build more complex structures. In the ever-growing world of the Web, dynamic sites have found a well established position that expands design... http://www.devarticles.com/c/a/JavaScript/Building-Rounded-Corners-With-CSS-and-JavaScript/ ( Page 1 of 6 ) Rounded corners give your website a professional, polished look. Unfortunately, the old school way of building rounded corners is rather messy and involves a lot of redundant markup. This article explains a much cleaner way of achieving the same effect. Introduction Surely, across our numerous visits, when surfing the Web, we have seen a lot of websites presenting fancy and very attractive background effects on their pages. From simplistic approaches to fairly complex... http://www.devarticles.com/c/a/Web-Style-Sheets/Dynamic-Galleries-with-DOM-and-CSS/ ( Page 1 of 8 ) Thumbnail galleries are one of the first things that made the Web surfing experience more interesting. These are whole pages of preview images, which, when clicked on, became the big ones allowed for fast scanning of the image material on offer and easy access to selected pictures. Chris Heilmann shows you how to create and maintain a thumbnail gallery. Old School Thumbnail Galleries The first and still best way to create and maintain a thumbnail gallery is to create it...