Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
220 lines (134 sloc) 13 KB
<!doctype html>
<!--[if lt IE 9]> <html class="no-js oldie" lang="en"> <![endif]-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>CSS Vocabulary | Divya Manian</title>
<meta name="author" content="Divya Manian">
<meta name="description" content="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 &hellip;">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="canonical" href="">
<link href="/stylesheets/screen.css" rel="stylesheet">
<link href="" rel="alternate" title="Subscribe" type="application/atom+xml">
<link href="" rel="alternate" title="Subscribe to Web Development updates" type="application/atom+xml">
<body >
<div class="container">
<div class="content">
<header role="banner"> <h1><a href="/">Divya Manian</a></h1>
<h2><a class="twitter" href="">twitter</a> <a class="rss" href="">RSS Feed</a> <a class="youtube" href="">Youtube Channel</a> <a class="github" href="">Github</a></h2>
<nav class="sitenav"><a href="/">Home</a>
<a href="/archives">Archives</a>
<a href="/about.html">About</a>
<nav class="article">
<a class="previous" href="/active-web-development.html" title="Active Web Development">❬</a>
<a class="next" href="/book-reviews-for-october-2010.html" title="Book Reviews for October 2010">❭</a>
<time datetime="2010-11-02T00:00:00-07:00" pubdate><span class='month'>Nov</span> <span class='day'>02</span> <span class='year'>2010</span></time>
<h1 class="entry-title"><a href="/css-vocabulary.html">CSS Vocabulary</a></h1>
<div class="entry-content"><p>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. </p>
<p>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.</p>
<h3>CSS Vocabulary</h3>
<li><strong>Property:</strong> The style that you are applying to a selector, e.g. <code>border</code>. </li>
<li><strong>Value: </strong>The value that the property can have, e.g. <code>1px</code>. </li>
<li><strong>Keyword:</strong> A word that is defined within the CSS specs and hence must never appear within quotes when used. E.g. <code>red</code>, <code>solid</code>, <code>dotted</code>.</li>
<li><p><strong>Length Units:</strong>Values can be declared in units (e.g., 1px, 2%). <a href="!/nimbuin/status/28960734159">This summarizes major units you should be concerned with</a>.</p></li>
<li><strong>Functional Notation:</strong> Any value that is specified as a function (an identifier followed by <code>()</code>). Mainly used to denote colors, URIs, attributes, and transforms: e.g. <code>rgba(0, 0, 0, 0.5)</code>, <code>url('im.png')</code>, <code>attr('href')</code>, <code>scale(20)</code>. Here are <a href="">some more details on functional notation</a>.</li>
<li><p><strong>Declaration:</strong> The set of property names and values like so:</p>
<pre>background: red;</pre>
<li><p><strong>Declaration Block:</strong> A set of declarations within <code>{}</code>, e.g.</p>
clear: both;
color: sky;
<li><p><strong>Rule or Rule Set:</strong> Selector(s) followed by a declaration block. E.g.</p>
<pre>#lovelyweather {
clear: both;
color: skyblue;
<p>This <a href="">demo</a> shows what each part of a ruleset means. Hover on each of the terms to see what they mean. </p>
<li><p><strong>Selector</strong> The way you declare which elements the styles should apply to. <code>#lovelyweather</code> in the above example is a selector. There are <a href="">different kinds of selectors</a>:</p>
<li><strong>Class:</strong> The most commonly used selector. E.g. &#8220;.cloudy&#8221; to select an element with classname cloudy (e.g. &#8217;<div class=cloudy></div>&#8217; There can be more than 1 element with the same classname. </li>
<li><strong>ID:</strong> Use this sparingly. You cannot reuse an ID within the same page and used only to identify an element uniquely. E.g. <code>&lt;div id=lovelyweather&gt;&lt;/div&gt;</code></li>
<li><strong>Attribute Selector:</strong> If you use any attribute other than class or id to identify an element in a stylesheet, you would be using Attribute Selectors. You can also do basic pattern matching within an attribute selector (so if you would like to do basic pattern matching for selectors using class or ID attributes, you would want to use attribute selectors).</li>
<li><strong>Pseudo-Classes: </strong> Classes that are applied to elements based on information that is not present in the markup, e.g. <code>:first-child</code> or <code>:last-child</code>. Do note that the selectors are parsed from right to left (<a href="">see the demo</a>). You cannot use <code>section article:first-child</code> to select the first occurrence of <code>article</code>, if the first child of <code>section</code> is <code>h1</code> and not <code>article</code>. Likewise with the <code>:nth-child</code>, and <code>:last-child</code> pseudo-classes. </li>
<li><strong>Pseudo-Elements</strong> Pseudo-elements differ from Pseudo-Classes in that they actually create an element in the document tree. This is almost the first instance of CSS modifying the HTML document tree. You should ideally use pseudo-elements with &#8220;::&#8221; instead of &#8220;:&#8221; (but most browsers accept &#8220;:&#8221; notation for CSS 2.1 pseudo-elements). Pseudo-elements are: <code>::first-line</code>, <code>::first-letter</code>, <code>::before</code>, <code>::after</code> (<a href="">See the demo for how pseudo-elements work</a>). </li>
<li><p><strong>Combinators:</strong> The selection of an element based on its occurrence in relation to another element (chosen by the choice of combinator: whitespace, <code>&gt;</code>, <code>+</code>, or <code>~</code>). You can have:</p>
<li><strong>Descendant Combinator:</strong> This is the most common usage, e.g. <code>#lovelyweather h1</code>.</li>
<li><strong>Child Combinator:</strong> Select an element if it is a direct child of another element (and not a grandchild of that element). </li>
<li><strong>Adjacent Sibling Combinator: </strong>The element that is immediately adjacent to another element. </li>
<li><strong>General Sibling Combinator:</strong> The element that is adjacent, but not immediately to another element. </li>
<p><a href="">See demo for all these combinators.</a></p>
<li><strong>At-Rules:</strong> Rules that begin with the <code>@</code> character, e.g. <a href="">@import</a>, <a href="">@page</a>, <a href="">@media</a>, and <a href="">@font-face</a>.</li>
<li><strong>Media Features:</strong> With media queries, you can target the styles depending on the feature of that particular medium. A popular use of a media feature is the <code>min-width</code> and <code>max-width</code> to detect iOS devices. </li>
<li><strong>Vendor-specific Extension: </strong>Exactly what it states. They provide functionality specific to that particular vendor (i.e. the browser). They do not always necessarily represent a feature declared in a standard. Peter Beverloo maintains an <a href="">exhaustive list of vendor-prefixed CSS properties by browser</a>. See <a href="">this demo for how vendor-specific extensions work</a>.</li>
<p>There is <a href="">similar confusion with HTML terms</a>. My hope is this makes it easier for everyone to communicate exactly what they mean when taking about markup and style. </p>
<p><small>Thanks to <a href="">ajpiano</a>, <a href="">akahn</a>, and <a href="">desandro</a> for the initial feedback!</small></p>
<p class="meta">This post was posted by
<a href="/about.html">Divya Manian</a>
<time datetime="2010-11-02T00:00:00-07:00" pubdate><span class='month'>Nov</span> <span class='day'>02</span> <span class='year'>2010</span></time> in
<span class="categories">
<a class='category' href='/categories/web-development/'>Web Development</a>
. If you would like to update this post, <a href="">please send a pull request</a>.
<div id="disqus_thread" aria-live="polite"><noscript>Please enable JavaScript to view the <a href="">comments powered by Disqus.</a></noscript>
<aside id="articles">
<p><img class="avatar" src="/assets/divya.png" height=50> <a href="">Divya Manian</a> is a Web Developer in Seattle. <a href="/about.html">More about me ❭</a></p>
<h2>Posts on Web Development</h2>
<ul><li><a href="/html5please.html">html5please</a></li><li><a href="/mustache.html">mustache, hogan, handlebars</a></li><li><a href="/redesign-notes.html">Redesign Notes</a></li><li><a href="/summary-of-various-exciting-css-drafts-and-proposals.html">Summary of various exciting CSS drafts and proposals</a></li><li><a href="/this-revolution-needs-new-revolutionaries.html">This revolution needs new revolutionaries</a></li><li><a href="/some-css-transition-hacks.html">Some CSS Transition hacks</a></li><li><a href="/safe-css-defaults.html">Safe CSS Defaults</a></li><li><a href="/unplugged-2011.html">Unplugged 2011</a></li><li><a href="/bokeh-with-css3-gradients.html">Bokeh with CSS3 Gradients</a></li><li><a href="/making-pure-css3-demos-better.html">Making "Pure CSS3" demos better</a></li><li><a href="/web-opener-at-opera.html">Web Opener at Opera</a></li><li><a href="/current-color-in-css.html">Current Color in CSS</a></li><li><a href="/css-vocabulary.html">CSS Vocabulary</a></li><li><a href="/active-web-development.html">Active Web Development</a></li><li><a href="/sexy-css3-buttons.html">Sexy CSS3 Buttons</a></li><li><a href="/accessible-css-barcharts.html">Accessible CSS Barcharts</a></li><li><a href="/svg-is-coming.html">SVG is coming!</a></li><li><a href="/wee-marquee.html">Wee! Marquee</a></li><li><a href="/vignettes-with-css3-box-shadows.html">Vignettes with CSS3 Box Shadows</a></li><li><a href="/drop-shadows-with-css3.html">Drop Shadows with CSS3</a></li><li><a class="btn" href="/categories/web-development/">More</a></li></ul>
<footer role="contentinfo"><p>
Copy to your heart’s content 2012 - Divya Manian -
<span class="credit">Powered by <a href="">Octopress</a></span>
<script type="text/javascript">
var disqus_shortname = 'nimbublog';
var disqus_developer = 1;
var disqus_url = '';
var disqus_identifier = '';
(function () {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
<script src="/javascripts/octopress.js"></script>
var _gaq=[['_setAccount','UA-97188-1'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];