Jessica Ledbetter

CSS Vocabulary

I took a class a long time ago on CSS. The instructor kept saying “sheet styles.” I’ve said “alt tags” before I realized how wrong that was. So here I am arming myself and others with the right words.

Attributes: properties of HTML elements.

href
title
class

Rule, selector, property, value, declaration:

Diagram of a CSS Rule

Linked stylesheet:

Linked

or

import

Embedded stylesheet:

p { padding-top: 1em;}

Inline stylesheet:

Inline

Attribute selector: style based on attribute, title, href, class or value of that attribute; uses “square brackets.”

h1[title] { color: #f00; }

Child selector: style elements that are direct descendants of another element; selectors are separated by “greater-than symbol.”

h1 > span { color: #ccc; }

Adjacent sibling selector: style elements according to an element that precedes them; selectors are separated by “plus symbol.”

h1 + p { color: #aaa; }

Class selector: rule(s) for an element(s) put all together and can be called with a name. Can be used more than once.

p.story { padding-top:2em; color:#ddd;}

ID selector: rule(s) for an element put all together and given a name. Can be used only once per page.

#sidebar { border:1px solid #ddd;}

Contextual selector: two or more simple selectors separated by space.

p b { color: #f00; }
would make the bolded items under paragraphs be a red color and the rest of the paragraph is a normal color.

Grouping: when selectors have the same declarations

h1, h2, h3 { color: #f00; }

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>