A Complete HTML and CSS Guidelines for Beginners

July 12th, 2017 . 6 minutes read
Blog featured image

If you are new at HTML & CSS then you should familiar with these Guidelines before starting. Let’s discuss HTML and CSS Guidelines for Beginners in this post for better UI and UX designs.

Guidelines to follow

  • Html
  • CSS
  • Class
  • Section
  • Single page CSS
  • CSS/JavaScript custom file
  • Proper commenting
  • Code reusability
  • CSS according to framework
  • Code check

HTML – Hypertext Markup Language :

All critical website content should be added to the website using a markup language such as HTML.

Proper comment section should be used before writing any code because it will help us in identifying why this code has been written and what is the use.

Always add “alt” attributes to images because it will help when an image for some reason cannot be displayed Use lower case element and attribute names.

Use correct document type – Always declare the document type as the first line in your document.

Close all HTML elements and quote the attribute values.

Do not add blank lines & indentation unnecessarily.

Avoid code lines over 80 characters.

Representation of HTML:

CSS – Cascading style sheets:

Presentation of the website content should be defined by a styling language such as CSS.
Use simple syntax for linking to style sheets (the type attribute is not necessary) with proper comments.

  • Place the opening bracket on the same line as the selector
  • Use one space before the opening bracket
  • Use two spaces for indentation
  • Use semicolon after each property-value pair, including the last
  • Only use quotes around values if the value contains spaces
  • Place the closing bracket on a new line, without leading spaces
  • Avoid lines over 80 characters
  • New file should be used for creating CSS

Representation of CSS:


If there are multiple elements on a single web page and that need to be styled then we use classes. For example, let’s say that you want to give a redirect a particular button to some site or at the new page or at pressing the button it’s color should be changed. So for modifying colors & redirecting page to some link, we use classes and for that,  you could add a class to each of those buttons or the container holding the buttons.

Representation of classes:

CSS/JavaScript custom file:

We are using a framework using different libraries then we should not change the library files instead of that we should create an another file and then do the customization. For example, in bootstrap, we are using a navbar and it contains its own CSS file navbar-default and we are asked to change in that particular file so for that we’ll create a new custom CSS file.

Bootstrap library  file:

CSS According Framework:

A framework is defined as a package made up of the structure of files and folders of standardized code (HTML, CSS, JS documents etc.) which can be used to support the development of the website, as a basis to start building a site. So as to use framework we should place the library along with proper commenting.

 Representation of Library:

Single Page CSS:

For every page, there should be separate CSS file and it should contain the information about that particular page only. For example, let’s say there are four pages (Home, About Us, Products Contact Us) so for each and every page there should be separate CSS file with proper commenting and relevant names.

Code Re-usability:

Code which shares a very similar or identical structure should be written in such a way that it can be used further. The aim of code reusability is to provide a common structure so that developers don’t have to redo it from scratch and can reuse the code provided. In this way, code reusability allows us to cut out much of the work and save a lot of time.

Code Check:

Before submitting the code it should be reviewed and checked properly maintaining the above guidelines rules. It will help understand the third party user easily without facing any difficulties.

In this post, we discuss HTML and CSS guidelines for absolute beginners. Read here for basics of Material design for bootstrap.

We are web application development and mobile app development experts. Discuss with us about your project: Contact Us Here

Hope you found this post helpful, so don’t forget to share with friends.

Author: Habilelabs