30 terms

css

Flash cards about CSS
STUDY
PLAY
What is a CSS rule or "rule set" ?
A rule or "rule set" is a statement that tells browsers how to render particular elements on an HTML page
What are the parts of a CSS rule set ?
A rule set consists of a selector followed by a declaration block.

body { color: black ; padding: 1em }
^ ^ ^
selector property value
What are css selectors ?
Selectors are used to "select" the elements on an HTML page that are affected by rules.

h1, h2, h3, h4 { padding: 1em; }

.highlight p, .highlight ul { margin-left: .5em; }

#main p, #main ul { padding-top: 1em; }
What are two common mistakes people make when grouping selectors ?
1) Forgetting to write each selector in full.

WRONG: #maincontent p, ul { border-top: 1px solid #ddd; }

RIGHT: #maincontent p, #maincontent ul { padding-top: 1em; }

2) End the grouping with a comma.
How do you remove a duplicate css style property?
1) A duplicate CSS property can be reduced to a single property by creating a group selector that applies the property to multiple elements.
2) Simplify the HTML structure so that it doesn't require duplicate CSS properties.

3) Use classes instead of Ids to reference the HTML elements in your style definitions.
What are some of the drawbacks to using group selectors?
1) A group selector introduces new style definitions, as opposed to a smaller number of styles to maintain.

2) Group selectors introduce a noticeable performance loss in the web browser.

3) Group selectors require the same type of HTML element for each member of the group.
What is the role of a generic style when using nested selectors?
a. A generic, top-level style ensures consistency with style properties while the nested styles within set more specific style properties that aren't shared between the widget's elements.

b. Generic selectors are too limiting because the properties they define can't be overridden.

c. Cascading styles are only valid when they reference elements by ID.
What are CSS shorthand properties ?
Some properties are able to be written in shorthand, so that the values of several properties can be specified with a single property.

For example, the font-style, font-variant, font-weight, font-size, line-height and font-family properties can be combined into a single font property.
What is an example of a CSS shorthand property ?
h2
{
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 80%;
line-height: 120%;
font-family: arial, helvetica, sans-serif;
}

h2 { font: italic small-caps bold 80%/120% arial, helvetica, sans-serif; }
What are some popular properties that have shorthands ?
margin, padding, font, background, outline, list-style

http://www.dustindiaz.com/css-shorthand
If you do not declare the value for a CSS property what happens ?
default values will be applied.

http://www.dustindiaz.com/css-shorthand
Explain the concept of a HTML document tree?

Why is the HTML document tree relevant to CSS ?
All HTML documents are trees. Each level of the tree is described in the same manner as a human family tree, with ancestors, descendants, parents, children and siblings. CSS rules are based on the document tree. If you understand the document tree concept, then CSS selectors will be easy to understand and apply.

http://css.maxdesign.com.au/selectutorial/document_tree.htm
Explain the concept of an document tree "Ancestor".
An ancestor refers to any element that is connected but further up the document tree - no matter how many levels higher. In the diagram below, the <body> element is the ancestor of all other elements on the page.
What HTML element is the "Anestor" of all elements on a HTML page ?
<body> element is the ancestor of all other elements on the page.
Explain the concept of an document tree "Descendant".
A descendant refers to any element that is connected but lower down the document tree - no matter how many levels lower. In the diagram below, all elements that are connected below the <div> element are descendants of that <div>.
Explain the concept of an document tree "Parent".
A parent is an element that is directly above and connected to an element in the document tree. In the diagram below, the <div> is a parent to the <ul>.
Explain the concept of an document tree "Child".
A child is an element that is directly below and connected to an element in the document tree. In the diagram above, the <ul> is a child to the <div>.
Explain the concept of an document tree "Sibling".
A sibling is an element that shares the same parent with another element. In the diagram below, the <li>'s are siblings as they all share the same parent - the <ul>.
Explain the concept of "Multiple descriptions".
Within your own family tree, you can be described in many ways. You are a descendant of your ancestors and are a child of your parents. You may also be a parent (if you have children), and a sibling (if you have brothers or sisters).

In the same way, elements on an HTML page have multiple descriptions. In the diagram below, one of the two <div> elements is highlighted. It can be described as:

a child of the <body> element
a parent of the <ul> element
an ancestor of the <ul> and <li> elements
a sibling of the other div element (who shares the same parent - the <body> element).
What are type selectors ?
The most common and easy to understand selectors are type selectors. Type selectors will select any HTML element on a page that matches the selector, regardless of their position in the document tree.

em {color: blue; }
What are Class selectors ?
class selectors can be used to select any HTML element that has a class attribute, regardless of their position in the document tree
Syn. for a Class selector ?
.big { font-size: 110%; font-weight: bold; }

<body>
<p class="big">This is some <em>text</em></p>
<p>This is some text</p>
<ul>
<li class="big">List item</li>
<li>List item</li>
<li>List <em>item</em></li>
</ul>
</body>
What is odd about CSS class and type selectors ?
That the type goes first then the class

div.big { color: blue }

type = div
class = big
Syn. for a type selector
em {color: blue; }
What are the syn. differences between a Class vs. type selector.
Class selector uses dot "."
.big { color: blue }

type selector does NOT user a dot "."
em { color: blue }
What are the 3 types of CSS selectors ?
1) id selector
2) class selector
3) type selector
What is the difference between id selectors and class selectors ?
Id's can only be applied once per page.

Class selectors can be applied many times per page.
Syn. for a id selector ?
#navigation { width: 12em; color: #333; }
div#navigation { width: 12em; color: #333; }

img: http://css.maxdesign.com.au/selectutorial/selectors_id.htm
What are Descendant Selectors ?
Descendant selectors are used to select elements that are descendants of another element in the document tree.
What dependent selector would get the
'item 3' em ?

<body>
<p>Lorem ipsum dolor <em>sit</em> amet.</p>
<ul>
<li>item 1</li>
<li>item 2</li>
<li><em>item 3</em></li>
</ul>
</body>
p em {color: blue;}