CSS Defined

CSS, or Cascading Style Sheets, is a language used to customize the way a webpage looks. Think of it like a house: HTML is the frame and CSS is the paint, the granite countertops, and everything else that makes it "pretty." In this tutorial, we will go over the basic syntax of CSS, how it relates to HTML, and how it can be applied to ShortStack campaigns. At the end of most lessons, there will be a CSS challenge that gives you the opportunity to try out and challenge your knowledge. The solutions for these challenges will be at the end of the tutorial.

Important: In order to fully grasp this tutorial and understand CSS, you'll need to have at least a basic understanding of HTML. If you're not familiar with HTML, this tutorial is a great way to start learning HTML.

The CSS Editor

All custom CSS should be input into the CSS Editor in the Campaign Builder. The CSS Editor can be accessed anytime by clicking the CSS link in the Style Panel.

Lesson 1: CSS Syntax

CSS is a collection of rules. It tells the browser how certain elements of a web page should look. Each CSS rule has two main parts: a selector, which is the element (or group of elements) you want to style, and one or more declarations, or the styles you want to apply to the selector. Here's the basic outline of every CSS rule:

selector { declaration; }

Selectors can be HTML elements, CSS IDs, or CSS classes (see Lesson 3 for CSS classes and IDs). Declarations have two parts: the property (what you want to change), and the value (what you change it to). The property always has a colon after it, and the value always ends with a semi-colon.

Let's take a look at an example of CSS. If you wanted to make the text in all paragraphs white with bolded font, you can use the following CSS to accomplish this:

p { color: white; font-weight: bold; }

Let's go through this example piece by piece. First, you have the selector, which in this case is "p." This is the same as the paragraph tag in HTML without the angled brackets. Next, we have an open curly bracket. After that comes the declaration, which has one or more properties and values. Properties always end with a colon and the value immediately follows. Values always end with a semicolon, which indicates the end of the property-value pair. In this example, we have two properties: color, which changes the font color, and font-weight, which changes the weight of the font. Then, each property has a corresponding value: the font color will now be white, and the font weight will be changed to bold. Finally, we end the CSS rule with a closed curly bracket.

Instead of writing CSS rules on a single line, you can create CSS blocks like this:

selector {
property: value;
}

Which one should you use? The general rule of thumb is this: if your CSS statement has only one declaration, make it a single line; if your statement has two or more declarations, you'll want to make it multi-line. This is purely for readability. It would be very difficult to read a CSS statement with ten declarations on a single line:

What if you want to style more than one element in the same way? No worries - CSS makes this simple. You can use a class to group certain elements together (see Lesson 3), or you can create a CSS rule with multiple selectors which will apply the styles to all elements at the same time. For example, if we wanted level 3 headers to have the same styling as paragraphs, you could use the following CSS (take note of the selector):

Adding the comma between the elements in the selector indicates that you want the styles to be applied to both. Forgetting to add a comma has an entirely different meaning (which we'll discuss in Lesson 5), so if you want to make sure that the style gets applied to both selectors, make sure you add a comma between each one.

If this sounds complicated, don't worry - ShortStack's CSS Editor has a CSS Validator. Once you've written your CSS, just click the Validate button in the CSS Editor. Any errors will be pointed out with an explanation, allowing you to correct any errors found quickly and easily.

Sometimes, you will need to add a special parameter at the end of your declaration statement to make it work. Because most ShortStack campaigns will have a fair amount of CSS applied to them by default, there will be times that you want to override the CSS that is already applied. This is where the !important property comes into play (notice the exclamation mark in front). !important will force a CSS declaration even if another CSS declaration would normally override it. Here's a simple example to show how this will look:

p { font-weight: bold !important; }

This CSS would turn all text in all paragraphs bold. Notice how !important goes before the semi-colon. The semi-colon goes at the very end of the declaration, and !important is part of the declaration statement. Additionally, notice how the value (bold) and !important have a space between them. You want to make sure that !important has a space between it and the value before it.

Finally, let's talk about how to add comments to CSS. Comments allow you to add notes to your CSS explaining what you did and why you did it. This is very important; when you add a lot of CSS to your campaign's CSS Editor, things can start to get confusing. Adding comments to the CSS can turn it from confusing to awesome. To add a comment in CSS, start it with a forward slash an asterisk: /* and then end it with an asterisk and another forward slash: */

/* This is a single-line CSS Comment. The comment is contained on a single line. */
/* You can also create multi-line comments.
This line is still a comment. Each line will remain
a comment until you close it off like this: */

When you add a comment to the CSS Editor in ShortStack, you'll see that the comment text turns a rusty red color. This is to help with debugging. It's easy to forget to close off a comment tag. If you see that all of the text in your CSS Editor is a rusty red color, it's likely that you forgot to close off a comment tag. You'll want to check the CSS in the CSS Editor for a comment that's missing the closing tag. Just scroll up in the CSS Editor until you see CSS that isn't the same color as a comment. The comment right below that functioning CSS is the culprit.

Lesson 1 Challenge: Syntax, Schmintax

For this first challenge, you're going to create a campaign and write some basic CSS to practice syntax. We will be using this campaign for the remainder of the CSS challenges. To create a new campaign, log into your ShortStack account. Next, click "Create Blank Campaign" toward the top. Name your campaign and click "Create Campaign". Once you've completed this, you're ready to start the challenge:

Open the CSS Editor.

Create a selector that would select all paragraphs on your campaign.

Create a declaration statement that would turn the font color white.

Add another declaration statement that turns the text bold.

Make it so that the declaration statement you just created is forced (hint: make it !important).

Add a single-line comment somewhere in the CSS Editor. You should see that the comment turns a rust red color. It doesn't matter what the comment says.

Add a multi-line comment in the CSS Editor.

Save and close out of the CSS Editor.

See Lesson 1 Challenge Solution at the end of this tutorial for the solution.

Lesson 2: The Box Model

One of the more complicated concepts of CSS for first time users is the box model. Essentially, think of your web page as a big box. Inside that box is more boxes. In ShortStack, each widget is a box, and elements inside the widget have their own box as well. There is no limit as to how many boxes a web page can have. This will become very important when we start talking about the parent-child relationship (Lesson 4).

Every box in CSS has four parts: the content which is the actual element that is displayed, the padding which is the space between the content and any border (which is the next part of the box) which surrounds the content, and the margin which is the distance between the box and other boxes. For a great visual of the box model as well as supplemental explanation, take a peek at this page.

The box model is very important. It dictates how much space elements take in a web page. The total width and height of an element is always the combined widths and heights of the content, padding, border, and margin. For example, if a widget's content had a width of 500 pixels, a padding of 10 pixels, a 1 pixel border, and a 20 pixel margin, the total width of that widget would be 531 pixels (500 + 10 + 1 + 20).

When talking about the box model, it's important to talk about DIVs. A DIV is just an empty box. Think of it like a container - it allows you to group elements together so that they can easily be styled. DIVs are used extensively in ShortStack, and the DIV tag was created specifically for CSS. Each widget in ShortStack has its own DIV, and most widgets have DIVs inside of them as well. For more information on DIV elements, take a look at this page.

Lesson 2 Challenge: Boxes! Boxes Everywhere!

In this challenge, you won't be writing any CSS. Instead, your knowledge of the box model will be tested. Try answering the following questions without referencing back to the material above.

How many parts of a box are there?

What are the names of the parts of the box?

Going from the inner most to the outermost of the box, what is the order of these parts?

What part of the box separates it from other boxes?

What HTML element was created specifically for CSS and is essentially just an empty box?

See Lesson 2 Challenge Solution at the end of this tutorial for the solution.

Lesson 3: IDs and Classes

Sometimes, you'll want to style a group of elements that aren't alike, and other times, you'll want to style just a single piece of your campaign, such as a specific paragraph and not all paragraphs. This is where CSS IDs and classes come in. A CSS ID is an identifier that you give to a single element. The ID allows you to target that specific element. CSS Classes allow you to group elements that aren't alike so that they can be styled together. While you can use the multiple selector syntax covered above, it's much easier to include a single class and style all elements with one go.

CSS IDs start with a hashtag whereas classes start with a period. With HTML, you would give an element an ID by adding ID="someID" in the HTML tag, and add class="someClass" in the tag to add a class. Here are some examples:

<h2 id="headerID">This header has an ID of "#headerID"</h2>
<h2 class="headerClass">This header has a class of ".headerClass"</h2>

The CSS above would assign the top h2 element an ID of "headerID" and the bottom header with a class of "headerClass." If you wanted to refer to them with CSS, you would put a hashtag in front of the ID and a period in front of the class, like so:

The CSS above will make it so that the h2 element with the ID of "headerID" has a font color of white and a font weight of bold. The second CSS rule will make the font of all elements with the class of "headerClass" blue with a font weight of italic. This is the primary difference between IDs and classes: IDs target one specific element while classes target all elements with that class assigned. This brings us to the primary rule with CSS classes and IDs: a CSS ID can be assigned to one element only and an element can only have one ID, while the same CSS class can be assigned to multiple elements and each element can have multiple classes assigned to it.

Lesson 3 Challenge: Show Me Your ID and Go to Class

In this challenge, you're going to be given HTML (below) and you're going to write some CSS to style up those elements. Try completing this without going back and re-reading unless you get stuck. Here's a beginning hint: the CSS you add for steps 2 and 3 are most likely not going to work at first. Remember the !important property in Lesson 1? You'll want to use that here. To start this challenge, head to your campaign and add a Rich Text Widget. In the Rich Text Widget, on the menu bar, click the Source Code icon, and then copy/paste the following HTML:

Target the DIV element and set the font weight to bold. Note: This won't actually change anything when you try this. The reason for this is because you need a combo selector that selects everything within the DIV. We'll discuss combo selectors in Lesson 5. For now, if you want to see this work, add a space after your DIV selector and add an asterisk ( * ) before the opening curly brace. See the solution if you get stuck.

Target the first paragraph with the class of "blue" and make its font color blue.

Target the second paragraph with the class of "red" and make its font color red.

Target all paragraphs and make their font smaller. (HINT: the declaration statement will be font-size: smaller;)

Make the declaration statement you just made important (See Lesson 1 for a refresher on making a declaration important).

See Lesson 3 Challenge Solution at the end of this tutorial for the solution.

Lesson 4: Parent and Child Elements

This is where things get a little tricky. With HTML, there is a convention known as the Document Object Model (or DOM for short). The DOM is a way to represent an HTML document with parent and child elements. Think of it like a traditional family: there's the child, and the child has parents, and grandparents, and great grandparents, and so on. The same is true for the DOM: child elements have one direct parent, and that parent element most likely has a parent, and this goes on until you reach the most parent element which is the document itself.

Take a look at the picture below. This is a snippet of the underlying HTML of a campaign in ShortStack using Google Chrome's Inspect Element tool (see Lesson 8 for more info on the Inspect Element tool). For this example, the top DIV element is the parent element. The DIV underneath it is indented - this indicates that it's a child of the element above it. You can see that the child DIV has children of its own as indicated by the indentation of the elements below it. This is the easiest way to see if an element is a child or a parent of another element.

Why is this important? It has to do with something known as inheritance which is a very important part of CSS. Inheritance is a rule that says that certain styles will fall from the parent to the child elements automatically, even if they weren't explicitly declared. For example, take the following HTML:

As you can see, the CSS is being applied to all DIVs in the document. In the HTML, the DIV is the parent element to both the paragraph and the link tags. Without inheritance, we would have to declare a font size for each of those elements, but because of inheritance and because font size is a property that can be inherited, the font size is passed down from the DIV to the paragraph and link tags automatically. Less work for you = success!

Lesson 5: Combo Selectors

There's another reason why the parent-child relationship is so important to understand. With CSS, you can create selectors that utilize the parent-child relationship. Let's take the last HTML example in Lesson 4: we have a parent DIV and two child elements - a paragraph and a link tag. What if we wanted to target only the paragraph that is a child of a DIV? Combo selectors to the rescue!

div p {
color: black;
font-weight: bold;
}

Recall in Lesson 1 when we said that the commas were very important to separate out elements when using multiple selectors? This is why. If you leave out a comma, as in the example above, it turns it into a combo selector. You can see that the first selector is 'div' and then a space, and then the paragraph selector. In English, this says "Target all paragraphs that are a child of a DIV element." When writing combo selectors, you always write it so that you have the parent on the left and the child on the right.

Combo selectors can be used with IDs and classes as well. Take the following HTML as example:

We have two DIVs here - one with an ID of "divID" and another one with an ID of "anotherDIV." What if we wanted to target only the paragraphs that are children of the DIV with the ID of "divID"? You guessed it - combo selectors!

#divID p {
font-family: Arial, Tahoma;
font-size:16px;
}

Because we are using an ID as the parent, only the children of the DIV with the ID of "divID" will be styled. The paragraph in the other DIV will not have the styles applied to it. Combo selectors are a great way to target elements that do not have an applied ID or class. In ShortStack, this will almost never be the case. The Campaign Builder applies classes and an ID to almost every element in your campaign. As a result, we strongly recommend always using a class or an ID instead of using combo selectors. Combo selectors are inherently difficult to grasp and master. Using an ID is the easiest way to target a single element and we generally recommend using this method when starting out.

The final topic to discuss with combo selectors is the idea of selector chaining. This allows you to target specific elements that meet certain criteria. Generally, this is done when you want to target a specific element that has a specific class assigned to it. Let's look at some more HTML as an example:

<p class="someClass">This is a paragraph with an attached class.</p>
<a href="#" class="someClass">This link has the same class!</a>

With the CSS above, what if we wanted to target just the paragraph? We can't use the class "someClass" because it would target both the paragraph and the link elements. With selector chaining, you can use the element and the element's class to select it, like this:

p.someClass { padding: 10px; }

This CSS rule will target all paragraphs with the class of "someClass", meaning the link element above will not be targeted. Selector chaining can get very complex, so we generally recommend only using it when you absolutely need to. Again, we strongly recommend using Widget IDs when working with CSS unless you need to target very specific elements; even then, chances are the element you want to target will have an ID. Use that when you can.

Lesson 6: Specificity

Certain CSS rules can be very tricky. CSS specificity is the bane of the novice CSS user. It is the single most common reason why your perfectly valid CSS simply doesn't work like you expect. While the CSS may be syntactically valid, CSS specificity rules may be the cause. Specificity states that certain CSS selectors have precedence over others. Generally, the order of precedence goes like this, from highest to lowest: in-line styles, IDs, classes, and then elements. This means that if you have two CSS rules, each targeting the same thing, the selector with the higher precedence wins. Let's take a look at some more HTML (hooray!):

Given the CSS above, will the color of the text in the DIV be white, blue, or orange? If you guessed orange, you're correct! IDs have a higher precedence than classes and elements, so this is what gets applied. And, because of CSS inheritance (see above), the text color in the paragraph will also be orange as the parent will pass down the color attribute to its children. However, if we added the following CSS:

#paragraphID { color: red; }

What color will the paragraph with the ID of "paragraphID" be? You guessed it - red. Because we targeted the ID of the paragraph element, this will override any inherited values that the parent passes down.

It's important to understand how specificity is calculated. While we could go over it here in this doc, there is a fantastic reference to it online that will serve the purpose. Read through this document for a better understanding of how CSS specificity works. Understanding this will reduce or eliminate frustrating situations in the future.

Lesson 7: Declaration Properties

If you've been following along with the example CSS, you've probably been wondering where the declaration properties are coming from, like color, font-weight, and font-size, along with their corresponding values. There is quite a list of available properties and values and, at first, it may feel like a lot to remember. Don't worry - most of the time, you will reuse a very small amount of the available properties; however, it is a very good idea to become familiar with the most common ones and, also, to know where to find the available CSS properties. As luck would have it, w3schools has a fantastic reference page that categorizes and goes over all available CSS properties and their corresponding values. We're going to go over the ones you will most likely use here in ShortStack. Clicking on the property link will take you to the w3schools page for that property.

Box Properties

margin: This allows you to set the top, right, bottom, and left margins of an element. You can use the shortcut style of setting margin wherein you set all four values in one line: margin: 10px 5px 15px 25px. This property would set the top margin at 10 pixels, the right margin at 5 pixels, the bottom margin at 15 pixels, and the left margin at 25 pixels. You can also set each margin individually using the margin-top, margin-right, margin-bottom, and margin-left properties.

padding: Much like the margin property, this lets you set the top, right, bottom, and left padding of an element. The shortcut style of the padding property is exactly the same as the margin property going from the top and moving clockwise (to right, bottom, and left), or you can set each individually using the padding-top, padding-right, padding-bottom, and padding-left properties.

width: This sets the width of an element. IMPORTANT: to keep your campaigns responsive on mobile devices, always set widths to percentages and not pixel values.

height:This sets the height of an element. ShortStack campaigns automatically adjust their height based on the content, so there is no limit to the height you can set on each element.

display: This sets the type of box you want to show. A value of "block" will add margin to the top and the bottom of the element giving it space (like a block). Setting this to "inline" will not add any margin or space around the element; it will sit inline with the rest of the content around it.

position: This is a more advanced property. You can set this property to static, relative, absolute, and fixed. Click the property to find out more about this topic and how it affects the box model.

visibility: This determines if the element is visible or not. You can set this property's value to visible, hidden, or collapse (collapse is only available on table elements). Widgets set to "starts hidden" initially have their visibility property set to "hidden".

z-index: This sets the stacking order of elements on a page. With CSS, you can place multiple elements on top of one another. This can be problematic when some elements have background colors while others are transparent. Setting the z-index allows you to dictate which elements sit on top (or beneath) other widgets. The value is a number and the element with the higher number sits on top of the element with the lower number.

Text Properties

color:This sets the color of text. You can set this to a named color (e.g "orange"), a hex value, or an RGB value.

text-align: This sets the horizontal alignment of the text. You can set the value to left, center, right, or justify (stretches each line so that they're equal widths).

line-height:This sets the height of each line. You can set the value to a percentage of the current value, a number which is multiplied by the current value (e.g. 1.2 would be 120% of the current line height), or a length in px, pt, or cm (pixels, point, or centimeters).

Text Decoration Properties

text-decoration:This sets the decoration on the text. The value can be none, underline, overline, or line-through.

text-shadow:This sets a shadow on the text. This is a multi-value property, starting with the horizontal shadow, then the vertical shadow, an optional blur distance, and then an optional color. An example would be text-shadow: 1px 1px 2px black, which would say make the text shadow's horizontal and vertical distance 1 pixel, give it a 2 pixel blur, and make the color black.

Font Properties

font:This is the shorthand property to set all font property values in one line. This is more advanced. Click the property name to get more information on this, or keep reading to see the individual font properties.

font-family:This allows you to set the family of fonts you want to use. The first one listed is the primary font, and any other fonts listed are fallback fonts. Fallback fonts are important as some web browsers may not have the listed font. Fallback fonts ensure your users see a font you want them to see instead of the default browser font. Fonts are separated by a comma, and multiword fonts (e.g. "Times New Roman") must have double quotes around them.

font-size: This sets the size of the font and corresponding text. You can set this to a relative size (e.g. "small", "medium", etc.) or you can set it to an exact value using percentages (as a percentage of the default value) or pixels/centimeters/em/etc.

font-weight: This sets the weight of the font. The value can be set to a number from 100 to 900 (with 400 being equivalent to normal and 900 being equivalent to bold) or set with a: normal, bold, bolder, or lighter.

@font-face:This is an advanced CSS rule that allows websites to download web fonts from external servers. If you want your users to ensure that they use your font, this rule will instruct the user's browser to download this font if it isn't available. This is used in conjunction with the font-family property.

There are many other properties not covered here, but these are the primary properties and values that you will be using a majority of the time. Please see the URL referenced above to see all available CSS properties and values.

Lesson 8: Using CSS in ShortStack

So far, we've been going over general CSS that would apply to any web page. Let's start focusing on how you can apply this to your ShortStack campaigns. It's important that you become familiar with the CSS Editor in ShortStack. This is where you want to place all of the CSS changes you make to your campaign. You don't want to put any style tags in the CSS Editor - just place the raw CSS. To get to the CSS Editor, click the CSS link in the top-right corner of your Style Panel.

Recall that every widget you add to your campaign will have a CSS ID assigned to it. This makes it simple if you want to make an adjustment to the entire widget. The IDs of the widgets will generally be predictable (e.g. the first Image Widget will have an ID of #image, the second one will have an ID of #image2, etc). If you want to know what the CSS ID of any widget is, just hover over the widget's name in the Edit Widgets Panel and the CSS ID will appear in a tooltip.

What if you want to modify just a specific part of a widget and not the entire widget itself? While it's true that almost every element in your campaign will have an ID and/or a class assigned to it, how do you find out what that is? Introducing the Google Chrome Inspect Element tool! Chrome's Inspect Element tool allows you to right click your mouse on any part of a web page and see the underlying HTML, the HTML above and below it, any CSS applied to that element, as well as much more that is beyond the scope of this tutorial.

When you right click on an element in Google Chrome, a toolbar will appear. If you click on "Inspect Element", this will bring up the Inspect Element tool at the bottom of your browser window. The main part of the window displays the HTML of the element as well as the HTML surrounding it. The panel on the right hand side shows the CSS that's applied to that element. Finally, if you hover your mouse cursor over the line HTML that is highlighted in the HTML panel, it will highlight the element on the web page and display its selector directly below it.

In the HTML pane, you may see a triangle next to certain lines of HTML. If these arrows are pointing to the right, this means that there are child elements that are currently collapsed. Clicking this arrow will expand that section, and the arrow should now be pointing downward. This is very important if you want to target specific child elements and not the parent element itself. You'll see that, as described in Lesson 4, child elements will be indented.

If you're using a ShortStack theme or template, there is a good chance that quite a bit of CSS will be pre-applied to your campaign. Recall in Lesson 1 where we talked about the !important property. This is where it becomes very important. There will undoubtedly be a time when you're adding CSS to the CSS Editor and the change you were expecting won't happen. Most of the time, this is due to the theme or template's CSS. In Lesson 6, we talked about specificity, and what is most likely happening when your CSS isn't working when it should is the template or theme CSS has a higher precedence (meaning it's more specific) than the CSS you added to the CSS Editor. We generally recommend that you try altering the CSS selector to make it work, but if you can't, try using the !important tag after each declaration statement to force the style.

Note: You could have added your comment anywhere in the CSS Editor as long as it didn't interfere with the selector or declaration statement, and your comment could have said anything. It's more important that you understand how single- and multi-line comments work.

Lesson 2 Challenge Solution

Here are the questions and the answers for this challenge:

How many parts of a box are there? - 4

What are the names of the parts of the box? - margin, padding, border, and content

Going from the inner most to the outermost of the box, what is the order of these parts? - content, padding, border, margin

What part of the box separates it from other boxes? - margin

What HTML element was created specifically for CSS and is essentially just an empty box? - DIV

Lesson 3 Challenge Solution

For the first solution, the asterisk at the end of the selector means "all". This is known as the "wildcard" selector. The reason why this is required to make the CSS work is that when targeting DIVs, you also need to target the content within it for certain types of declarations (such as font-weight, color, and other decorative styles).