CSS and Twitter Bootstrap - Dot Net Odyssey

Sidenote : This is the part 7 of the ASP.Net MVC course series. You can get all the parts of this tutorial here.

In this chapter, we are going to learn about basics on CSS and bootstrap framework. This chapter will not make you a CSS expert but it will give you foundation on understanding elements of web pages with good design.

What is CSS? Being a web developer, how it would benefit you?

CSS (Cascading Style Sheets) helps your web pages to look nice and beautiful.

For example, if you want your hyperlink to look in green color instead of default blue color – you can do that with CSS.

Want your paragraph text to be italic, CSS will do.

Want your heading to use a particular font size? You get it.

CSS makes applying styles to your elements simple and flexible.

Examples will always make things clear. Let us see some.

For this chapter, I would like you to use Notepad++ instead of Visual Studio. Visual studio has many tabs and windows which may distract you. Notepad++ is a simple and powerful text editor. Its free and you can download it from http://notepad-plus-plus.org/download/v6.7.4.html

I want the paragraph text to be bold by applying styles. I just have to make a simple change like below.

It will make the sentence bold.

CSS style is a nothing but a rule associated with a set of HTML elements. Each rule has a set of properties with values.

In the above example, our rule is making bold which is achieved by setting font-weight property value to bold and this css rule is associated with this particular paragraph element.

The style we have done is called “Inline style” as we have directly applied on the paragraph element itself.

There is a disadvantage in this approach.

What if we want to apply this same style (making bold) to another element say div, for example. We might have to copy this style paste it again like below. Even if we want to change this style, we have to change it in two places.

Another approach is to define rule at a common place, usually in the head section of the web page.

Below is the css rule that we have defined in head section.

CSS Selector:

When you define a style, you need to say to which type of HTML elements this style would be applied. This is called CSS selector. In our case, we are applying to paragraph and div and that’s why we have mentioned p,div.

When you want a style to be applied to multiple elements, you can use the HTML tags separated by commas.

CSS Rule:

CSS Rule is a set of properties with values. In our case, we have set the font-weight property to bold – to bold the text.

Application of styles:

As we have already mapped the css rules to the HTML elements, you don’t need to do anything else. The styles will be applied to both paragragh and div.

We have applied styles by directly mapping to the type of elements(paragraph and div). You can use this approach to apply style to wide variety of elements. If you want to apply a style only to paragraph with a div, you can do that by changing the CSS selector. I will discuss about different CSS selector later in this chapter.

There are couple of other ways you can do apply styles.

The first one is to map the CSS rule to the element id. The second one is to define a CSS class and you can apply this CSS class to any element of you web page. Please note that all are called CSS selectors irrespective of the whether you select by element id or type or apply a css class.

Let us see an example for each of these.

Mapping CSS rule to the id of HTML element:

You have to prepend #(hash symbol) before the element id when defining the CSS rule.

Complete html is given below. Only the paragraph text will be made bold as we made css rule only for element with id #para.

Define a CSS class and apply the class to HTML element(s):

You prepend the class name with .(dot) when defining the CSS class. When applying the css style to HTML element(s), you need to set the class attribute of HTML with the css class name(without the dot)

I have defined css class by name ‘makebold’ which sets the font-weight to bold. Please note that dot before the css class name.

When applying the css class to HTML, you have to set the class attribute of HTML element.

Ex : <p class=”makebold”>

Please note that when applying style, you don’t include the dot in the class name.

Complete code is attached below.

First we have applied style by inline. Later, we have created styles in the head section of the web page as we can make changes easily.

But there is a problem even with this approach.

What if we want to apply these styles to other web pages?

We have to copy these styles and paste them in the head section of other web pages.

There is a solution for that. Create a separate CSS file with all your styles and link it in your web page.

Let us see an example.

I have created a new file by name “mystyle.css” with the following content.

And I’m linking this stylesheet in my web page using link html element.

In the href attribute, you can just give the css file name if the file is available in same directory. Else, you need to give the name of the file with complete path.

The complete contents of web page is given below.

This approach makes things simple and offers flexibility. If you want to change the CSS rule, you can just make the change in the CSS stylesheet and don’t need to touch the web page. This offers separation of concerns where your UI designer would be designing your CSS and you, as a developer, can use them.

There are lot more things to CSS. But this information is enough to apply bootstrap to your web pages.

What is Bootstrap?

Bootstrap is a popular front end framework that you can apply in your web pages to make them beautiful and professional. Its free and open source. It is even included in many of the project templates of ASP.Net MVC.

You can extend bootstrap and customize according to your needs. But customization or extension of bootstrap is out of scope. We are going to apply bootstrap as it is.

Using bootstrap in your web pages:

Instructions for downloading and using the bootstrap is given at http://getbootstrap.com/getting-started/ but I’ll reiterate it again.

First download the bootstrap at http://getbootstrap.com/getting-started/#download

Click the big download button of Bootstrap. It will download a zip file by name “bootstrap-3.3.2-dist.zip” on your computer.

When you unzip, you’ll get 3 folders css, fonts and js. We may use only the following files from CSS folder and js folder

Css\ bootstrap.min.css

Css\bootstrap-theme.min.cs

Js\bootstrap-theme.min.js

File names which contain ‘min’ are minified – meaning that all unnecessary white spaces, tabs are removed and variable names are shortened to make the file size smaller. When you open the file, you couldn’t understand it but browser can. If you want to have look at the bootstrap styles, you can open the file CSS\bootstrap.css file instead.

Copy all the above 3 files to a folder and create a new html file in that same folder.

I have the following content in Sample.html

There are few things in this simple html file that need to be explained.

This statement is the Document Type Declaration which tells the browser what version of HTML the web page is coded on. This is also the standard declaration for HTML5 web pages.

Meta Tags:

We have used the following meta tags which deserves an explanation.

This meta tag tells the browser what type of character encoding is used. “Utf-8” is used for Unicode encoding.

This tag(“X-UA-Compatible”) informs the browsers what version of Internet Explorer that page is to be rendered as. We have “IE=edge” – meaning that it would use the highest version available.

This tag tells the browser how to display the web pages in devices of various sizes. Here, we are asking the browser to match the width of screen with device independent pixels. Setting “initial-scale” to 1 tells the browser to establish 1:1 ratio between CSS pixels and device independent pixels.

Bootstrap js file depends on jQuery library and we have included the same.

When you run this html page in the browser, nothing fancy happens.

It just displays the text as below.

At this point, you may wonder why we need to go for bootstrap as it does not do any magic J

The reason is that we have not yet used any of the functionalities of bootstrap. As we move along in this chapter, you’ll love bootstrap for its capabilities. Trust me. There is a reason why it’s most popular UI framework on the web.

Grid System:

Bootstrap provides the responsive grid system which scales up to 12 columns. You can refer here http://getbootstrap.com/css/#grid-options for more detailed explanation. But let me give you an simple example.

You can use the grid system by specifying the column size in class name. For example, “col-md-6” occupies 6 columns in arrow. The div where you specify the column should be inside the row class. And this row class should be within container class.

Please see the complete example below.

Typography:

All headings(From Heading1 to Heading6) are available through .h1 to .h6 classes.

Text Alignment:

You can align the text using the classes available.

Table:

You can use the table class for styling the table. There are many options available for different kinds of styling. For more information, please refer here http://getbootstrap.com/css/#tables

Forms:

Styles is applied for all form elements by default. You can group the form elements by using class ‘form-group’. For example, label and text input for email can be grouped together as both elements belong to same piece of information (email).

Different kind of styling can be applied for normal form, inline form and horizontal form. You can read more about forms styling at http://getbootstrap.com/css/#forms

Below is the bootstrap styled form code.

And the output of the above HTML would be like below.

Buttons:

You can apply different styling to button based on context. For example, to illustrate success you can use button with class btn-success.

Above button styling generates buttons as in the below screenshot.

You can even use Glyphicon icons in the buttons.

For more information, please refer here http://getbootstrap.com/components/#glyphicons-examples

Navigation bar:

Bootstrap provides several styling options for navigation bars( which are often used as menus in web application)

You can read more about navigation bar at http://getbootstrap.com/components/#navbar

Example code:

Above navigation bar style produces the below output.

[button type=”flat” shape=”square” size=”large” href=”https://www.dotnetodyssey.com/asp-net-mvc-5-free-course/entity-framework/” title=”Previous chapter”]Previous Chapter[/button] [button type=”flat” shape=”square” size=”large” href=”https://www.dotnetodyssey.com/asp-net-mvc-5-free-course/” title=”Home”]Home[/button] [button type=”flat” shape=”square” size=”large” href=”https://www.dotnetodyssey.com/asp-net-mvc-5-free-course/asp-net-mvc-application-setup-microimdbv2/” title=”Next Chapter”]Next Chapter[/button]

In the next chapter, we’ll discuss about our application – MicroIMDBv2