What are HTML and CSS?
Simply put, HTML and CSS are coding languages.
HTML stands for HyperText Markup Language. We will be using HTML in your Dubsado forms to add additional elements that aren’t a part of Dubsado’s core form features.
If this all seems like way too much and you’d rather just create pretty forms without all the coding hassle. Checkout out code snippets & templates, no coding knowledge needed. Just copy & paste!
CSS stands for Cascading Style Sheets. CSS is the code that’s used to describe how to style HTML elements on websites, forms and more!
Absolutely everything you find on your Dubsado forms will be made up with HTML code behind the scenes, this means we’ll be able to style absolutely anything with a little CSS. Now you may be slightly intimidated by the idea of coding. But don’t fret, I’ll walk you through the whole thing!
This post will only teach you the basics. If you are interested in learning more about HTML and CSS I recommend Codeacademy and W3 Schools.
The Anatomy of HTML
Even though you don’t need to know all the details of code or become a coding expert to customise your Dubsado forms, it is useful to understand the basic terminology and l believe you should always use coding best practices.
In HTML code everything that goes between the little arrow symbols (< >) is known as a tag. Tags almost always come in pairs, with some information in between them.
<p>This is some paragraph text</p>
The main tags that you’ll use in your Dubsado forms are:
<div> which defines a section, <p> which defines a paragraph, <br> which defines a single line break and <h1> which defines a heading. In your Dubsado forms you’ve got heading tags which go from H1 – H6. Heading Tags should be used hierarchically.
Quick Tip: For SEO purposes you should only use H1 once on a page. All other headings can be used multiple times, but should always be in sequential order. H2 tags should come after H1 tags, H3 should always come after H2 tags and so on. Whilst this is less important for your Dubsado forms, it’s good to get into the habit!
We’ll use some of these tags later on when we create our own elements.
Classes and IDs
Another important thing to know when it comes to HTML is classes and IDs. You use classes and IDs to help categorise your elements. These will come in handy when it comes to styling with CSS.
The code below will create a Heading element, with the class ‘sample-class’ and the ID ‘sample-id’.
<h1 class="sample-class" id="sample-id">This is a heading</h1>
You can name your classes and IDs anything you like. I try to keep them consistent, using lowercase words and hyphens. You can do what you like, but make sure you only use letters, numbers, hyphens (-) or underscores (_). There are also some rules such as you can’t start with a number. Case is also important, so Sample-class is different to sample-class.
A simple way to understand the difference between a class and an ID is to imagine a classroom.
All of the individuals in the classroom are a member of the same class but they each have their own individual name as well, this is their ID.
When you use classes you are able to style multiple elements all at once, whereas when you use an ID, you are only targeting that specific individual element.
Each ID should be unique which means that you should only use an ID for a single element in your code. However, you can give multiple elements the same class.
Indentation
Whilst this won’t actually affect your code, in order to keep your code neat and provide structure it’s standard to use indentation to space out your content and increase readability. You would usually indent the code that is between the start and end tags, but for shorter lines of code you may choose to place them all on one line.
<div>
<h1>This is a heading</h1>
<h2>This is a subheading</h2>
</div>
In the above example, the code inside the div tags is indented, but the heading codes are kept all on one line as they are short enough.
Commenting in HTML
The final thing to know about HTML is the use of comments. You can add comments which will be ignored by your machine, but will help you stay organized and remember what on earth the code actually means.
As shown below, in HTML comments are always enclosed in a set of symbols.
<!--This is a HTML comment example-->
It’s important to be as descriptive as you can, particularly when you’re new to coding, as it will help you refresh your memory when you’ve been away from the code.
The Anatomy of CSS
CSS comes in two forms; global and inline.
Global CSS is the CSS we add in our <style></style> tags. It can target everything on the page.
Inline CSS is when the style attribute is applied directly to a single HTML element.
<h1 style="color:red;">This is a heading</h1>
To add CSS to your Dubsado forms, you’ll need to add <style></style> tags into a code block.
These <style> </style> tags are an example of HTML tags. This is super important, as the code block automatically assumes you’re giving it HTML so you need to tell the code block when you’re giving it CSS instead.
Every single part of CSS that you write needs to fit between two style tags.
CSS Selectors & Declarations
Now let’s write our first line of CSS code. A CSS rule-set has a selector followed by a declaration block. The declaration block is encompassed by curly brackets and can include multiple declarations separated by semi-colons.
selector{
declaration
}
The selector is the element that you’d like to style. Your selector may be an element type, an ID, a class or an attribute.
The declaration is instructions about how to style each attribute, for example font-size, color, and more. A CSS declaration is broken into a property and a value.
selector{
property:value;
}
Firstly, we will style using an element. For this example we will style using the p element.
p{
color:red;
}
This will give all p elements red text.
When you’re using colours in CSS and HTML, you can either use colour names e.g: red, hexcodes e.g: #000000 which will give black text or rgba colour values e.g: rgba(29, 127, 134, 1).
Alternatively, we can style with a class selector. To tell your CSS code that you are using a class selector rather than an element type you simply put a full stop in front of the class name.
.example-class {
color:red;
}
This will give ALL elements that have the class ‘example-class’ red text.
Finally, we can style with ID selectors. To tell your CSS code that you are using a ID selector you simply put a hashtag in front of the ID name.
#example-id {
color:red;
}
This will give the element that has the ID ‘example-id’ red text.
Finally, we may like to combine these CSS codes.
p.example-class{
color:red;
}
This will give any paragraph elements that are a member of ‘example-class’ red text.
If you are using the same style for multiple selectors you can apply a declaration to multiple selectors using a comma.
p, h1{
color:red;
}
This will give both paragraph elements and heading 1 elements red text.
You may also want to make multiple declarations at once.
p, h1{
color:red;
font-weight:bold;
}
This will give both paragraph elements and heading 1 elements bold red text.
If you’d like to know more CSS declarations which will come in handy – check out this post!
Commenting in CSS
The final thing to know about CSS is the use of comments. Similar to HTML, you can add comments to help organise your code. Unfortunately, they have a slightly different format.
/* * This is a comment example. */
You must start with a forward slash and a star, and then end with a star followed by a forward slash. However, the inside is pretty flexible- just remember to be descriptive! This will help you when you want to refer back to your codes later on. Any code you download from us will have plenty of comments to help you understand exactly what is going on!
And that’s the basics of HTML and CSS within Dubsado! If you’ve found it interesting and want to learn more I recommend checking out our free course Beautiful Dubsado Forms. And if you’d rather not bother with the coding check out our simple copy & paste templates instead! No coding knowledge needed!