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:

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <!-- website templates CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- custom CSS --> <link rel="stylesheet" type="text/css" href="mystyle.css"> <!-- website templates fonts --> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> </head> <body> <div id="header"> <div class="header"> <div class="nav"></div> </div> </div> </body> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- website template JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- custom date picker JavaScript --> <script src="/js/myScript1.js"></script> </html> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 < ! DOCTYPE html > < html > < head lang = "en" > < meta charset = "UTF-8" > < title > < / title > < ! -- website templates CSS -- > < link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" > < ! -- custom CSS -- > < link rel = "stylesheet" type = "text/css" href = "mystyle.css" > < ! -- website templates fonts -- > < link href = "https://fonts.googleapis.com/css?family=Roboto" rel = "stylesheet" > < / head > < body > < div id = "header" > < div class = "header" > < div class = "nav" > < / div > < / div > < / div > < / body > < ! -- jQuery library -- > <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" > </script> < ! -- website template JavaScript -- > <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" > </script> < ! -- custom date picker JavaScript -- > <script src = "/js/myScript1.js" > </script> < / 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:

body { overflow-x: hidden !important; display: block; font-family: 'Open Sans', sans-serif !important; color: #000; } h1, h2, h3, h4, h5, h6, p, span, a, ul, li { margin: 0px; padding: 0px; } a:hover, a:focus { text-decoration: none; color: #1A237E } /* header section CSS*/ .header{} /* mid-section CSS*/ .mid{} /* footer section CSS*/ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 body { overflow - x : hidden ! important ; display : block ; font - family : 'Open Sans' , sans - serif ! important ; color : #000; } h1 , h2 , h3 , h4 , h5 , h6 , p , span , a , ul , li { margin : 0px ; padding : 0px ; } a : hover , a : focus { text - decoration : none ; color : #1A237E } /* header section CSS*/ . header { } /* mid-section CSS*/ . mid { } /* footer section CSS*/

Class:

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:

.bgcolor { width: 100%; float: left; height: 700px; background-color: #4ca368; } div.cities { background-color: black; color: white; margin: 20px 0 20px 0; padding: 20px; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 . bgcolor { width : 100 % ; float : left ; height : 700px ; background - color : #4ca368; } div . cities { background - color : black ; color : white ; margin : 20px 0 20px 0 ; padding : 20px ; }

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:

.navbar-default { text-decoration: none; background color: #1A237E; } Custom file .navbar-default { background color: #5aD782; color: #ff00ff; } 1 2 3 4 5 6 7 8 9 10 11 . navbar - default { text - decoration : none ; background color : #1A237E; } Custom file . navbar - default { background color : #5aD782; color : #ff00ff; }

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:

<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="container"> <div class="row"> <div class="col-sm-4"> <h3>Column 1</h3> <p>Lorem ipsum dolor..</p> <p>Ut enim ad..</p> </div> <div class="col-sm-4"> <h3>Column 2</h3> <p>Lorem ipsum dolor..</p> <p>Ut enim ad..</p> </div> <div class="col-sm-4"> <h3>Column 3</h3> <p>Lorem ipsum dolor..</p> <p>Ut enim ad..</p> </div> </div> </div> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 < ! -- Latest compiled and minified CSS -- > < link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" > < ! -- jQuery library -- > <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" > </script> < ! -- Latest compiled JavaScript -- > <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" > </script> < div class = "container" > < div class = "row" > < div class = "col-sm-4" > < h3 > Column 1 < / h3 > < p > Lorem ipsum dolor . . < / p > < p > Ut enim ad . . < / p > < / div > < div class = "col-sm-4" > < h3 > Column 2 < / h3 > < p > Lorem ipsum dolor . . < / p > < p > Ut enim ad . . < / p > < / div > < div class = "col-sm-4" > < h3 > Column 3 < / h3 > < p > Lorem ipsum dolor . . < / p > < p > Ut enim ad . . < / p > < / div > < / div > < / div >

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.