The document provides definitions and examples for key concepts in CSS including comments, properties, selectors, padding, margin and more. It explains how to use CSS to style and position elements on HTML pages.
The document provides definitions and examples for key concepts in CSS including comments, properties, selectors, padding, margin and more. It explains how to use CSS to style and position elements on HTML pages.
The document provides definitions and examples for key concepts in CSS including comments, properties, selectors, padding, margin and more. It explains how to use CSS to style and position elements on HTML pages.
The document provides definitions and examples for key concepts in CSS including comments, properties, selectors, padding, margin and more. It explains how to use CSS to style and position elements on HTML pages.
Codecademy Learn Teach Notifications 6 points today 1 day streak
Me View my profile Edit account settings Help Sign Out
CSS Glossary Comments Properties Definition Defining many properties Padding Margin Selectors What are selectors? Element selectors Class name selectors ID selectors Attribute selectors Child selectors Universal selector Pseudo class selectors
Comments Comments in CSS are signified by a forward-slash and asterisk. Example /* This is a single line comment */
Example /* This is a multi-line comment */
www.codecademy.com/glossary/css#comments
1/7
9/2/13
CSS Glossary | Codecademy
Properties Definition Properties are defined within selectors by defining a property and a value. They are separated with a colon and delineated with a semi-colon. Syntax selector { property: value; }
Example h1 { color: red; }
Read more http://www.htmldog.com/reference/cssproperties/
Defining many properties
Each CSS rule can have as many properties as you like. Each of them applies to the elements that the selector applies to. Example h1 { font-size: 24px; font-weight: bold; border: 1px solid black; color: pink; } /* This will make all <h1> headers big, bold, pink, and inside of a thin black rectangle! */
Padding The padding is the spacing between the content and the border (edge of the element.). We can adjust this value with CSS to move the border closer to or farther from the content. Here, the div with id 'box' will get 10px of padding all around it. Example #box { padding: 10px; }
Margin The margin is the space around the element. The larger the margin, the more space between our element and the elements around it. We can adjust the margin to move our HTML elements closer to or farther from each other. Here, the div with id 'box' will get 10px of margin above and below it, and 5px of margin to the left and right. Example #box { margin: 10px 5px 10px 5px; }
www.codecademy.com/glossary/css#comments
2/7
9/2/13
CSS Glossary | Codecademy
Selectors What are selectors? Selectors are used in CSS to select the parts of the HTML that are being styled. You can use several different methods for selecting an element. Syntax selector { rules; rules; rules; }
Read more https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors
Element selectors You are able to select HTML elements first by simply using the name of the element. Example body { background-color: #333; }
Example h1 { color: blue; }
Example a{ text-underline: none; }
Class name selectors
You can also select HTML elements by their Class name. Unlike ID selectors, Class selectors select all elements with a matching class. Example a.link { font-size: 12px; } /* HTML Selected: <a href="http://google.com" class="link">, <a href="http://codecademy.com" class="link jumbo"> */
Example .jumbo { text-size: 1000px; } /* HTML Selected: <a href="http://codecademy.com" class="link jumbo">, <span class="jumbo"> */
ID selectors www.codecademy.com/glossary/css#comments
3/7
9/2/13
CSS Glossary | Codecademy
ID selectors are used to select only a single item on a page. Like the term ("identification") indicates, ID selectors will ONLY select the first element with a matching ID. Example #thatThingINeededToStyle { color: blue; font-size: 24px; } /* HTML Selected: <span id="thatThingINeededToStyle"> */
Example a#codecademy { color: purple; } /* HTML Selected: <a href="http://codecademy.com" id="codecademy"> */
Attribute selectors HTML elements are also able to be selected by their attributes. Example a[href="http://codecademy.com"] { color: purple; } /* HTML Selected: <a href="http://codecademy.com"> */
Example input[type="text"] { width: 100px; } /* HTML Selected: <input type="text"> */
Example input[required] { border: 1px red solid; } /* HTML Selected: <input type="text" required> */
Read more http://dev.opera.com/articles/view/27-css-basics/#attribute
Child selectors You can also use multiple selectors to get the exact elements you want, by using parental nesting. By using the "greater-than" symbol (>), you can select only the direct children of an element, going down only one level. Example ul > li { display: inline-block } /* Selects only the first-level list items in all unordered lists in the HTML */
Example ul a { text-underline: none; www.codecademy.com/glossary/css#comments
4/7
9/2/13
CSS Glossary | Codecademy
} /* Selects all anchors which have an unordered list their ancestry */
Example ul + span { display: inline; } /* Selects only spans that directly follow an unordered list */
Example a ~ h1 { color: blue; } /* Selects all h1 elements that are in the general vicinity of an anchor */
Read more https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_selectors
Universal selector The universal selector (*) may be used to select all the elements in a particular range. Be aware that the universal selector is the most performance taxing selector, and should be used sparingly. Example *{ background-color: blue; } /* Selects ALL HTML elements in the page */
Example body * { color: red; } /* Selects ALL children of the body */
Example div > * { color: red; } /* Selects ALL first-level children of all divs on the page */
Read more https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors http://www.stevesouders.com/blog/2009/06/18/simplifying-css-selectors/ http://dev.opera.com/articles/view/27-css-basics/#universal
Pseudo class selectors
Pseudo Selectors can be used to narrow down a selection with certain rules. Example li:first-child { color: red; } www.codecademy.com/glossary/css#comments
5/7
9/2/13
CSS Glossary | Codecademy
/* This selects only <li> elements that have no elements before them <ul> <li>Selected; will be red</li> <li>Not selected</li> <li>Not selected</li> </ul> */ li:last-child { color: red; } /* This does the opposite; only the last <li> will be red. */
Example a:hover { text-decoration: underline; } /* Will underline all links when the user puts their mouse over them */ a:active { font-weight: bold; } /* Will make all links bold while the user is clicking on them. */
Read more https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes http://dev.opera.com/articles/view/27-css-basics/#pseudoclasses
Codecademy , teaching the world to code
About Us We're hiring Our Blog Learn to Code JavaScript HTML/CSS PHP Python Ruby APIs Other Programs Afterschool Programming Success Stories Codecademy Labs Codecademy Online Follow us on Twitter Find us on Facebook Read our Blog www.codecademy.com/glossary/css#comments
6/7
9/2/13
CSS Glossary | Codecademy
Help Privacy Policy Terms Made in NYC 2013 Codecademy
