diff --git a/p10/style.css b/p10/style.css new file mode 100644 index 0000000..cfd0ebb --- /dev/null +++ b/p10/style.css @@ -0,0 +1,60 @@ +body { + /* Center the form on the page */ + text-align: center; + } + + form { + display: inline-block; + /* Form outline */ + padding: 1em; + border: 1px solid #ccc; + border-radius: 1em; + } + + p + p { + margin-top: 1em; + } + + label { + /* Uniform size & alignment */ + display: inline-block; + min-width: 90px; + text-align: right; + } + + input, + textarea { + /* To make sure that all text fields have the same font settings + By default, textareas have a monospace font */ + font: 1em sans-serif; + /* Uniform text field size */ + width: 300px; + box-sizing: border-box; + /* Match form field borders */ + border: 1px solid #999; + } + + input:focus, + textarea:focus { + /* Additional highlight for focused elements */ + border-color: #000; + } + + textarea { + /* Align multiline text fields with their labels */ + vertical-align: top; + /* Provide space to type some text */ + height: 5em; + } + + .button { + /* Align buttons with the text fields */ + padding-left: 90px; /* same size as the label elements */ + } + + button { + /* This extra margin represent roughly the same space as the space + between the labels and their text fields */ + margin-left: 0.5em; + } + \ No newline at end of file