HTML and CSS Reference
In-Depth Information
26. }
You'll notice that most of these properties and values revolve around the box mod-
el, which we covered in Lesson 4 . We're primarily setting up the size of different
form controls, ensuring that they are laid out appropriately. Aside from adding
some box model styles, we're adjusting the color and font-weight of a few
9. So far, so good: our form is coming together quite nicely. The only remaining ele-
ment yet to be styled is the submit button. As it's a button, we actually have some
existing styles we can apply here. If we think back to our home page, our hero sec-
tion contained a button that received some styles by way of the btn class attribute
Let's add this class attribute value, btn , along with a new class attribute value of
btn-default to our submit button. Specifically we'll use the class name of
btn-default since this button is appearing on a white background and will
be the default style for buttons moving forward.
Click here to view code image
1. <input class="btn btn-default" type="submit" name="submit"
Now our submit button has some shared styles with the button on the home page.
We'll use the btn-default class attribute value to then apply some new styles
to our submit button specifically.
Going back to the buttons section of our main.css file, let's add the following:
Click here to view code image
1. .btn-default {
2. border: 0;
3. background: #648880;
4. padding: 11px 30px;
5. font-size: 14px;
6. }
7. .btn-default:hover {
8. background: #77a198;
9. }
These new styles, which define the size and background of our submit button,
are then combined with the existing btn class styles to create the final presenta-
tion of our submit button.
Search WWH ::

Custom Search