15 CSS Tips, Guides, and Code Snippets for Beginners
CSS can be tricky. Start here
CSS can be a difficult language to master; web design and user interactivity in itself is an art form and a meticulous endeavor. Many beginners to CSS easily go to frameworks with professionally designed and curation DOM elements. I have used Bootstrap and Semantic UI in the past and will use them again in a pinch.
However, sometimes you want to customize those prebuilt cards and buttons, design your own webpage, and figure out how to make your website look professional. This article is a breakdown of tips, guides, and some code that I wish I’d known when I started my CSS journey.
The Basics
How do I get started with CSS? What should I be thinking?
CSS is used to style the elements that exist in HTML. Without CSS, websites would be a white background with black text, with all of the DOM elements stacked vertically in the top-right corner. Every website has begun this way, so don’t worry if that’s what yours looks like!
Tip: Put borders on every element
How do you know where all of your elements are, or how they relate to other elements? First thing is to put a border around everything!
border: 1px solid black;The above code will add a border around your element, informing you visually what space it takes up. Bonus points if you have different widths, styles, or colors to help you differentiate elements from one another. These borders exist to know where an element is relative to the page and are a great way to understand your DOM nodes and plan your final design. There are some plugins, such as the Chrome Extension Pesticide, which will add borders to existing webpages.
Why this is useful: Not being able to visualize your CSS changes can inhibit your understanding of the space HTML elements take up. Especially when you are messing with the width/height of elements, moving them outside of the DOM hierarchy with position: absolute; , or when you are using Flexbox or Grid to move around the structure of your app (see below for more details!). Using borders around elements also helps to visualize the Box Model!
Guide: The box model
The Box Model defines the layout of a DOM element: It is a box made of concentric boxes. The content of a DOM element comprises the content box. The content box is surrounded by the padding box, which adds extra space between the content and the border box. Outside the border of a DOM element lies the margin box, which adds (or subtracts) space between this element and other elements adjacent.
If you ever forget or need a visualization, open up your developer tools (Chrome: Crl+Shift+i on a PC, Cmd+Opt+i for Mac), and go to the Elements tab. Towards the bottom (if it’s not there, click the Computed tab) is the Box Model for whatever element you happen to be looking at.
Why this is useful: When adjusting the values of a content’s width or height, and the padding, border, and margin, you should know what you are changing. Often I find myself wanting to change the spacing between elements, and I adjust the padding instead of the margin. Be wary: Setting the width and height of an element only changes the content box, not all of the elements. If your DOM element has this styling:
width: 150px;
height: 200px;
padding: 10px 20px;
border: 3px solid blue;
margin: 25px 30px;the total height of this element is 200 + 10 + 3 + 25 = 238px and the total width is 150 + 20 + 3 + 30 = 203px , which is significantly larger than the height and width you might be expecting. Check out Box Sizing for more details about an alternate box model.
Tangential tip: Divitis
Though this tip is about HTML, CSS is really just applied HTML. When you are constructing your website, you may be tempted to use the div tag (division) as your HTML element because it’s what you see in sample code, YouTube videos, or other quick explanations of HTML. However, using the div tag for every situation is both harmful for your website’s accessibility for your users and causes you to write unnecessary code when designing.
Why this is useful: Div tags are automatically designed with display: block;, which causes the element to take up the width of a page and forces elements before and after it to be separated with a line break. Using other elements won’t restrict the default styling of your elements to be in block formation. Check out this HTML5 Periodic Table for a graphical display of your HTML options and this excellent article by MDN on the Box Model and Display types.
Experiment With Styling
The above tips outline the theory of CSS, but they don’t help with applying CSS in your projects. Just like any other programming language, I would recommend that you google your questions; many designers have asked “How to a center an element,” so don’t be ashamed if you have to too. However, here are a few tips to help you on your journey.
Guide: Dev tools
If you want to directly interact with your website, and see what individual stylings do (or don’t do), do it live! Open up your developer tools, go to the Elements tab, and inspect a specific element. Below the HTML layout, you should see the Styles tab, and you can view the element.style {} input field. Right in this space, you can adjust the CSS of the selected element and see the changes live.
You can type in the property, and Chrome will auto-populate a value for that property. You can toggle through different values with the arrow keys or use the scroll wheel to adjust number values. If you have states for your styles, like hover or active, you can also toggle on those and see how the styling changes. Explore this tab if you haven’t already.
Why this is useful: My absolute favorite part about figuring out CSS this way is you can type in whatever you think you might need and Chrome will auto-complete options for you. Want to adjust something about the width? Type in width as a property, and you get dozens of options. It’s a fantastic way to stumble into new technologies. Be wary: If you refresh the page, all of your styles disappear; copy them to your CSS file before you refresh!
Tangent: I have seen a few articles about Firefox’s developer tools and how expansive they are compared to Chrome. I have not spent much time using those tools, but I would advise checking them out. Mozilla does a lot of great work keeping the internet sensical (you can thank them for all of your MDN searches). Check out these blogs: Firefox DevTools for CSS Authors by Dennis Gaebel and A Guide to New and Experimental CSS DevTools in Firefox by Victoria Wang.
Tip: Steal from other websites
Are you envious about how well a navbar is designed or want to know the colors of that background with that article border? CSS is available for you to take from other websites to examine, adjust, or simply copy to your project. Again, all of this magic can be done in the developer tools.
By going to the Computed tab, next to the Styles tab, you can see the culmination of all of the styles on a given element. If you aren’t sure what something does, try adjusting or removing it in the Styles tab.
Why this is useful: If you want to emulate the expertly crafted design of professional websites or the design tools, like Semantic UI, inspect those elements, see how they work. You can take what you like and really examine the parts that make up the sum of the element. Breaking apart good design is a great way to learn.
CSS 201: Expanding Your Toolset
You’ve spent some time dabbling in CSS, getting out of your comfort zone. Let’s explore some more complex CSS features that change how you will think about the layout of your webpage.
Code: Flexbox, or, how to center anything
If you ever have a question about Flexbox, just go to css-tricks.com/snippets/css/a-guide-to-flexbox. I use it all the time because it breaks down how to use it for elements and for children of elements, all with pictures. Flexbox gives you
“a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word ‘flex’)” — CSS Tricks: A Complete Guide to Flexbox
Want to center your elements? Flexbox.
.parent-container {
display: flex;
justify-content: center;
}
.child-elements {
align-self: center;
}Want to display a list of cards that is evenly distributed on your webpage? Flexbox.
.parent-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}Why this is useful: Flexbox is easy to implement, there are thousands of guides on how to use it, and some of the code written above is set by default, so you don’t even need to add many lines to your CSS file.
Code: Grid — it feels like I’m cheating
If you want to make your website responsive to different screen sizes, need to adjust the location of your HTML elements frequently, or like coding with Lego bricks, Grid is for you. Also known as CSS-Grid, this is my favorite way to design webpages. There are so many tools you can use within Grid to format your webpage, and below is just one way to accomplish this.
When I first started using Grid, I structured all of my DOM elements by declaring their grid-row-start and end and their grid-column-start and end. However, since I discovered this lecture video from Morten Rand-Hendriksen, I’ve been using grid-template-areas to define where my HTML elements should go.
Why this is useful: You can easily restructure your entire DOM tree by using Grid, and it is fast to implement. And, if you aren’t sure about the location of your elements, it is much easier to restructure your layout. Given that layout structure is this easy with Grid, I would highly recommend using Grid if you are planning on having a different display depending on the device. Restructuring your elements, not just scaling them, in very easy with Grid. I would highly recommend watching the aforementioned lecture video because it breaks down everything you can do with this CSS feature.
Tip: Sass — nesting code
Sass is a version of CSS that is made to make CSS easier and modular. Any code written in a .sass or .scss file is interpreted into CSS. There are plenty of cool things about Sass that I have only dipped my toes into, like variables and mixin (classes for CSS), but the easiest thing that you can implement right now is nested styling.
.container {
color: maroon;
border-radius: 10px;
.children {
margin-left: 1em;
}
}Why this is useful: Nesting your CSS makes the relationships between styles easier to code and, more importantly, easier to read. When your styling files start to get really long, it can be hard to know where certain styles are. Nesting your data is a very simple way to make styling easier than ever before. Plus, Sass has so many other features that you can explore to find out about. Start with nesting your code, then explore the other features.
My Code Snippets to Help You Get Started
Every time I start a new project, I always know there is some design that I will want to use from a previous application. Here are some samples of my own code that I have gone back to reference at every project. Feel free to adjust them directly in the CodePen.
Code: simple buttons
Here are some buttons I developed in an older project that I always go back to. I like the color inversion when a user hovers, the border-radius property (which rounds the corners of a border), and the box-shadow property to add some depth.
Code: Making an image fit in a container, and sample cards
This is a two-for-one: sample cards, and how to fit an image into a container. There are two different kinds of cards: one that is just an image with a title, and one that holds additional info. Try adjusting the size by changing the height and width in the .dynamic-card class.
To make an image fit in a container without warping, addobject-fit: cover; and overflow: hidden; if you need it.
Code: Simple translation animation
Animations are a really fun aspect of CSS that can add that extra oomph to your project. This sample is just a simple +1/-1 animation, which just translates the position of an element and decays its opacity. There are many, many more ways of doing animations, so I encourage you to experiment.
Code: Pop-ups
This is less about CSS and does include JavaScript, but I’ve been using different kinds of pop-ups to display data to users on many projects. The below code features samples of a custom modal, sidebar, and tooltip. You can get more info in my Modals, Sidebars, Tooltips, Oh my! article.
Additional Resources
There are so many resources available to better help you design your websites. I’ve made this list of a few notable websites that I use frequently.
Guide: Pick out a Color Scheme with Coolors
Coolors displays five colors at a time and allows to you instantly view colors with a touch of your spacebar. You have access to that color’s hex code, can adjust the hue, view what the color is for different kinds of color blindness, and a lot more. You can lock individual colors so when you regenerate, that color stays for the next round. Try it out yourself!
Hover over a color to lock it, move it around, etc., and just hit spacebar to generate new colors.
Tip: Google Fonts
What fonts you use may not even be on your radar when designing the structure of your site. It can really shake things up to change your font, and Google Fonts makes it easy to browse different fonts. Their instructions are also simple to follow.
Tip: SVG Icons
Adding icons can also add another dimension to how you design your app. Replace loading windows, button prompts, and editing tools with SVG Icons. I’ve used Font Awesome many times, but check out other sites like the Noun Project or Flaticon. Check out their documentation to see how to enable the icons in your project.
There’s much more to CSS out there, and this is just a sample of what I know on my journey so far. Design is exciting and important to keep in mind when you are building your website. I would encourage you to make your own collection of notes, tools, tips, and code, so you can reference your acquired knowledge for future projects or help and teach others.
