CSS Forms and Buttons

Consistent input padding, borders, labels, and focus styles improve usability. Keep buttons large enough to activate comfortably on touch devices.

What you will learn

• Explain the purpose of css forms and buttons in a real website.
• Read and adapt a working example instead of memorizing syntax.
• Test your result and recognize a common implementation mistake.

Understanding the concept

Keep labels visible, ensure sufficient touch targets and show clear focus indicators.

CSS rules select elements and assign property–value pairs. The cascade, specificity, and source order determine which declaration wins.

This topic is part of the CSS learning track. Read the example carefully, identify each important element or statement, and try changing one part at a time. Small experiments help you see cause and effect.

Example 1: Working code

input, textarea { width: 100%; padding: 12px; border: 1px solid #94a3b8; border-radius: 8px; }
input:focus-visible { outline: 3px solid #93c5fd; }
button { min-height: 44px; padding: 10px 20px; }

Create an HTML file containing <div class="practice">Example</div>. Add the stylesheet inside a <style> element or external CSS file.

How to understand this example

1. Identify the syntax introduced by this lesson.
2. Read the code from top to bottom and predict what it will do.
3. Run the code, then compare the result with your prediction.
4. Change one value, selector, or element and run it again.

Example 2: A small experiment

/* Experiment: CSS Forms and Buttons */
.practice-19 {
  padding: 1rem;
  border: 2px solid #2563eb;
  border-radius: 0.75rem;
}

This second example is a practice scaffold. It is not a replacement for the main example; combine the ideas to make a small working page or script.

Common mistakes and best practices

• Use responsive units and test layouts on narrow screens.
• Inspect computed styles in Developer Tools when a rule seems ignored.
• Do not copy examples without understanding the result; inspect and test them.
• Prefer clear, descriptive names and simple code over unnecessary complexity.

Hands-on exercise

Your task: Style a contact form for keyboard and touch users.

Extra challenge: Improve the example for a real DevLearn student portfolio or small business website. Explain your changes in two sentences.

Show exercise guidance

Apply the example rule to a test element, change the relevant property, and compare its appearance at desktop and mobile widths.

Quick knowledge check

1. What problem does css forms and buttons solve?
2. Which part of the main code example would you modify first?
3. How would you test that your change works?

Suggested answers

Keep labels visible, ensure sufficient touch targets and show clear focus indicators. The relevant part depends on your change; test by running the code and inspecting the result using the browser and its developer tools.

Next steps

Complete the exercise without copying the solution. Save your code in a folder named css-lesson-19, then continue to the next lesson in this track.