Stylesheets
CSS Constants (By: Chris Heilmann)
CSS ConstantsOne 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 naggingWhen 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 ...
Learn CSS, part 1 (By: Michael Youssef)
Learn CSS, part 1While 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, part 2: Units of Measurement (By: Michael Youssef)
Learn CSS, part 2: Units of MeasurementIn 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 ...
Learn CSS, Manipulating Colors (By: Michael Youssef)
Learn CSS, Manipulating ColorsIn 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 ...
Learn CSS, Selectors (By: Michael Youssef)
Learn CSS, SelectorsSo 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 ...
Learn CSS, Selectors, Part 3 (By: Michael Youssef)
Learn CSS, Selectors, Part 3This 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 ...
Using Relative Positioning For Consistent Layout (By: Justin Cook)
Using Relative Positioning For Consistent LayoutConverting a site to Web standards can be quite a struggle. It’s difficult enough to achieve a satisfying layout with positioning, floating, and all that. But it’s downright frustrating to realize that the positioning you’ve chosen doesn’t render consistently in different resolutions, or even multiple browsers in the same resolution! Well, take heart; this article will explain why relative positioning is a trustworthy friend in this case!IntroductionThe future of Web design can more or less ...
Learn CSS, part 7: Pseudo Elements (By: Michael Youssef)
Learn CSS, part 7: Pseudo ElementsWe 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 ...
Learn CSS: Pseudo Classes (By: Michael Youssef)
Learn CSS: Pseudo ClassesWe 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 ...
Learn CSS: Introduction to Inheritance, Specificity, and Cascade (By: Michael Youssef)
Learn CSS: Introduction to Inheritance, Specificity, and CascadeWe 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 ...
