You might have created an application with all the required functionalities. It may even work perfectly without any issues in all scenarios. But the success of your application depends on how well your users can access it. Your application should look good (if not great) and be user-friendly in order for it to be a success.
In this chapter, you are going to learn about the following topics:
- Role of HTML and CSS in the ASP.NET Core application
- Characteristics of front-end frameworks and different frameworks available
- Bootstrap and its grid system along its features
- CSS classes available in Bootstrap for form elements such as input and select elements
- CSS classes for different types of HTML elements such as table
- Using Bootstrap in your ASP.NET Core application
Before discussing how to make our application look good, let us take a step back and discuss the roles that HTML and CSS play in your application.
As mentioned earlier, all browsers can only understand HTML, CSS, and JavaScript. So, the applications that you build should produce output as HTML, CSS, and JavaScript. This holds true for web applications built using other technologies such as Java or Ruby on Rails. Having said that, we will only discuss HTML and CSS.
HTML (Hyper Text Markup Language) is used to structure the content in your web pages. For example, you can add content in a title tag so that it will be available in a browser's tab or window. Let us see an example.
Open any text editor (you can even use Notepad), type the following HTML content and the save file as Bootstrap.html. Please note the extension .html:
<!DOCTYPE html>
<html>
<head>
<title> Beautify your ASP.NET MVC applications using Bootstrap </title>
</head>
<body>
<h1> Bootstrap </h1>
<p>
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
</p>
</body>
</html>
The first line tells that the HTML content follows HTML 5 standards (the latest and the current version of HTML) and should be interpreted as such. The html tag tells the browser it is the start of an HTML document. Information in the head tag represents metadata and tells the browser to the web page rather than the web page itself. Examples include the page title, description about the page, and keywords for the search engine optimization. All the contents of the body tag will be shown in the browser's main window. In the preceding HTML code, we have made Bootstrap the heading and the rest of the content has been made as a paragraph.
Open the file in the browser and you should see something like the following screenshot:
You will notice the content placed in the title tag shown as the browser's tab title, the heading content is made bold and bigger in size, and the paragraph starts on a new line.
CSS is all about styling. You can use CSS to customize how each of the elements in your web page looks. You can change the color of the button, the font of the heading text, the border size of a table, and so on. You can include CSS styles either inline or using a separate file. If you are using inline CSS, it should be within a style tag. If you are using external CSS, we can make use of a link tag and refer to the external CSS file.
CSS is nothing but a set of rules used for the presentation. Each rule consists of two parts—a selector for which a declaration has to be applied and a declaration containing the styling information. The styling information has a property and a value for the property.
Let us take the following simple CSS rule:
h1{
color : #0094ff;
}
This CSS rule states that all the heading text should be in a blue color. h1 is the selector, which tells the browser the following declaration has to be applied for all h1 tags. In the declaration, we are setting the blue color (#0094ff is blue in hexadecimal format).
The following is the updated HTML file where I've updated the CSS styles (highlighted in bold):
<!DOCTYPE html>
<html>
<head>
<title> Beautify your ASP.NET MVC applications using Bootstrap </title>
<style type="text/css">
body{
font-family:Arial,Verdana,sans-serif;
}
h1{
color : #0094ff;
}
p {
color: #5f5e5e;
}
</style>
</head>
<body>
<h1> Bootstrap </h1>
<p>
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
</p>
</body>
</html>
When you open the file in a browser after making the style changes, you will get the following output:
Having said that, you need to create CSS rules to make the elements in your web application look good. But creating different styles for each element is a time-consuming and tedious task. You can choose from any of the frontend frameworks available.
Any application should have the following characteristics:
- Consistency: The elements and the controls that are being used by your application should be familiar to the user. For example, if you use a drop-down list, the user should be able to select only one value from it.
- Responsive: The application that you build should look good across all devices of different sizes. The code that you write should adapt to the screen size of the device of your users.
- Mobile-friendly: This is related to the preceding point. These days, many applications being accessed from mobile devices rather than desktops or laptops. We have to make sure that the application that we build will look great on mobile devices.
- Customizable: If you are going to use any front-end application framework, it should be customizable according to your needs. For example, if you want to update the heading text color, you should be able to update or override the CSS file to make the necessary changes.
- Easy to get started: The learning curve for learning your front-end framework should be minimal as you should be spending time on delivering value to the customer—building and delivering the solution. We are not getting paid to learn a new fancy front-end framework.
There are few front-end frameworks available such as Bootstrap, Foundation, and PureCSS. In this chapter, we are going to use the Bootstrap framework as it is the most widely used front-end framework.