Introduction to CSS Coding
While we think that originality is a bit overrated when it comes to website design (you can read all about that here), that doesn't mean you can't think outside the box. If you've ever wanted to be a little more creative with your Nucleus than what the platform natively allows you to do, CSS code might be just the thing you're looking for!
What follows is a very beginner's guide on CSS code. Nucleus does not claim to be experts on the subject, nor do we officially offer support on the topic; however, we didn't want to leave you without any guide on the matter. If you want to truly learn about CSS code, there are courses and books you can find by doing a simple Google search. But for now, let's dive into very shallow waters concerning CSS code, specifically for your Nucleus.
What is CSS Code?
Cascading Style Sheet Code is a form of code that internet browsers interpret to determine how specific elements (made up of HTML code) of a webpage should be displayed. It's super useful for customizing the design and layout of the various elements that make up a webpage or entire website.
At its core, CSS code consists of three basic components:
- Style tags
- Webpage elements
- CSS property.
With all three components added in the correct order, you can do some pretty incredible design changes to your Nucleus! We'll go over each of these components throughout this guide. But first, let's review some helpful resources 📚
CSS Codes & The Facebook Group
To extend your creativity in designing your Nucleus beyond its native tools, the Nucleus Insiders Facebook Group is a fantastic resource. Not only can you access a shared document with CSS codes, you can always ask the group questions if you're looking to customize your Nucleus but are unsure of how to go about doing it. The group is very active, and the likelihood of someone responding is high. But be aware that your question may have already been asked in the past, so be sure to also try to search your question before posting it.
If you're not a part of the group, you can request access here. Once you've been accepted, you can go directly to the CSS code document entitled Helpful CSS Code. Additionally, you can also look in our Help Center for these codes.
Take me to the Codes!
Where Do I Add CSS Code To My Nucleus?
When adding CSS code to your Nucleus, there will be two locations:
1. Individual Card's Settings
If you want to affect only a single card in your Nucleus, you'll need to access that individual card's settings. There are two locations you can access these settings:
a. In your All Pages list, you can click on the gear symbol to the right of each card. Scroll down to settings. Toggle 'Use Custom CSS' to on.
2. Global Code Injection Settings
If you want to affect your entire Nucleus or your homepage, you'll need to access your Global Code Injection Settings. In your Dashboard, click on 'Settings'. In the left sidebar, click on Code Injection, where you will find a field to type/paste in CSS code.
Because the Global Code Injection Field interprets more than just CSS code, it's important to denote your code using style tags. Style tags begin and end CSS code and look like this 👇
<style>
.blah blah blah {
blah-blah: blah; }
</style>
While you need to include this in the Global Code Injection Field, you don't need to include them in an individual card's CSS code field. Because that field is specifically designed to interpret only CSS code, Nucleus will automatically add invisible style tags at the beginning and ending of every string of code you paste in there.
How Do I Find The Webpage Element I Want To Edit?
Browser Developer Tools
When adding CSS code to your Nucleus, you'll need to know exactly which element you want to edit. You may want to add CSS code to the header of a specific card in your Nucleus, but unless you know the specific code for that element, you won't be able to make any edits to it, no matter how many CSS properties you may know.
That's where browser developer tools come in! From Microsoft Edge to Google Chrome to Apple Safari, each browser has their own developer tools. (Any following examples will showcase Google Chrome.) You can access your specific browser's developer tools in the settings, but let's explore some handy dandy shortcuts to save time:
On a PC
While in your browser, press Ctrl + Shift + i
On a Mac
While in your browser, press Cmd + Opt + i
Inspecting Elements
STEP #1: Open the developers tools in your browser.
STEP #2: Click on the top left cursor icon of in the developer tools console.
STEP #3: Hover your cursor over each element on the webpage. You'll notice they highlight as you do. When you find the element you wish to inspect, click on it.
STEP #4: The developer tools console is sort of split in two sections. In the bottom section, you'll usually find the element you want to add CSS code to in the first main top left box. In this example it's .pages-landing .pages-intro h1
How to Find CSS Properties
You might know to include style tags and you might even know what element on a webpage you want to customize, but without knowing the specific CSS property to customize that element, you won't get very far.
If you're like most people, you don't keep a notepad filled with various CSS properties. Thankfully, Google exists! If you're looking for any specific CSS property, you can always search what you want to do or the element you want to affect + "CSS property". For example:
- hide css property
- margin css property
- bold text css property
- italicize text css property
A great site to always look out for is https://www.w3schools.com/. They offer a wide range of help regarding all sorts of internet code, including CSS code.
Some CSS properties pertaining to the examples above are:
- visibility: hidden;
- margin-top: 100px;
- font-weight: normal;
- font-style: normal;
The beginning portion of each example is the CSS property itself, while the latter portion is the parameter of the property. You can edit the parameters of each property. For instance, you can change "hidden" to "visible", "100px" to "550px", "normal" to "bold", "normal" to "italic"
Bold & Italicize Your Homepage Heading (An Example)
Let's use the font-weight and font-style CSS properties to affect your Nucleus homepage header text. To edit anything on your homepage, you'll want to add CSS code to your Global Code Injection Settings.
Nucleus fonts are currently limited to specific font weights and styles, but a simple bolding and italicizing will work perfectly! But first, let's look at what an example Nucleus looks like without any CSS code affecting the homepage header.
With everything that we've explored above, we can now compile the code we need to affect our homepage header text. To only bold the header text, the code will look like this 👇
<style>
.pages-landing .pages-intro h1 {
font-weight: bold; }
</style>
To only italicize the header text, the code will look like this 👇
<style>
.pages-landing .pages-intro h1 {
font-style: italic; }
</style>
If you wanted to affect the same element with more than one CSS property, you can do that like so 👇
<style>
.pages-landing .pages-intro h1 {
font-weight: bold;
font-style: italic; }
</style>
NOTE: If you wanted to affect a header on a particular card with the same CSS properties, you'd paste the exact same codes above in that card's CSS code field (found in that card's individual settings); however, you would exclude the style tags like so 👇
.pages-landing .pages-intro h1 {
font-weight: bold;
font-style: italic; }
Save Your Changes!!
Make sure to always save your changes before leaving the page you're working on. Then check on the frontend of your Nucleus to see your changes. If you don't see the changes, double check the code to make sure it's all correct. If it is, it's possible the CSS property is incorrect or that particular property might simply not affect your Nucleus (such as specific font weightings currently).
If you haven't already done so, make sure to check out the list of common codes in our Help Center. Check them out, try what you're comfortable with, and customize your Nucleus exactly how you want it to look!
IMPORTANT NOTE: Adding custom code to your site can break the look or functionality of your site and is intended for advanced, more technical users with experience. So please use caution when using this feature. Our support team will be limited in their ability to help you with design or functionality issues if you have custom code.