Style a Web Form - CSS

You can style web forms with CSS. The form will not do anything with just HTML and CSS. You need an active programming language for that. (See the next lesson on JavaScript with forms.) CSS will add style elements like color, shape, and size to your basic HTML form, however.

To try CSS with a form, just insert this code into the HTML form from the previous lesson.

<style>
input[type=text] {
  width: 50%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 5px solid red;
  border-radius: 10px;
}
</style>

To keep things simple, the example above just addresses the input boxes for text. But CSS can work on the entire web page. That includes the background, the text, the input buttons, and anything else you choose to add.

Direct Vertical Ascent

Want to climb higher, quicker in web design with CSS? Consider these options:

For-Credit Course: IT 161 Web Authoring 1

Backtrack

Want to review the previous lesson in this vertical?

Mixed Style Web Site - CSS

Style a Web Form - CSS

Direct Vertical Ascent

Cut the Switchback

Self-study

Take a course at North Seattle College

Backtrack