[...]... file as in the preceding example The second issue is licensing Many of the fonts that you might use in Photoshop on your own computer aren’t licensed to be uploaded to a web server and served in this way, as other users could download the font file itself—just as they can download an image that you’re using on your website The CSS3 Anthology: Take Your Sites to New Heights 5 6 The CSS3 Anthology Browser... 2.8 reveals the same form, this time in Firefox on OS X Figure 2.8 The form alerts in Firefox The CSS3 Anthology: Take Your Sites to New Heights 23 24 The CSS3 Anthology Form Input Types The type="email" used for the email field is one of the new values for the type attribute brought to us by HTML5 forms What’s good about these new input types is that where browsers fail to recognize one, they just display... and can then use the fonts on your website by loading them in from the remote server Typically, they have a tool that allows you to generate the code required for your site Each service works in a slightly different way, but getting up and running with 3 https://typekit.com/ http://fontdeck.com/ 5 http://webfonts.fonts.com/ 4 The CSS3 Anthology: Take Your Sites to New Heights 7 8 The CSS3 Anthology. .. input[type="submit"] { float: none; width: auto; } form div.submit { text-align: right; } Using the :not pseudo-class Rather than overwriting the CSS using an attribute selector, we could also choose to use the :not pseudo-class The following code would target input elements as long as they weren’t a type of submit: The CSS3 Anthology: Take Your Sites to New Heights 15 16 The CSS3 Anthology form textarea, form input:not([type="submit"])... and submit the form without completing the fields, or if you enter something other than an email address in the email field, you’ll receive a validation error message, as shown in Figure 2.7 below This all happens through the browser with no JavaScript required The CSS3 Anthology: Take Your Sites to New Heights 21 22 The CSS3 Anthology Figure 2.7 Opera shows the validation messages when the form is... Generation and Conversions Forms and User Interfaces Figure 2.4 The CSS affects the Submit button in addition to the test input element To sort this out, we can use an attribute selector to address the Submit button and overwrite the CSS used for input I have also used the class applied to the div surrounding the Submit button to right-align the button This gives us our completed form: chapter_06/form.css... I give the form a width and then float the label element left: chapter_06/form.css (excerpt) form { width: 400px; } form div { float: left; width: 400px; padding: 0 0 0.75em 0; } form label { float: left; width: 120px; } Immediately the form starts to look better, as you can see in Figure 2.3 The CSS3 Anthology: Take Your Sites to New Heights 13 14 The CSS3 Anthology Figure 2.3 After styling the div... The form, now with added style The CSS3 Anthology: Take Your Sites to New Heights 17 18 The CSS3 Anthology Discussion I’ve used CSS to add a border to the input elements in my form By using different shades for the borders, I can create a beveled effect I’ve added to this effect by using box-shadow as an inset shadow; this creates the shadow inside the element rather than outside: chapter_06/form2.css... href="">Photos Contact The CSS3 Anthology: Take Your Sites to New Heights 29 30 The CSS3 Anthology Dunstanburgh Castle, Northumberland A trip to Northumberland... 80%; margin: 20px auto 40px auto; } form { width: 400px; } form div { float: left; width: 400px; padding: 0 0 0.75em 0; } form label { float: left; width: 120px; } form textarea, form input { float: right; width: 260px; } form input[type="submit"] { float: none; width: auto; } form div.submit { text-align: right; } The CSS3 Anthology: Take Your Sites to New Heights 11 12 The CSS3 Anthology Figure 2.1 . as other users could download the font file itself—just as they can download an image that you’re using on your website. The CSS3 Anthology: Take Your Sites to New Heights 5Text Styling and Other. with 3 https://typekit.com/ 4 http://fontdeck.com/ 5 http://webfonts.fonts.com/ The CSS3 Anthology: Take Your Sites to New Heights 7Text Styling and Other Basics a font usually involves selecting it on the service and then pasting some code into your site. You can then. w0 h1" alt="" Thanks for your interest! Thanks again for your interest in The CSS3 Anthology — Take Your Sites to New Heights . It’s great that you’ve decided to download this sample PDF,