CSS Glossary
CSS Glossary
Comments
Comments in CSS are signified by a forward-slash and asterisk.
Example
/* This is a single line comment */
Copy to clipboard/* This is a single line comment *//* This is a multi-linecomment */
Copy to clipboard/* This is a multi-linecomment */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;}
Copy to clipboardselector { property: value;}h1 { color: blue;}
Copy to clipboardh1 { color: blue;}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.
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! */
Copy to clipboardh1 { 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.
#box { padding: 10px;}
Copy to clipboard#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.
#box { margin: 10px 5px 10px 5px;}
Copy to clipboard#box { margin: 10px 5px 10px 5px;}font-family
The font-family property sets the font of an HTML element’s text.
p { font-family: Arial, Helvetica, sans-serif;}
Copy to clipboardp { font-family: Arial, Helvetica, sans-serif;}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.
selector { rules; rules; rules;}
Copy to clipboardselector { rules; rules; rules;}- https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/
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.
a.link { font-size: 12px;}
/* HTML Selected: <a href="http://google.com" class="link">, <a href="http://codecademy.com" class="link jumbo"> */
Copy to clipboarda.link { font-size: 12px;}
/* HTML Selected: <a href="http://google.com" class="link">, <a href="http://codecademy.com" class="link jumbo"> */.jumbo { text-size: 1000px;}
/* HTML Selected: <a href="http://codecademy.com" class="link jumbo">,<span class="jumbo"> */
Copy to clipboard.jumbo { text-size: 1000px;}
/* HTML Selected: <a href="http://codecademy.com" class="link jumbo">,<span class="jumbo"> */Element selectors
You are able to select HTML elements first by simply using the name of the element.
body { background-color: #333;}
Copy to clipboardbody { background-color: #333;}h1 { color: blue;}
Copy to clipboarda { text-underline: none;}
Copy to clipboarda { text-underline: none;}ID selectors
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.
#thatThingINeededToStyle { color: blue; font-size: 24px;}
/* HTML Selected: <span id="thatThingINeededToStyle"> */
Copy to clipboard#thatThingINeededToStyle { color: blue; font-size: 24px;}
/* HTML Selected: <span id="thatThingINeededToStyle"> */a#codecademy { color: purple;}
/* HTML Selected: <a href="http://codecademy.com" id="codecademy"> */
Copy to clipboarda#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.
a[href="http://codecademy.com"] { color: purple;}
/* HTML Selected: <a href="http://codecademy.com"> */
Copy to clipboarda[href="http://codecademy.com"] { color: purple;}
/* HTML Selected: <a href="http://codecademy.com"> */input[type="text"] { width: 100px;}
/* HTML Selected: <input type="text"> */
Copy to clipboardinput[type="text"] { width: 100px;}
/* HTML Selected: <input type="text"> */input[required] { border: 1px red solid;}
/* HTML Selected: <input type="text" required> */
Copy to clipboardinput[required] { border: 1px red solid;}
/* HTML Selected: <input type="text" required> */- 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.
ul > li { display: inline-block}
/* Selects only the first-level list items in all unordered lists in the HTML */
Copy to clipboardul > li { display: inline-block}
/* Selects only the first-level list items in all unordered lists in the HTML */ul a { text-underline: none;}
/* Selects all anchors which have an unordered list their ancestry */
Copy to clipboardul a { text-underline: none;}
/* Selects all anchors which have an unordered list their ancestry */ul + span { display: inline;}
/* Selects only spans that directly follow an unordered list */
Copy to clipboardul + span { display: inline;}
/* Selects only spans that directly follow an unordered list */a ~ h1 { color: blue;}
/* Selects all h1 elements that are in the general vicinity of an anchor */
Copy to clipboarda ~ h1 { color: blue;}
/* Selects all h1 elements that are in the general vicinity of an anchor */- 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.
* { background-color: blue;}
/* Selects ALL HTML elements in the page */
Copy to clipboard* { background-color: blue;}
/* Selects ALL HTML elements in the page */body * { color: red;}
/* Selects ALL children of the body */
Copy to clipboardbody * { color: red;}
/* Selects ALL children of the body */div > * { color: red;}
/* Selects ALL first-level children of all divs on the page */
Copy to clipboarddiv > * { color: red;}
/* Selects ALL first-level children of all divs on the page */- 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.
li:first-child { color: red;}
/* 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. */
Copy to clipboardli:first-child { color: red;}
/* 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. */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. */
Copy to clipboarda: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. */- https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
- http://dev.opera.com/articles/view/27-css-basics/#pseudoclasses
Want to dive deeper into CSS? Check out ourLearn CSS course.
'The Codecademy Team, composed of experienced educators and tech experts, is dedicated to making tech skills accessible to all. We empower learners worldwide with expert-reviewed content that develops and enhances the technical skills needed to advance and succeed in their careers.'
Complete Payment to Unlock Full Guide & Source Code
You are viewing the 30% preview. Join TopCourseAI Pro to unlock the remaining 70% of this article, unblur all code snippets, and gain full access to all 412 technical projects and guides.
Ready to access the complete step-by-step tutorial?
Gain full unhindered access to all 412 technical projects and guides, unblur all source code snippets, and download runnable scripts.
Building an AI Chatbot with Rasa and Ollama
Next BlueprintCSS Visual Rules in Chrome Inspector
Related Blueprints & Guides
View all 166 →Inline Styles in HTML
Usually, CSS is written in a separate CSS file (with file extension.css) or in a<style>tag inside of the<head>tag, but there is a third place which is also valid. The third place you can write CSS is inside of an HTML ta...
Web designManaging Assets and Icons
In this article, you will learn how to manage icons and assets using web-based tools.
Web designSeaborn Color Palettes: Complete Guide to Data Visualization Colors
Seaborn color palettesare predefined sets of colors that enhance your Python data visualizations by providing consistent, accessible, and visually appealing color schemes. These palettes help distinguish categories, emph...
Ready to build production-grade AI systems?
Enjoyed this guide? Continue exploring our library of 166+ production blueprints, multi-agent swarms, and autonomous agent systems with 100% unblurred, executable source code.