How to Learn to CSS Style Code in 15 minutes or less

At the moment, Blitzen offers you some accessible design options to customize your form. These include the ability to change colors, textbox inputs, as well as header images and submit buttons. These options and more can be found in the Design tab of your form.

But today we’re going to show you just how much more you can do with Cascading Style Sheets (CSS). If you are new to this do not be frightened. There are many many resources that can help you get acquainted with basic CSS, and that’s all you need to make your basic Blitzen forms b-e-a-utiful.

Style sheets are documents of code which allow you to change the way your form looks. More specifically, CSS allows you to target elements of a form and give them styling rules.

The following post will review how to write styling rules in proper syntax, demonstrate how to find the elements of Blitzen forms you wish to target, help you set up your own style sheet, and tell you what elements of Blitzen forms can be manipulated.

What you will need to get started:

A Blitzen form (any one of your forms)
A Text editor (our favourite one is Sublime Text. It’s free to download here)

Let’s begin by dissecting an existing stylesheet.

Sample Style Sheet

(Download here and open in your text editor or copy and paste directly into your text editor)

body {
	background-image:url("https://blitzen.com/blog/wp-content/uploads/Burlap-Lace-Background.png");
	background-size: cover;
}
h1 {
	font-size:45px;
	text-align:left;
}
hr {
	display:none;
}
.form-button {
	width:100%;
	border:2px solid #ebd6d6;
	border-radius: 3px;
	background:none !important;
}
.form-button:hover {
	box-shadow: inset 0 0 0 3px rgba(255,255,255,.4);
}
.submit-container {
    margin-top: 10px;
}
.form-footer{
	display:none;
}
#form-submit-canvas {
    padding: 70px 100px 25px;
}

When this style sheet is uploaded to an existing Blitzen form such as the one one the left, it will turn into the one on the right. Pretty cool right? (You also have to change some colors in the Design Tab)

While the default looks pretty nice as is, it might not fit the look you are going for. This is where the style sheet comes in. So let’s get started and dig into those rules.

Writing Rules with Proper Syntax

Theory

A style sheet is a set of rules. A rule is a selector followed by a declaration block.

The selector is the HTML (form) element you want to style.
Each declaration includes a property and a value, separated by a colon.
The declaration block contains one or more declarations separated by semicolons.
A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.

As you can see, each rule has three separate parts: selector, property, and value.

To make it more relatable, pretend your form is a house and we are looking to do some heavy duty renovations. An element we want to target is a window. The window then becomes the selector. A property of the window could be size, or shape, or color, and their permutations could be the values. The CSS will look like so:

window {color:yellow; shape:circle;}

The above code will change all of the windows in the house to be yellow and round. If only it was that easy 🙂

Proper Formating

You will notice that in the sample style sheet the rules are broken up into several lines, this is actually the exact same rule but in the proper CSS format.

The only difference is that each declaration has it’s own line and the closing brace is also on a new line.

In this example, we want each block of text with the tag H1 (Heading 1) to be 45 pixels (px) large. (A pixel is a basic unit of color on a screen and is used as a standard form of measurement in CSS).

When you want to add more than one declaration (rule) to a selector just start it on the next line like you see on the left.

With the addition of this declaration, each text with the H1 tag will be 45 pixels large as well as left-aligned.

Now that you have the syntax down, let’s dig into the possibilities.

Selectors, and Properties, and Values (oh my)

There are three basic types of selectors:

Selectors

Tag	refers to elements which can be found standard on every HTML webpage such as body, h1, p. For a full exhaustive list of existing HTML tags see here.
	In our sample style sheet the tags are: body, h1, and hr
Class	A class can be attributed to any element. In a style sheet they must be preceded by a period ‘.’ There is also a sub-group called pseudo-classes which are used to define a state of an element. This will become clearer momentarily.
	In our sample style sheet the classes are: .form-button, .submit-container, .form-footer, and we have one pseudo-class which is .form-button:hover. This :hover pseudo-class creates a styling rule for when the submit button is hovered over.
ID	An ID is attributed to a unique element in an HTML document and should only be used once. In a style sheet they must be preceded by a hashtag ‘#’.
	In our sample style sheet we only have one ID and that is #form-submit-canvas.

*It should be noted that all of the selectors included in your sample style sheet already exist on the form. You can also create your own classes and apply them to fields but we will discuss this later. For now let’s work with existing elements.

Properties and Values

Each selector or group of selectors will have a unique set of properties. For example, while a house will have windows, doors, and floors, it will not have headlights or wheels. So you will not be able to use headlights or wheels as properties for a house. The same goes for values, each set of properties has their accompanying values. The following table should give you a comprehensive overview for basic properties and their values. We strongly encourage you get acquainted with each of the links in the right column.

Basic Property Groups	Values
Color	Colors
Font / Text / Text Decoration	Text
Size	Lengths and percentages
Box / Margins / Padding	Margins / Padding
Border	Borders
Background	Background
Animation	Animation

For an exhaustive list of existing CSS properties and their meanings please see this list.
For a broader discussion of selectors, properties, and values see this tutorial.

While some properties and values may appear quite cryptic, most of them are self evident.

You will notice in our sample style sheet we use:

PROPERTY	WHAT WE USE IT FOR IN OUR CSS
background	(change background color on our submit button)
background-image	(set a background image for the form)
background-size	(tell the background image appear in a particular size)
font-size	(you know this one)
text-align	(this one too)
padding	(give our form some more space around the edges)
margin	(reduce the space between the submit button and the question)
width	(make the form button full width instead of short and left aligned)
border	(give the submit button a specific border)
border-radius	(give the submit button rounded edges)
box-shadow	(give the submit button an inner shadow)
display	(make the footer disappear, make the horizontal line ‘hr’ disappear)

I am willing to bet, even without looking in the parentheses, you know what most of these were supposed to do.

Okay, you’re really moving a long now! Let’s move on to building your own CSS.

Setting Up your Own Style Sheet

First, open up your text editor and start a new file.

If you are using Sublime Text, click on the bottom right hand corner, a menu will appear with language templates. Choose CSS.

Next you have to find the names of the HTML elements you wish to style.

To know how to find them on your own, read the next section, to see a list of commonly used elements skip to the following section.

Find the Elements

Open up your form in a browser and right click on the item you want to style.

Click ‘Inspect / Inspect Element’ in the menu which appears.

The inspector will pop up. You will notice that as you move your mouse over the code, different things will highlight on the page. Move your mouse around until it has highlighted the exact item you wish styled. It is possible you will have to expand some ‘div’ elements to zero in on the item.

What you are looking for is the “class”. Usually somewhere in the code you will see a class = “something” like in this image:

Whatever is in between those quotation marks is the name of your element. If you do not see one, look to the bottom of the screen to what element is highlighted in blue.

In the image above we have singled out the submit button which has the class form-button. This is our selector; we can now put it on our style sheet. Remember, any selector which is a class has to have a period ‘.’ before it.

Now our style sheet now looks something like this:

.form-submit {
}

There’s no declaration because we haven’t included any rules, let’s put one in now. As a test, let’s make the submit button full-width. Write in width:100% so it looks like this

.form-submit {
	width:100%;
}

Don’t forget the semi-colon after your declaration!

Great work. Now repeat the process for every other element you wish to style.

You now have everything you need to build your own style sheet.

Here is a handy list of form elements to make it a little easier:

List of Blitzen Form Elements

Selector name	Where it is found	Most Used Values	Type of Selector
body	This is the under-layer to the entire form	background, margins, padding	Tag (element)
#form-submit canvas	This is the layer atop the form body	padding, margins	ID
header	– form header	size, margins, padding	Tag (element)
hr	– horizontal lines	size, color	Tag (element)
h1 (header 1)	– form title	color, text, size	Tag (text)
h4 (header 4)	– form field label – thank-you message	color, text, size	Tag (text)
h5 (header 5)	– form description under title	color, text, size	Tag (text)
.traditional	where traditional form-fields are used	size, background, padding, margins	Class
.small	– word count – progress bar	color, text, size	Class (text)
.material-input.traditional input, .material-input.traditional textarea, .material-textarea.traditional input, .material-textarea.traditional textarea	This combination of classes targets the areas where people input text answers on the form.	size, color, margin, padding	Class
.brand-logo	This is the custom header image	size	Class (image)
.form-field-instructions-stacked	– field instructions – description field	color, text, size	Class (text)
.form-description	– form description	color, text, size	Class (text)
.submit-container	This contains the submit button	all	Class
.form-submit	– submit button – progress bar	all	Class (button)
.form-footer	This is the ‘Form provided by Blitzen’ footer	display	Class

If you want to create a new class and apply it to a field like in this article. Simply give it a unique name in your style sheet (and don’t forget to precede it with a period.

Once you have your CSS, save it and upload it!

Upload your CSS

See this article for instructions.

CSS work requires a lot of tweaking. One thing you should know is that your CSS changes will not appear in the design preview, so you will need to View Form to see your piece de resistance.

If you want to change the CSS do so in your text editor, save it, and upload it again.

If ever you are in doubt, there are many resources online to answer questions. Google is your friend 🙂

That’s everything for today! Happy CSS-ing

Skip links

Main navigation