Learning CSS Series

Part -9 Styling forms and Working with Fonts

This edition of Learning CSS Series is a bit special because we finally move to end our advanced section. We are today going to work with Styling forms and Working with fonts.

We will explore what are the major aspects to look at when working with these two critical elements of our web page design. Let us now begin!

Styling Forms

Styling the forms can be divided into two parts:

Styling Inputs and Buttons
Validation Feedback Styles

The CSS used to styling the form must conform to certain guidelines to ensure the smoothest User Experience for the end customer.

There are several selectors present in HTML forms, such as label, input, select etc.

These inputs need to be styled when we are talking about styling HTML forms.

Styling for Advanced attribute selectors:

We can not select the attributes normally like following:

[type]{
color:red;
}

This is because an html form might contain similar naming of attributes throughout.

However, we can use advanced attribute selection to select such elements.

We can select a specific element by adding a value to the attribute to it.

[type=”email”]{
color:red;
}

Here we are also adding the name or value to an attribute for this element.

One more way of selecting such elements is selecting a specific attribute value in List. This is especially helpful if we have multiple values associated to an attribute.

[lang~=”en-US”]{

color:red;
}

The next way is that suppose we want a specific attribute value or this attribute as a prefix.

[lang|=”en”]{

color:red;
}

This works like a pattern matcher which will match the above pattern where the attribute value starts with “en” but can contain any other value.

The other way is that we can also select element with specific attribute value prefix.

This means that if there is any special character in the assignment of attribute values, we can tackle that as follows.

[href^=”#”]{
color:red;
}

The next way is similar to the prefix selector. However in this case we select the element with specific attribute value Suffix.

[href$=”.de”]{

color:red;
}

We can also target an element with at least one attribute value.This means that given a value for any attribute in any element selection, the value must contain the specified key at any point in its definition.

[src*=”cdn”]{

color:red;
}

The last method would be to check whether we want to include case sensitivity turned on or off for the previous mentioned selector, which we can do by simply adding i at the end of the selection.

[src*=”cdn” i]{
color:red;
}

Summarizing the Advanced Selectors:

The not() selector revisited:

The not selector does exactly what its name suggests. It prohibits selection of an element based on the selector that is defined.

E.g.

.signup-form input:not([type=”checkbox”]){
outline:none;
background: #d8f3df;
border-color:#2ddf5c;
}

Here we specifically do two things, we select the signup form with all elements listed under input and then we ask the selector to not select a named value attribute with the value checkbox.

The not selector removes the attribute selection that is supplied in the not parameter.

Summary

Working with Text and Fonts

We will be covering the following here:

Generic and Font families
Using and importing font families
Font properties

Generic families and Font Families

Following are the font families that fall under the generic categories.

Font families give us a way how we represent the information on our web page.

By default, the browser has a generic font that is applied to all non customized fonts displayed.

The generic families are what are supplied by the CSS code from its default codebase, they can drive the CSS font styling but need to be also supplied by the browser.

The last category is using the Font Families. These are fonts that can be directly imported in our project to change the font styling. E.g google fonts can be imported as font families. These can be again like fonts present at user’s computer, fonts available from Web fonts, fonts retrieved from a server etc.

Above is the representation of how fonts work in browsers.

Syntax for font in CSS

To write fonts in CSS, we can follow something like:

font-style: “Montserrat”, “Verdana”, sans-serif;

Here the first value specifies the first font-family to look for when applying font styling on rendering.

Basically this means that Montserrat as font will be looked up by the browser to apply on the web page.

If this is not available, the control jumps to the second attribute being applied. If even this is not available in the browser-fonts, then the final generic family specified will be applied.

Font Face

The @font-face rule allows custom fonts to be loaded on a webpage. Once added to a stylesheet, this css rule instructs the browser to download the font from where it is hosted, then display it as specified in the CSS.

We can use the following syntax to get a font-face for our browser:

@import url(//fonts.googleapis.com/css?family=Open+Sans);

Custom Fonts

The @import tag helps us to get the font-face loaded from a URL to our website.

We can also import our own custom fonts in the following steps:

Generate a custom font either through online tools such as Google fonts or any other means.
Download and place the fonts in a common folder.
The fonts will have an extension such as .ttf
Place the fonts in the directly of your project from where you want to load the fonts.
Use the @font-face tag to import fonts in your project as:

@font-face {
font-family: ‘MyWebFont’;
src: url(‘myfont.woff2’) format(‘woff2’);
}

Here the src should specify the location of the font file in your project.

Above is how we can apply Custom designed fonts for our webpage.