CSS Terminology

I will add to the terminology over the term, in the meantime I have started the alphabetical list. Note under properties is a complete list with samples.

Links to CSS glossaries onlines

  1. http://www.w3.org/2003/glossary/subglossary/CSS2.rdf/
  2. http://css-tricks.com/web-nerd-terminology-explained/
  3. http://www.design215.com/toolbox/css_guide.php (complete resource and IE only is strategically omitted)

TERMINOLOGY

(copied and pasted from above sites, citation at end of definition)

Accessibility – When accessibility is talked about in reference to websites, it means how easy or difficult it is to access the content for people with disabilities. For example, how easy it is for mobility impaired uses to navigate the site, blind users to read the site, or colorblind people to differentiate links from regular text. css-tricks, nov 29, 2009

ancestor From Glossary of Cascading Style Sheets, level 2 CSS2 Specification (1998-05-12) An element A is called an ancestor of an element B, if and only if B is a descendant of A. W3 CSS glossary Nov. 29 2009

attribute From Glossary of Cascading Style Sheets, level 2 CSS2 Specification (1998-05-12) A value associated with an element, consisting of a name, and an associated (textual) value. W3 CSS glossary Nov. 29 2009

author From Glossary of Cascading Style Sheets, level 2 CSS2 Specification (1998-05-12) An author is a person who writes documents and associated style sheets. An authoring tool generates documents and associated style sheets.W3 CSS glossary Nov. 29 2009

Borked – Something is wrong, usually used in reference to the visual layout of a webpage. “The sidebar dropped down and borked the layout.”css-tricks, nov 29, 2009

child From Glossary of Cascading Style Sheets, level 2 CSS2 Specification (1998-05-12) An element A is called the child of element B if an only if B is the parent of A. W3 CSS glossary Nov. 29 2009

Client-Side refers to a language that is interpreted by the browser itself. For example, JavaScript is downloaded by your browser and then run locally on your machine. Your browser is the “client”.css-tricks, nov 29, 2009

content From Glossary of Cascading Style Sheets, level 2 CSS2 Specification (1998-05-12) The content associated with an element in the source document; not all elements have content in which case they are called empty. The content of an element may include text, and it may include a number of sub-elements, in which case the element is called the parent of those sub-elements.W3 CSS glossary Nov. 29 2009

CSS Comments /* this is a CSS comment, different from an HTML comment */ Design 215, nov 29, 2009

descendant From Glossary of Cascading Style Sheets, level 2 CSS2 Specification (1998-05-12) An element A is called a descendant of an element B, if either (1) A is a child of B, or (2) A is the child of some element C that is a descendant of B. W3 CSS glossary Nov. 29 2009

document language From Glossary of Cascading Style Sheets, level 2 CSS2 Specification (1998-05-12) The encoding language of the source document (e.g., HTML or an XML application). W3 CSS glossary Nov. 29 2009

document tree From Glossary of Cascading Style Sheets, level 2 CSS2 Specification (1998-05-12) The tree of elements encoded in the source document. Each element in this tree has exactly one parent, with the exception of the root element, which has none. W3 CSS glossary Nov. 29 2009

element From Glossary of Cascading Style Sheets, level 2 CSS2 Specification (1998-05-12) (An SGML term, see [ISO8879].) The primary syntactic constructs of the document language. Most CSS style sheet rules use the names of these elements (such as "P", "TABLE", and "OL" for HTML) to specify rendering information for them. W3 CSS glossary Nov. 29 2009

following element From Glossary of Cascading Style Sheets, level 2 CSS2 Specification (1998-05-12) An element A is called a following element of an element B, if and only if B is a preceding element of A. W3 CSS glossary Nov. 29 2009

intrinsic dimensions From Glossary of Cascading Style Sheets, level 2 CSS2 Specification (1998-05-12) The width and height as defined by the element itself, not imposed by the surroundings. In CSS2 it is assumed that all replaced elements -- and only replaced elements -- come with intrinsic dimensions.W3 CSS glossary Nov. 29 2009

Markup – Markup is just another way of saying HTML code, but is slightly more generic and may also be used to reference XML or other “describing” languages. If you hear a phrase like “The site uses very semantic markup”, that means that the website’s HTML code uses very appropriate tags to describe the content it displays, which is a desirable and sometimes difficult thing to do.css-tricks, nov 29, 2009

Nesting is a lot like wrapping but implies being several layers deep. css-tricks, nov 29, 2009

preceding element From Glossary of Cascading Style Sheets, level 2 CSS2 Specification (1998-05-12) An element A is called a preceding element of an element B, if and only if (1) A is an ancestor W3 CSS glossary Nov. 29 2009

Properties (the best CSS Quick reference is at Design 215 - their list is better styled than the below copied and pasted content) Design 215, nov 29, 2009

Properties are listed in alphabetical order. Each property has examples of possible values. Properties are not listed if they are not widely supported or if they are only supported by Internet Explorer.

background: #ffffff transparent url(images/pattern.gif) fixed /* background doesn't move when page scrolls */ repeat repeat-x /* tile an image horizontal only */ repeat-y /* tile an image vertical only */ no-repeat top left center right bottom 2px 1px /* exact positioning, from left top */ Example: #footer { background:transparent url(images/footer.gif) repeat-x bottom; } This example tiles a transparent GIF only in a horizontal direction, at the bottom of an element (perhaps a DIV) that contains id="footer".

background-attachment: fixed

background-color: #ffcc00 transparent

background-image: url(images/something.gif)

background-position: top left center right bottom 2px 1px

background-repeat: repeat repeat-x repeat-y no-repeat

border: 1px none solid dashed dotted double /* needs at least 3px to see effect */ ridge /* regular 3d border needs at least 4px to see effect */ groove /* kind of strange, needs at least 4px to see effect */ inset /* like a recessed bevel */ outset /* like a button bevel */ #000000 Example: div { border:2px solid #ffffff; }

Browser Differences: * borders are drawn INSIDE the container in IE, Opera 7. * borders are drawn OUTSIDE the container in Firefox, Netscape 7, Safari. (part of the annoying "box model" conflict)

border-collapse: collapse

border-top: (set the border on one side)

border-right: (set the border on one side)

border-bottom: (set the border on one side)

border-left: (set the border on one side)

bottom: 4px /* positions an object 4px up from the bottom of its container */ 50%

clear: none left right both Clears a "floated" element. See also: float:

clip: rect(top left bottom right)

color:

      • #000000 /* #RRGGBB, each digit is 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f */
      • rgb(0,0,0) /* (R,G,B), each digit is 0 to 255, does NOT work everywhere */
      • aqua /* #00ffff */
      • black /* #000000 */
      • blue /* #0000ff */
      • fuchsia /* #ff00ff */
      • gray /* #808080 */
      • green /* #008000 */
      • lime /* #00ff00 */
      • maroon /* #800000 */
      • navy /* #000080 */
      • olive /* #808000 */
      • purple /* #800080 */
      • red /* #ff0000 */
      • silver /* #c0c0c0 */
      • orange /* #ffa500 */
      • teal /* #008080 */
      • white /* #ffffff */
      • yellow /* #ffff00 */

cursor: auto crosshair default pointer /* The cursor that indicates a link on rollover */ move N-resize /* N can be replaced with S, E, W, NE, NW, SE, SW */ text /* Usually rendered as an I-bar */ wait /* Usually rendered as a watch or hourglass */ help

display: none /* Makes the element disappear */ block inline

float: none left right Floats something like an image so text flows around it.

font-family: verdana,helvetica,sans-serif /* easiest to read at small sizes */ arial,helvetica,sans-serif times,times new roman,serif courier new,courier,monospace cursive /* unpredictable */ fantasy /* unpredictable */ Rules: * A font only works for people who have that font installed on their computer. * Take into consideration both Windows and Macintosh users. * Always include a generic font at the end of the font list.

font-size: 10px /* very small */ 11px /* small to normal depending on font */ 12px /* normal */ 16px /* titles */ 40px /* really big */ 0.5em /* relative to parent element */ larger /* relative to parent element */ smaller /* relative to parent element */ xx-small /* like HTML H6 */ x-small small /* like HTML H5 */ medium /* like HTML H4 */ large /* like HTML H3 */ x-large /* like HTML H2 */ xx-large /* like HTML H1 */

font-style: normal italic oblique /* same as italic */

font-variant: normal small-caps

font-weight: normal bold

height: 200px 90%

left: 4px 50%

letter-spacing: normal 5px Called "kerning" in Typography.

line-height: normal 130% /* percentage of the font-size, 130 gives a nice look */ 10px /* scrunch 11px font lines together */ Called "Ledding" in Typography.

list-style: none disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-alpha lower-latin upper-alpha upper-latin url(images/bullet.gif) Note: If you want a custom bullet image, it works better this way: ul {margin:0; padding:0; list-style:none;} li { margin:0 0 6px 0; padding:0 0 0 16px; /* left padding for bullet image */ background:transparent url(images/bullet.gif) no-repeat; }

margin: 0 /* to turn all margins off, no unit is necessary */ 4px /* use a single value for the same margin on all sides */ 2px 0 2px 0 /* specify separate top, right, bottom, left margins (clockwise from top) */ auto /* if right AND left are auto, element will be centered */ Margins add transparent space OUTSIDE the background and border. Examples: img {margin:2px 0 2px 0;} div (margin: 4px auto 10px auto;} /* div will be horizontally centered */

margin-top: (set the margin on one side)

margin-right: (set the margin on one side)

margin-bottom: (set the margin on one side)

margin-left: (set the margin on one side) min-height: Not supported in IE so its fairly useless

min-width: Not supported in IE so its fairly useless

overflow: visible hidden scroll auto

padding: 0 /* to turn all padding off, no unit is necessary */ 4px /* use a single unit for even padding on all sides */ 2px 0 2px 0 /* specify separate top, right, bottom, left padding (clockwise from top) */ Padding adds space INSIDE the background and border.

padding-top: (set the padding on one side)

padding-right: (set the padding on one side)

padding-bottom: (set the padding on one side)

padding-left: (set the padding on one side)

position:

      • static /* where it would "normally" be in the html flow */
      • absolute /* position inside the parent element */
      • relative /* position relative to where it would "normally" be */
      • fixed /* do not scroll the element as the page scrolls */

right: 4px 50% Positions an element from the right-hand edge of its container.

text-align: left right center justify /* makes even left and right margins, like a newspaper column */

text-decoration: none underline overline line-through blink /* does not work in IE, only works in Firefox, Opera 7 */

text-transform: capitalize lowercase uppercase

top: 4px 50%

vertical-align: baseline middle sub /* do not use, messes up line spacing, see below */ super /* do not use, messes up line spacing, see below */ text-top text-bottom Making superscripts and subscripts without messing up the line spacing: CSS .sups {position:relative; top:-4px;} .subs {position:relative; top:4px;} HTML Here's a superscript<span class="sups">1</span>.

visibility: hidden /* the element will still influence other elements on the page */ visible To remove the element completely, use display:none; instead.

white-space: normal nowrap /* do not wrap a line until a line break, somewhat buggy in some browsers */

pre /* like using <pre> in HTML, requires "strict" mode for IE 6 */

width: 200px 90%

z-index: 5 /* a DIV with a z-index of 5 will be "above" those with 4 or lower */ Z-index only applies to other objects in the same container.

rendered content From Glossary of Cascading Style Sheets, level 2 CSS2 Specification (1998-05-12) The content of an element after the rendering that applies to it according to the relevant style sheets has been applied. The rendered content of a replaced element comes from outside the source document. Rendered content may also be alternate text for an element (e.g., the value of the HTML "alt" attribute), and may include items inserted implicitly or explicitly by the style sheet, such as bullets, numbering, etc.of B or (2) A is a preceding sibling of B.W3 CSS glossary Nov. 29 2009

Rendering is the process the browser goes through when interpreting HTML and CSS and turning that into the visual end result you see on your screen.css-tricks, nov 29, 2009

replaced element From Glossary of Cascading Style Sheets, level 2 CSS2 Specification (1998-05-12) An element for which the CSS formatter knows only the intrinsic dimensions. In HTML, IMG, INPUT, TEXTAREA, SELECT, and OBJECT elements can be examples of replaced elements. For example, the content of the IMG element is often replaced by the image that the "src" attribute designates. CSS does not define how the intrinsic dimensions are found.W3 CSS glossary Nov. 29 2009

Semantics – The word itself generally refers to the meaning of words or word choice. On the web, semantics means choosing the correct HTML tags to describe to content. For example, using table tags to lay out your site isn’t very semantic because those tags don’t relay any meaning to the content they contain. Whereas, a tag like <navigation> is extremely semantic.css-tricks, nov 29, 2009

Server – When a webpage is visited, data is sent from some computer somewhere to your computer over the internet. That other computer is a server, essentially just like the one you are looking at, only specially configured to deliver information to other computers asking for it. Even though any computer could technically be a server, far more commonly people purchase server functionality from companies that specialize in it, like Media Temple. In addition to “server” being used to describe the physical machine, it also may be used to describe the software program used on that machine which handles serving up that data, like Apache.css-tricks, nov 29, 2009

Server-Side refers to a language that is interpreted by the server. For example, PHP is interpreted by your server, processed, and then delivered to you. As an easy example to remember the difference, if you ask a client-side language to display what time it is, it will display the time set on your computer. If you ask a server-side language to display what time it is, it will display the time set on the server. css-tricks, nov 29, 2009

sibling From Glossary of Cascading Style Sheets, level 2 CSS2 Specification (1998-05-12) An element A is called a sibling of an element B, if and only if B and A share the same parent element. Element A is a preceding sibling if it comes before B in the document tree. Element B is a following sibling if it comes after B in the document tree. W3 CSS glossary Nov. 29 2009

source document From Glossary of Cascading Style Sheets, level 2 CSS2 Specification (1998-05-12) The document to which one or more style sheets refer. This is encoded in some language that represents the document as a tree of elements. Each element consists of a name that identifies the type of element, optionally a number of attributes, and a (possibly empty) content.W3 CSS glossary Nov. 29 2009

Standards – This again refers to the W3C, the organization that puts forth the “rules” describing how browsers should behave in interpreting code. Can you imagine how difficult any job would be if everything you did you had to repeat five different times with slight variations? That’s what web standards are trying to prevent, buy putting forth rules so that everyone’s job is easier things only need to be done one way. If you hear someone say they “write standards compliant code”, it probably means the code they write validates, but hopefully it also means they have an understanding of the importance of web standards and fight for them.css-tricks, nov 29, 2009

style sheet From Glossary of Cascading Style Sheets, level 2 CSS2 Specification (1998-05-12) A set of statements that specify presentation of a document. Style sheets may have three different origins: author, user, and user agent. The interaction of these sources is described in the section on cascading and inheritance.W3 CSS glossary Nov. 29 2009

Style Syntax Each Style starts with a Selector, followed by Style Properties inside a set of { }. Each Property MUST END with a semicolon. Example of defining style for an entire page: body { margin:0; padding:8px 4px 12px 4px; color:#ffbf11; background:#000000 url(images/space.gif); } Design 215, nov 29, 2009

Tag are text that go around content in HTML code to identify the type of content they surround. For example, in this code <li>Go dancing.</li>, the tags are <li> and </li>.css-tricks, nov 29, 2009

Selectors (the best CSS Quick reference is at Design 215 - their list is better styled than the copied and pasted content below)Design 215, nov 29, 2009

CLASS Selectors : define your own styles with names you choose Examples: .pretty {...} .stinky {...} .mushy {...} Class selector HTML example: <p class="stinky">This is a stinky paragraph</p>

ID Selectors: define a style for any HTML element that has an "ID" Examples: #mainParagraph {...} #sidemenu {...} #footer {...} ID selector HTML example: <div id="sidemenu"> ...menu links... </div>

TYPE Selectors : define the style of various HTML elements Examples: body {...} p {...} td {...} ul {...}

Combining Selectors: combine type and class to narrow down what gets styled. The following 2 examples can be used in the same stylesheet: div.stinky {...} only applied to DIV elements with class="stinky" img.stinky {...} only applied to IMG tags with class="stinky"

Descendant Selectors: use multiple selectors to narrow down what gets styled Examples: div.stinky p {...} only applied to p tags inside DIVs with class="stinky" table table img {...} only applied to img tags inside tables, inside other tables Using commas for multiple objects Example: table, td, tr, span, form, p {...} style is applied to each listed element

Other Selectors There are additional selectors which are not listed here because they are not widely supported, or they don't work in Internet Explorer, which is still the most widely used browser.

user From Glossary of Cascading Style Sheets, level 2 CSS2 Specification (1998-05-12) A user is a person who interacts with a user agent to view, hear, or otherwise use a document and its associated style sheet. The user may provide a personal style sheet that encodes personal preferences.A user agent is any program that interprets a document written in the document language and applies associated style sheets according to the terms of this specification. A user agent may display a document, read it aloud, cause it to be printed, convert it to another format, etc. W3 CSS glossary Nov. 29 2009

user agent (UA) From Glossary of Cascading Style Sheets, level 2 CSS2 Specification (1998-05-12) A user agent is any program that interprets a document written in the document language and applies associated style sheets according to the terms of this specification. A user agent may display a document, read it aloud, cause it to be printed, convert it to another format, etc.W3 CSS glossary Nov. 29 2009

Validation – It is possible, even probable, that code contains mistakes. But who says what constitutes a mistake in code? When it comes to HTML and CSS, the W3C does. They offer tools to run these types of code through to check for errors. If it there are no errors, the code passes and is said to be valid code (or “markup”!) ALTERNATIVELY, validation can refer to data. For example, if you enter a phone number that is 5 digits long, software might “validate” that data and reject it as invalid.css-tricks, nov 29, 2009

Wrapping refers to putting an opening and closing tag around content in HTML code. If you hear “You’ll need to wrap it in an extra div,” they mean that whatever content area is being referenced needs to have a <div> tag added before it and an </div> tag added after it.css-tricks, nov 29, 2009