background preloader

CSS

Facebook Twitter

CSS Vocabulary. I realised quite late that to say something meaningful about CSS, I would have to know exactly what the terms used mean. Often, I have asked for help in forums, and have got stuck wondering how exactly to describe my problem. So I thought it would be a good idea to describe all the common terms of CSS. Bookmark this page, if you are prone to panic attacks while racing a deadline and are likely to have issues with your CSS at that time. CSS Vocabulary There is similar confusion with HTML terms. Thanks to ajpiano, akahn, and desandro for the initial feedback! On having layout — the concept of hasLayout in IE/Win. A work in progress. This version: Rev. 8 2008–11–16 Changelog Translations Table of contents Introduction A lot of Internet Explorer's rendering inconsistencies can be fixed by giving an element “layout.” John Gallant and Holly Bergevin classified these inconsistencies as “dimensional bugs,” meaning that they can often be solved by applying a width or height.

HasLayout — A Definition “Layout” is an IE/Win proprietary concept that determines how elements draw and bound their content, interact with and relate to other elements, and react on and transmit application/user events. This quality can be irreversibly triggered by some CSS properties. Microsoft developers decided that elements should be able to acquire a “property” (in an object-oriented programming sense) they referred to as hasLayout, which is set to true when this rendering concept takes effect.

Nomenclature In “non-layout” elements, hasLayout is not triggered, i.e. a pure div without a dimension can be a “non-layout ancestor”. Lists. Shorthand properties - CSS. Definition Shorthand properties are CSS properties that let you set the values of several other CSS properties simultaneously. Using a shorthand property, a Web developer can write more concise and often more readable style sheets, saving time and energy. The CSS specification defines shorthand properties to group the definition of common properties acting on the same theme.

E. g. the CSS background property is a shorthand property that's able to define the value of background-color, background-image, background-repeat, and background-position. Tricky edge cases Even if they are very convenient to use, there are a few edge cases to keep in mind when using them: A value which is not specified is set to its initial value. Background properties A background with the following properties: background-color: #000;background-image: url(images/bg.gif);background-repeat: no-repeat;background-position: top right; Can be shortened to just one declaration: Font properties The following declarations: See also. 22 Advanced CSS Text Effects And Web Typography Tips. Understanding CSS’s vertical-align Property. “Vertical-align isn’t working!”

Cried the web developer. The vertical-align property is one of those features of CSS that sounds pretty self-explanatory, but can cause problems for CSS beginners. I think even many CSS veterans have had problems figuring this one out at times. In this post, I’ll try to cover it in an understandable manner. What it Does Not Do The common misconception about vertical-align is that, when it’s applied to an element, it will make all the elements inside that element change their vertical position.

This reminds me of something we used to do back in the days of table-based layouts: <td valign="top"> Whatever... <td valign="top"> Whatever... In the case of this table cell example, the “valign” property (now obsolete in HTML5) would cause the elements inside of it to get pushed to the top of the table cell. But this is not how vertical-align works. What it Actually Does The vertical-align property can be broken down into three easy-to-understand steps: Why?

Some Visuals. CSS Layers - CSS tutorial. With CSS, it is possible to work with layers: pieces of HTML that are placed on top of the regular page with pixel precision. The advantages of this are obvious - but once again Netscape has very limited support of CSS layers - and to top it off: the limited support it offers is quite often executed with failures. So the real challenge when working with layers is to make them work on Netscape browsers as well. First look at this example: Second look at the code: To create a layer all you need to do is assign the position attribute to your style.

The position itself is defined with the top and left properties. Finally, which layer is on top is defined with the z-index attribute. You can either position your layer calculated from the upper left corner(absolute) or calculated from the position where the layer itself is inserted (relative). While the position property indicates the out spring of our coordinate system, the left and top properties defines the exact position of our layer. A Whole Bunch of Amazing Stuff Pseudo Elements Can Do. It's pretty amazing what you can do with the pseudo elements :before and :after.

For every element on the page, you get two more free ones that you can do just about anything another HTML element could do. They unlock a whole lot of interesting design possibilities without negatively affecting the semantics of your markup. Here's a whole bunch of those amazing things. A roundup, if you will1. Give you multiple background canvases Because you can absolutely position pseudo elements relative to their parent element, you can think of them as two extra layers to play with for every element.

Nicolas Gallagher shows us lots of applications of this, including multiple borders, simulating CSS3 multiple backgrounds, and equal height columns. Expand the number of shapes you can make with a single element All of the shapes above any many more can be created with a single element, which makes them actually practical. Here's an example of a six-pointed star: Show URL's of links in printed web pages. CSS Design: Taming Lists. As early as July of 1999 I was pontificating on email lists about the virtues of style sheets. Some things never change. What has changed is how I think about CSS, and the underlying structure of (X)HTML to which it is applied.

For example, I find that most pages on the web contain a menu of links in a navigation area. These are often marked up as a string of links, often in separate DIVs or paragraphs. Structurally, however, they are a list of links, and should be marked up as such. Of course the reason that we don’t mark them up in that way is that we don’t want a bullet in front of every link in our navigation area. In this article, I’ll demonstrate how to use CSS to bring unwieldy lists under control. Setting the stage#section1 For purposes of this article, I am using unordered lists.

<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li><li>Item 5 we'll make a bit longer so that it will wrap</li></ul> Positioning#section2 Note that the markers lie outside of the DIV. Webkit CSS properties. Styles sheets optimization. This article discusses the creation of a base styles sheet for WebKit-based browsers.

A companion table lists all rules found in the UA’s styles sheet plus rules from a reset, a base and a fonts’ styles sheet. The idea is to leverage “native” rules while implementing the styling of combined styles sheets. For the purpose of this exercise, I am using YUI3 sheets, but the technique is the same regardless of which reset, base or fonts styles sheets you use. Bottom line, you want to avoid overwriting declarations or disabling styles that cater to directionality. before, after, end and start The WebKit styles sheet contains the following: margin and padding properties -webkit-margin-before -webkit-margin-end -webkit-margin-after -webkit-margin-start -webkit-padding-before -webkit-padding-end -webkit-padding-after -webkit-padding-start text-align values: start end The above are writing-mode dependent properties and keywords.

The good news The bad news margin-right: 1em; -webkit-margin-start: 2em; padding: 0; The difference between "The Flow" and "Positioning" for Web Pages. Html/css - How to center floating elements. Understanding z-index. How to use it The six color boxes (A, a, B, b, C, c) are "draggable", which means you can use your mouse to position them anywhere in the page.The input elements in the colored fieldsets below let you set z-index and position values for each one of these six boxes. These fieldsets are color coded, which means a fieldset's background color matches the background color of the box it is supposed to style. Set and reset Things to keep in mind: The z-index value is set once the input field loses focus or if the user presses the enter key while the caret is in that field, so you need to type some value and then TAB out of the box (or click outside of that box) for the new value to "kick-in".Dragging a box makes its position relative (note that the relevant radio button is "checked" only after that box is "dropped").The "set" and "reset" links above allow you to remove the negative margin applied by default to box A, B, C and also let you revert the document to its original state.

Markup Hint. CSS Positioning 101. If you’re a front end developer or a designer who likes to code, CSS-based layouts are at the very core of your work. In what might be a refresher for some, or even an “a-ha!” For others, let’s look at the CSS position property to see how we can use it to create standards-compliant, table-free CSS layouts. Article Continues Below CSS positioning is often misunderstood. The CSS specification offers us five position properties: static, relative, absolute, fixed, and inherit. Get with the flow#section1 First, let’s take a step back to recognize the world we’re working in. Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Think of a “box,” as described by the spec as a wooden block—not unlike the ones you played with as a young whippersnapper. Static and relative—nothing new here#section2 The static and relative position properties behave like your childhood blocks—they stack as you would expect.

Example D shows our new markup. A List Apart: For People Who Make Websites. Understanding CSS3 Transitions. It was 1997 and I was sitting in a terribly run-down apartment in beautiful Allston, Massachusetts. A typical late night of viewing source and teaching myself HTML followed a day of packing CDs at a local record label for peanuts (hence the run-down apartment). I’m sure you can relate. Article Continues Below One triumphant night, I pumped my fist in sweet victory. I’d just successfully coded my first JavaScript image rollover. Remember those? I still remember the amazement of seeing a crudely designed button graphic I’d cobbled together “swap” to a different one when hovered over by the mouse.

We’ve come a long way over the past decade in regard to interaction and visual experience on the web. My first JavaScript rollover back in 1997 took me several nights of head scratching, many lines of code that seemed alien to me at the time, and multiple images. We can start to use CSS3 transitions right now as long as we carefully choose the situations in which to use them. The Mystery Of The CSS Float Property. Advertisement Years ago, when developers first started to make the transition to HTML layouts without tables, one CSS property that suddenly took on a very important role was the float property.

The reason that the float property became so common was that, by default, block-level elements will not line up beside one another in a column-based format. Since columns are necessary in virtually every CSS layout, this property started to get used — and even overused — prolifically. The CSS float property allows a developer to incorporate table-like columns in an HTML layout without the use of tables. If it were not for the CSS float property, CSS layouts would not be possible except using absolute and relative positioning — which would be messy and would make the layout unmaintainable.

In this article, we’ll discuss exactly what the float property is and how it affects elements in particular contexts. Definition and Syntax Flickr photo by presentday No More Tables Syntax Float in Practice Conclusion. CSS3 . Info - All you ever needed to know about CSS3.