A complete html and css guidelines for beginners

A COMPLETE HTML AND CSS
GUIDELINES FOR BEGINNERS
If you are new at html & css then you
should familiar about these Guidelines
before start. Let’s discuss about 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 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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstr

<link rel="stylesheet" type="text/css" href="m

<link href="https://fonts.googleapis.com/css?f
</head>
<body>
<div id="header">
<div class="header">
<div class="nav"></div>
</div>
</div>

21
22
23
24
25
26
27
28
</body>

<script
src="https://ajax.googleapis.com/ajax/libs/jque

<script
src="https://maxcdn.bootstrapcdn.com/bootstra

<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:
1
2
body {
overflow-x: hidden !important;

3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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
}

25
26
27
28
29
30
31
32
33
34
/* 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 give a redirect a particular button
to some site or at new page or at pressing

the button it’s color should be change. So
for modifying colors & redirecting page to
some link we use classes and for that you
could add a class to each of those button or
the container holding the buttons.
Representation of classes:
1
2
3
4
5
6
7
8
9
10
11
12
13
.bgcolor {
width: 100%;
float: left;
height: 700px;
background-color: #4ca368;
}
div.cities {
background-color: black;
color: white;
margin: 20px 0 20px 0;
padding: 20px;

14 }
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
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:
1
2
3
.navbar-default {
text-decoration: none;
background color: #1A237E;

4
5
6
7
8
9
10
11
}
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstr

<script
src="https://ajax.googleapis.com/ajax/libs/jque

<script
src="https://maxcdn.bootstrapcdn.com/bootstra
<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>

20
21
22
23
24
25
26
27
28
<h3>Column 2</h3>
<p>Ut enim ad..</p>
</div>
<h3>Column 3</h3>
<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.
We are web application
development and mobile app
development experts. Discuss with us
about your project: Contact Us
Hope you found this post helpful, so don’t
forget to share with friends.

A complete html and css guidelines for beginners

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to A complete html and css guidelines for beginners

Similar to A complete html and css guidelines for beginners (20)

Recently uploaded

Recently uploaded (20)

A complete html and css guidelines for beginners