Forms are a part of every website that wants to collect information from the user. You need to understand how to style a form with CSS. How your site looks will have a tremendous impact on how your users interact with it.
Don’t let your website forms look like junk. Keep reading for your guide to modern CSS form styles!
What Is CSS?
Cascading Style Sheets, or CSS styling, is a computer language that describes how elements in a browser should appear. They control the look, positioning, style and other effects of the page elements. CSS is used on almost every single web page in existence, so it’s a good idea to know something about it!
There are many CSS properties. The CSS properties are a list of effects that a browser can apply to the document. There are many different properties, and not every browser evaluates them exactly the same.
One of the simplest CSS properties is called font-style, and a typical option is italic.
- This is regular text.
- This is text with the font-style italic.
The HTML for the italic looks like this:
- This is text with font-style italic.
In the above example, we used inline CSS. That means that the CSS rules were inserted directly into the document “in line” with everything else.
There are three main ways to add CSS. All three can accomplish the same thing but are used for different reasons. You should use the one that fits the specific situation.
inline. Inline styling means that the CSS code is placed within the element of the document to be styled. This is placed within the definition of the “style” attribute of the element. Like:
You should use inline styling when there is only one instance of the thing you want to style.
internal. Internal style sheets are entire sheets contained within the HTML document. They go in the HEAD area of the document [although HTML5 allow style sheets to go anywhere].
external. Finally, the third type of CSS is an external style sheet. An external CSS file is accessed directly by the browser and integrated with the page linking to it before it is displayed. External style sheets usually have the extension “.css”.
External links go in the HEAD section of an HTML document. The code will tell the browser where to find the linked file. It looks like this:
You should use an external style sheet when you want the styles to be applied to multiple pages.
WordPress uses a theming system. Each theme is required to have a specific file called “styles.css”. You can edit it directly by going into your admin backed and clicking
- Appearance >> Editor
This will bring you to your theme’s styles.css file in the text editor. You can make changes directly to your theme’s CSS here.
The WordPress styles.css is just a regular CSS style sheet, but it applied to the front end on every page and post on the site.
If you are going to make changes to your theme like this, you need to do it in a child theme. A child theme won’t be overwritten when the main theme is getting a maintenance update. There are plugins in the .org repo that will create a child theme on your site.
The other way to directly change the CSS on a WordPress theme is by using the WordPress “customizer”. To get to the Customizer go click:
- Appearance >> Customize
Now you can make changes to the CSS elements of your site that your theme supports. The main thing to remember about the Customizer is that the changes are saved to the database. When you make changes to the theme via the editor, you save the changes directly to the theme files.
Common CSS Form Styles
Elements within a form are often assigned relative percentage widths. This is so the form itself can expand or contract to fit the element it is within. You might want to line up smaller width elements on the same line.
Width 2 Characters and 5 Characters:
Sometimes you’ll want to declare the width in terms of character. You can use “size” and “maxlenght” for this. i.e. you might want to do this for a U.S. “state”, being only a 2 character abbreviation, and “zip code” being a 5 character slot.
You can color the background and the font color with the background-color and color properties.
You can apply special effects when form elements are focused. Focus means that the user has clicked or selected the element. Focus is a “pseudo” property. It reflects the actions of the user and is a kind of “state” for the element.
- Formsy React – This library handles validation and styling in a way that optimizes flexibility an reusability for CSS forms.
- Redux Forms – This library puts all the form’s properties into the React memory space
- Formik – Formik is a React library that enables you to do Test Driven Development [TDD] and unit testing on your forms, straight from the browser.
Get Your Style On!
You don’t want to get caught wearing last year’s clothes on your body, or having last year’s CSS form styles on your website. It’s important to stay on top of all the latest trends and make your forms enticing to your audience.
Keep reading our web design blog for advice on keeping your website up to date with all the latest trends!