CSS might seem daunting at first, but it’s a powerful tool for styling your website once you understand it. Let’s explore the basics.
Selectors in CSS act as detectives, allowing you to pinpoint specific elements on your page. You can target elements by their type (e.g., <h1>, <p>), class (.classname), ID (#idname), or their relationship to other elements.
With your target selected, you can then apply styles using properties and values. Properties describe the appearance or behavior of an element, such as color, font-size, and margin. Values specify the property details, like “red” for the color property.
This overview introduces key CSS concepts: selectors, properties, and values. Now, you’re ready to start styling!
Below is a glossary of CSS concepts, selectors, properties, and values.
Vocabulary
These are the terms most used when discussing CSS.
| Cascading Style Sheets (CSS) | read more | ||
| Cascading Style Sheets are the file type that our styles are written into. In the early web, before it became its own language, styles were simply added as attributes of individual elements. This method was clunky, ugly, and most importantly, not scalable. The purpose of CSS is to apply styles to our page en mass with as much efficiency as possible. To do this, we use selectors (below) that target whole groups of objects and apply consistent styles across our page. The “Cascading” part of the name refers to the fact that styles can be written and overwritten. For instance, if I set the width of an <img> tag to 300px, but further down in the page set the width of images to 100px, the most recent mention takes precedent. However, there are many rules and interactions determining what styles take charge. | ||
| Selector | read more | ||
| h1 {} #gallery {} .icon:hover {} html::after {} | CSS works symbiotically with HTML. It exists to style and augment HTML elements, but can’t do anything without them. The way we target specific elements are with selectors. A selector can have the name of a tag, class, ID, or combinations of those so you can find exactly the element you want to style. All selectors are followed by a pair of curly brackets, which is where your styles go. | |
| Property | read more | ||
| h1 { color: lime; background: royalblue; font-size: 300%; margin: 10px 30px; padding: 20px; } | Selectors choose which elements to style, and the properties are what you change. There are hundreds of CSS properties that can be changed. You’ll never memorize them all, but this glossary will cover the most common and helpful of them. | |
| Value | read more | ||
| button { color: purple; background: black; padding: 20px 15px; animation: blink 5s linear 100ms infinite both; position: fixed; top: 0; left: 100px; } | With every property comes a value. By default every element comes with a value attached to each property, usually “initial”, “default”, “none”, or “0”. It depends on your browser’s default settings. By writing your own values you are over-ruling the default values that come with every property. | |
| Comment | read more | ||
| button { color: purple; background: black; padding: 20px 15px; /* Add animation for button to fade in and out */ animation: blink 5s linear 100ms infinite both; /* position: fixed; top: 0; left: 100px; */ } | Just like with HTML, comments are passages of text that are ignored when the coe is read. They are just there for developers to see. Comments are helpful for leaving yourself (or others) notes, marking sections of your page, or temporarily “crossing out” code that you don’t want, but you don’t want to delete either. The only difference of comments between languages is how it is written. | |
| The Box Modal | read more | ||
| div { background: black; width: 100px; height: 50px; padding: 20px 15px; border: 5px solid red; margin: 10px; /* this div’s box is 160px wide and 120px tall */ } | The box modal is the idea that all elements on a page take up some amount of room in a rectangle. The “box” is the total amount of space between four measurements. These are the element’s set height/width, plus the height/width of its padding, border, and margin combined. The border makes up the edge of the perceived box, the padding is the space inside, and the margin is the space outside. | |
| Color Mode | read more | ||
| div { color: rgb(255, 255, 255); /* white */ color: rgb(0, 0, 0); /* black */ color: rgb(255, 0, 0); /* red */ color: rgba(0, 255, 255, 0.5); /* transparent purple */ } | RGB values tells the computer how much Red, Green, Blue to mix together. Each can be mixed to make a different shade of color with a maximum of 255 of each color.rgba adds “alpha” or transparency to your color. | |
| div { color: #ffffff; /* white */ color: #000000; /* black */ color: #ff0000; /* red */ color: #f0f; /* shortened purple */ } | Similar to RGB value, HEX values uses letters and numbers. First two, second two, and last two are respectively red, green and blue. They mix to create a color you desire. | |
| div { color: hsl(0, 0, 100%); /* white */ color: hsl(0, 0, 0%); /* black */ color: hsl(0, 100%, 50%); /* red */ color: hsl(320, 100%, 50%); /* purple */ } | HSL stands for Hue, Saturation, and Lightness. This is a common color mode if you use color pickers online, since it gives you one slider for hue (color), and a range of brightness (+/- white/black) and saturation (+/- gray). | |
| div { color: white; /* white */ color: black; /* black */ color: red; /* red */ color: rebeccapurple ; /* Rebecca purple */ } | You can also just write the names of the colors you want! CSS is pretty smart, and understands dozens of color-words. It is still important to understand how other color modes work, but if you don’t need a precise hex code this is a good option too. | |
| Units of Measurement | read more | ||
| div { width: 100px; } | There are many ways to measure in CSS, some are distance, some are time, some are rotational.Pixels are the smallest whole unit of digital screens. | |
| div { height: 5em; } | An em is the size of the font you’ve set (by default 16px), and is a generally scalable and nicely sized unit. | |
| div { margin-left: 50%; } | A % measures the percent of the container an element is in. At the biggest level this is the width/height of the page, but can change depending on how big the box is. | |
| div { transform: rotateZ(200deg); } | deg measures degrees of rotation. 0-360. | |
| div { transition: 0.5s; } | s measures seconds. ms is a measure of milliseconds (1/1000th of a second, and the generic scripting time unit) | |
Selectors
More specific information on how to target different parts of your HTML.
| All | read more | ||
| * { margin: 0; } | The * symbol selects all elements at once. | |
| Elements | read more | ||
| p {} | Add styles to all HTML elements with the given name.Element names can be written the same as they are in HTML. | |
| div {} | ||
| button {} | ||
| Classes | read more | ||
| .pageItem {} | Selecting objects in html that have a class name by using a period. | |
| IDs | read more | ||
| #bestPage {} | Selecting an element with an ID by using a hashtag before the ID name. | |
| Groups | read more | ||
| h1, h2, p { text-align: center; color: red; } | You can use more than one selector to add styles to more than one element at a time, for instance if you wanted to align the text of all h1, h2, and p tags at once and change their color. | |
| Children | read more | ||
| #header .nav { background: crimson; } #header .nav img { width: 30px; } | You can be more specific with your selectors by targeting only elements inside of other elements (children of that element). For example only setting the width of imgs that are inside the header ID.This is very different than separating the selectors with commas: using just a space means it will target the element within the previous selector, not both the #header and img. | |
| Pseudo | read more | ||
| button:hover { background: red; } | You can add selectors that only apply when the element has other conditions applied to it. For instance this code would change the background color of all buttons that you are hovering over with your mouse. | |
| div:active { background: blue; width: 25%; } | ||
| Complex | read more | ||
| #gallery .imageBox:not(p):hover h3, a:hover { color: green; } | You can string together any number of the techniques covered above into very specific selectors that will get you the results you want. This selector targets the <h3> tag within the imageBox class within the gallery ID, only when you are hovering over it and not the <p> tag also inside that .imageBox. It also targets all <a> tags when you are hovering on them. | |
| Specificity | read more | ||
| * { color: blue; } h1 { color: red; } .greenText { color: green; } #purpleText { color: purple; } #purpleText:hover { color: lavender; } * { color: blue !important; } | Generally, CSS uses a system of cascading from one style to the next: the most recent instance of a property will be the one used. That is, IF they have the same selector. If two snippets try to set the same property on the same element and they have different selectors, CSS settles the dispute by looking at which selector is more specific. The All selector (*) is the most vague selector possible, so it gets overridden by everything. After that, generic tag names, then classes, then IDs, then pseudo-selectors and various compound selectors take over. There is a lot of nuance that can go into specificity, however, there is a way to override that order and force your style through, which is the !important attribute after your value. In this example all text will be blue no matter what, because we told the all selector to override everything. However, if you have more than one use of !important on a conflicting property then cascading/specificity takes over again. Note: needing !important is usually due to poorly planned code. Don’t use it if you can avoid it. | |
Properties & Values
The types of styles that are being changed, and the values they are being set to.
| Color | read more | ||
| h1 { color: blue; } | Changing the color of text | |
| Background | read more | ||
| body { background-color: blue; } | Changing the background color of the selector, there is three ways to name your color:Hex-Code aka: #1F2A4BWord aka: blue, turquoise, crimson, .etcRGB aka: rgb(255,150,110) | |
| body { background-image: url(link/to/image.jpg); background-size: cover; background-repeat: no-repeat; } | Your background can also be an image. You can use a live link to an image hosted somewhere on the internet, or the relative path to an image you have stored in your project files. | |
| Height & Width | read more | ||
| div { height: 200px; width: 200px; } | Giving a height in pixels to the selector | |
| Giving a width in pixels to the selector | ||
| Font | read more | ||
| p { font-size: 30px; } | Change the size of text. | |
| @import url(‘https://fonts.googleapis.com/css?family=Roboto’); p { font-family: ‘Roboto’, sans-serif; } | Changing the font of text. To add special fonts from the web you must either download or link to their files using an @import line. The second font listed is what’s called a fallback, (a universal web-font as a second option for if your first choice doesn’t load) | |
| Border | read more | ||
| div { border-width: 5px; border-style: solid; border-color: blue; border: 10px dashed red; border-radius: 10px; } | Border Width: The border thickness. | |
| Border Style: The type of border, aka: solid, dashed, groove, double, dotted, ridge, inset, outset, none, hidden. | ||
| Border Color: The color of the border. | ||
| Border Shorthand: You can combine these three properties into one line as long as they are list as width, style, color. | ||
| Border Radius: Rounds the edges of your box on a curve. | ||
| Margin | read more | ||
| div { margin: 10px; margin: 10px 20px; margin: 10px 15px 20px 25px; margin: 0 auto; } | Spacing outside of the element. You can generalize one value that will be used for all four sides of the container, or specify two values (y & x in both directions), OR specify all four sides (top, right, bottom, left).You can also set a margin to auto, which will evenly space the element on the page, making it centered. | |
| Padding | read more | ||
| div { padding: 10px 15px 20px 25px ; } | The spacing inside of an element. You target the different sides the same way, but you cannot set an auto padding the same as margin. The difference between padding and margins is like this table right here: it has padding on the inside to keep the words from touching the border, and the table has margins outside of it to keep it from touching the edge of the page. | |
| Text Align | read more | ||
| h1{ text-align: center; } | Organizing the text left, center or right. | |
| Position | read more | ||
| img{ position: absolute; top: 100px; Left: 200px; } | Where an element sits in the flow of the page. By default all elements are relative, meaning they appear in the order they are added to the page. However, you can make an element fixed to the top of the screen (think website headers that don’t scroll away), or absolute to one section (they scroll, but are stuck to whatever location on the page you say. If you give an element position fixed or absolute, you must also specify where it will go relative to the sides of the page (top, left, bottom, or right), since it is outside of the normal formatting. | |
| Animation | read more | ||
| div { height: 200px; width: 200px; background-color: blue; animation: myAnimation 4s linear 0s infinite; } | To use an animation, you apply several values to the element you want animated. In order, they are: @keyframes nameAnimation length in secondsTiming, linear or eased in-outDelay in secondsHow many times it plays before stopping. | |
| @keyframes myAnimation { 0%{ margin-left:0px; } 32%{ margin-left:500px } 100%{ margin-left:0px; } } | Keyframes are the individual steps for an animation. On each frame, you can apply whatever style changes you like to the affected element. You can create however many keyframes you want your animation to have, and how far apart to separate them (it doesn’t have to be even). The only rule is that it begins at 0%, and ends at 100%. | |
| Flex Box | read more | ||
| div { display: flex; flex-flow: row nowrap; justify-content: space-around; align-items: center; } div h2 { flex-grow: 1; } | The display option flex is a more advanced, but a very powerful tool. Flex is a property given to containers that can arrange the contents in any orientation. It works like text align, except it works on any elements, in any direction, in either axis. To use it, declare the display as flex, then say which flow you want (row: horizontal, column: vertical) and whether if not you want content to wrap if it would overflow. Justify content will arrange things forwards or backwards on the chosen flow (space-around means that everything is spaced evenly from front to back) and align-items aligns the content in the opposite axis. In this example, my items would be arranged left-to-right, with even spacing between, and are vertically centered, making a nice row of content. | |
