Nano ASP.NET SaaS Boilerplate
demo Vue 3 Version demo React Version demo Razor Version
Admin credentials (all tenants): admin@email.com / Password123!
Sample data resets every hour
Docs Blog Courses Pricing & FAQ Sign In
Contact
Nano ASP.NET SaaS Boilerplate
General
Front-End Development
Front-End Development

HTML & CSS

So far in the course, we’ve learned about fundamental aspects of programming in JavaScript. Then we set up our primary development tool Visual Studio Code, which you can download for free.

Now we expand the scope to HTML and CSS and see how these three web technologies fit together as we start building a web application front-end. The module following this one will explore back-end development with ASP.NET. If you gain something from this course and want to step up your skills to intermediate or advanced levels, check out the Nano ASP.NET Boilerplate.

HTML Basics

Create a folder for the project, call it something like WebDevelopment and then open up Visual Studio Code. Go to File then Open Folder and open the folder you just created. In the left side of Visual Studio Code is the file explorer which will be empty. Right click in this area, and choose New File.

You can create different kinds of files by specifying the file type extension. Typically the main file in a web application is named index, so create a new HTML file and name it index.html.

The file will open in the main window of the editor and we can start adding HTML code. As we start typing, VS Code will provide syntax highlighting. Syntax highlighting and auto formatting are some of the many advantages in using a code editor like VS code. In the early days of coding, people used regular old text editors like notepad, and you still could use that but it will be a lot less fun!

HTML is not really a programming language but rather just a markup language. It consists of tags that define the page structure but not how it looks or behaves.

Let’s create a basic HTML structure then we’ll break down the key components:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Web Page</title>
  </head>
  <body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
  </body>
</html>

The <!DOCTYPE html> declaration at the beginning tells the browser this is an HTML document. It’s not required to start an HTML document with this tag but it’s recommended. Having this tag helps ensure your page is rendered consistently and correctly across browsers. Everything within the page is wrapped with an html tag.

The <head> section contains meta-information about the document that isn’t displayed directly on the page. This includes the page title (what shows up in the browser tab), links to CSS files, JavaScript files, fonts, and other resources the page needs.

The <body> section contains all the content that will be visible on your page – text, images, links, and other elements that users will actually see and interact with.

HTML uses tags to define elements. Most tags come in pairs with an opening tag <tag> and a closing tag </tag> with content in between. Some common tags include:

  • <div> – a generic container for content
  • <h1> to <h6> – headings of different levels (h1 is largest, h6 is smallest)
  • <p> – paragraph
  • <a> – anchor (hyperlink)
  • <ul> – unordered list (bullet points)
  • <ol> – ordered list (numbered)
  • <li> – list item
  • <input> – input field
  • <img> – image
  • <button> – clickable button

The <div> is extremely versatile and by far the most used tag. You could almost build an entire site with just divs, but other tags like <main> <section> <aside> <ul> <ol> help with accessibility, SEO, and code readability.

Save the changes with Visual Studio Code and then navigate to the file in the file explorer. Double click to open the file in your default web browser. You should see your “Hello World!” message displayed with a paragraph underneath.

Leave this browser open and let’s get back to the code to add a few more things.

<html>
  <head>
    <title>My First Web Page</title>
  </head>
  <body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
    <input type="text" placeholder="Enter text here" />
    <button >Click me</button>
    <a href="https://google.com" style="font-size: 30px;">Go to Google</a>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </body>
</html>

Here we see a few more common HTML elements, a text input, button, link, and an unordered list all with their default appearance. To make them look different we need to add CSS. Notice that they all have some basic styling to begin with. For example, the paragraph has some spacing below it, the button has a grey background with a border, the link color is blue, etc.

The H tags, paragraph, and unordered list are block elements by default, meaning they take up the whole horizontal space. The input, button and link are inline elements, meaning if there is any room available they will be placed on the same line. As we learn CSS this will make more sense.

Adding CSS Styles

There are three ways we can add CSS to our elements. We can add CSS code:

  • Directly in the element using a style attribute (inline)
  • In a style tag added to the head of the document (on page)
  • In a separate CSS file that is linked to the HTML document (linked style sheet)

First let’s add some inline styles using the style attribute within an element.

    <button style="background-color: green">Click me</button>
    <a href="https://google.com" style="font-size: 30px;">Go to Google</a>

Here we added an inline style attribute background-color to the button and made the link text a larger with font-size. While adding inline styles directly to elements is easy, it’s the least common method. Reload the page to see the changes.

A much more common method is to define the styles in a separate style sheet and target elements by their type, class, or ID. We can do this on the page with a style tag.  

In between the head tags, add a new tag group called <style>. Within the style tags, create styles for the button, link, and also the unordered list.

  <head>
    <title>My First Web Page</title>
    <style>
      
      button {
        background-color: lightblue;
      }
      a {
        font-style: italic;
      }
      ul {
        list-style-type: square;
      }
    </style>

  </head>

The unordered list and link styles were applied but the button background-color is still green. This is because of a concept called specificity. The C in CSS stands for Cascading. In CSS, the style that has the highest level of specificity on an element will be applied. In this case, the inline style has a higher level of specificity than a style that was defined externally, so it wins out. If we remove the inline styles and reload the page, we will see the styles we defined in the head take effect.

While you can define styles in the head with a style tag, the most common method of applying CSS is with an external style sheet. To do so, add a link tag within the head with a src (source) attribute pointing to the stylesheet file.

    <link rel="stylesheet" href="./style.css" />

The dot slash indicates that the file is in the same directory as the html document. We need to create this file however, so right click in the explorer window and add a new file called style.css.

button {
  background-color: orange;
}
p {
  font-style: bold;
}

If you include the linked style sheet tag before the on-page style tag in the header, the paragraph style will take effect, but the button background-color will not. This is because the order in which styles are included on the page matters. The button background-color attribute from the on-page style tag and the one in the external stylesheet have equal specificity. However, the on-page rule is defined later, so it overrides the one from the external stylesheet. If we moved the stylesheet link below the style tag, the external rule would be override the one in the on-page style and we would see an orange button. For now remove the on-page and inline styles and keep the external stylesheet. Reload the page to see the effect.

It’s possible to include multiple stylesheets, and often this is the case. You may for example use a theme like bootstrap which contains a baseline style for everything, and then add your own style sheet to override certain rules.

CSS Classes and Selectors

So far we have seen how we can target different HTML elements by their type, like buttons, lists, or links. Another way to target elements is by class or ID. Classes can be defined on any HTML element by adding the class attribute. Using classes is usually better than targeting by an element type because it allows for greater selection control


    <ul>
      <li class="amazing-class">Item 1</li>
      <li class="amazing-class">Item 2</li>
      <li>Item 3</li>
    </ul>

In the CSS stylesheet

.amazing-class {
    color: green;
    font-size: 20px;
    text-decoration: underline;
}

Here we have three div elements; the first two have the same class.  The way to select a class in CSS is by using the name prefixed with a dot. If you preview this code, you’ll see that the first two divs have styles applied but the third does not, which wouldn’t have been possible by using an element type selector.

Using element selectors is not bad, and actually you can use a combination of both. You could select all of one type of element and apply a general style, then use a class to apply a more specific one. Class rules have higher specificity than element rules.

Elements can contain multiple classes. The rules of specificity apply in these cases too, with the styles applied in order from left to right.

Another way you can select elements is by using an ID attribute. An ID attribute can be added to any HTML element. The difference is that IDs should be specific to one element, whereas classes can be applied to many. Assigning IDs is more useful for selecting things for JavaScript interactions. If by accident, more than one of the same ID is found on the page, the first one will be selected.

<button id="mainButton" >Click me</button>

In CSS, to target an element by its ID attribute, use the name preceded with a hash tag.

#mainButton{
    padding: 20px 30px;
    border-radius: 5px;
}

Conclusion

There are many ways you can select elements in an HTML document. Using the element type, class, and ID selector are only the beginning. There are more complex selection criteria like last of type, first element, not of type, etc. Also you can chain rules together and do things like selecting all the links within a particular div class, etc. It just takes practice to master. Selecting elements works the same way when working with JavaScript. To make a button do something when clicked for example, it’s necessary to first select the element to assign some behavior with JavaScript.

There’s a lot of CSS style attributes like padding, margin, font-size, color, etc. So far, we’ve only experimented with a few. Approximately 500 different attributes exist, but of those only about 50 are commonly used.

In the next guide, we will learn more about HTML and CSS, plus the knowledge gained here to build something that resembles a user interface. Later we will add JavaScript to make it do stuff. This will comprise the front-end of an application.

Previous
Next