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. Lets 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 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 
7 <link rel="stylesheet"
8 href="https://maxcdn.bootstrapcdn.com/bootstr
9 
10 <link rel="stylesheet" type="text/css" href="m
11 
12 <link href="https://fonts.googleapis.com/css?f
13
14 </head>
15 <body>
16 <div id="header">
17 <div class="header">
18 <div class="nav"></div>
19 </div>
20 </div>
21
22 </body>
23 
24 <script
25 src="https://ajax.googleapis.com/ajax/libs/jque
26 
27 <script
28 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 body {
2 overflow-x: hidden !important;
3 display: block;
4 font-family: 'Open Sans', sans-serif
5 !important;
6 color: #000;
7
8 }
9
10
11 h1, h2, h3, h4, h5, h6, p, span, a, ul, li {
12 margin: 0px;
13 padding: 0px;
14
15 }
16
17
18 a:hover, a:focus {
19 text-decoration: none;
20 color: #1A237E
21 }
22
23
24
25 /* header section CSS*/
26
27 .header{}
28
29
30
31 /* mid-section CSS*/
32
33 .mid{}
34
/* 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, lets say that
you want give a redirect a particular button
to some site or at new page or at pressing
the button its 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 .bgcolor {
2 width: 100%;
3 float: left;
4 height: 700px;
5 background-color: #4ca368;
6 }
7
8
9 div.cities {
10 background-color: black;
11 color: white;
12 margin: 20px 0 20px 0;
13 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 well create
a new custom CSS file.
Bootstrap library file:
1 .navbar-default {
2 text-decoration: none;
3 background color: #1A237E;
4 }
5
6 Custom file
7
8 .navbar-default {
9 background color: #5aD782;
10 color: #ff00ff;
11 }
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 <link rel="stylesheet"
3 href="https://maxcdn.bootstrapcdn.com/bootstr
4
5 
6 <script
7 src="https://ajax.googleapis.com/ajax/libs/jque
8
9 
10 <script
11 src="https://maxcdn.bootstrapcdn.com/bootstra
12
13 <div class="container">
14 <div class="row">
15 <div class="col-sm-4">
16 <h3>Column 1</h3>
17 <p>Lorem ipsum dolor..</p>
18 <p>Ut enim ad..</p>
19 </div>
24 </div>
</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, lets 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 dont 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 dont

forget to share with friends.

A Complete HTML and Css Guidelines For Beginners

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

A Complete HTML and Css Guidelines For Beginners

Uploaded by

Copyright:

Available Formats

A COMPLETE HTML AND CSS

GUIDELINES FOR BEGINNERS

If you are new at html & css then you

HTML Hypertext Markup Language:

All critical website content should be added

Always add alt attributes to images

Use correct document type Always

Do not add blank lines & indentation

Avoid code lines over 80 characters.

CSS Cascading style sheets:

Presentation of the website content should

Place the opening bracket on the same line

If there are multiple elements on a single

CSS/JavaScript custom file:

We are using a framework using different

Bootstrap library file:

CSS According Framework:

A framework is defined as a package made

1

Single Page CSS:

For every page, there should be separate

Code which shares a very similar or

Before submitting the code it should be

We are web application

Hope you found this post helpful, so dont

You might also like