—HTML—
This HTML add to your index.html file.
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<title>Website Name</title>
<meta charset="UTF-8" />
<meta name="title" content="Website Name">
<meta name="description" content="Website description">
<meta name="HandheldFriendly" content="true">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link type="image/x-icon" rel="shortcut icon" href="images/favicon.ico" />
<link type="text/css" rel="stylesheet" href="css/style.css" />
<link type="text/css" rel="stylesheet" href="css/responsive.css" />
<script type="text/javascript" src="js/jquery.min.js" ></script>
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,700i" rel="stylesheet">
</head>
<body>
<!--header -->
<header id="header"></header>
<!--header -->
<div id="wrapper">
<!--section -->
<section id="section1" class=""></section>
<!--section -->
</div>
<!--footer -->
<footer id="footer"></footer>
<!--footer -->
</body>
</html>
this is a basic HTML structure
—CSS—
This CSS add-in style.css file.
/*Default-CSS*/
input::-moz-focus-inner{border:0;outline:none;}
button::-moz-focus-inner{border:0;outline:none;}
select::-moz-focus-inner{border:0;outline:none;}
option::-moz-focus-inner{border:0;outline:none;}
input[type="file"]::-webkit-file-upload-button {
cursor:pointer;
}
input[type="file"]::-moz-file-upload-button {
cursor:pointer;
}
input[type="file"]::-ms-file-upload-button {
cursor:pointer;
}
input[type="file"]::-o-file-upload-button {
cursor:pointer;
}
input[type="file"] {
cursor:pointer;
}
html body{
background-color: #fff;
font-family: 'luzsansbook';
margin:0;
font-size: 16px;
color:#000;
overflow-x: hidden;
line-height: 1.4;
}
*::-moz-selection {
color: #fff;
background:#ccc;
}
*::-webkit-selection {
color: #fff;
background:#ccc;
}
*::-webkit-input-placeholder {
color: #f00;
opacity: 1;
}
*::-moz-placeholder {
color: #f00;
opacity: 1;
}
*:-ms-input-placeholder {
color: #f00;
opacity: 1;
}
*:-moz-placeholder {
color: #f00;
opacity: 1;
}
a, span, div a:hover, div a:active, div a:focus, button {
text-decoration: none;
}
*::after, *::before, * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body ul {
margin:0;
padding:0;
}
body a {
outline: none;
color:#333;
display:inline-block;
vertical-align:top;
}
body a:hover {
color:#ccc;
}
body .clearfix, body .clear {
clear:both;
line-height:100%;
}
body .clearfix{
height:auto;
}
*{
outline:none!important;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.clr:after,
ul:after,
.clearfix:after,
li:after {
clear:both;
display:block;
content:"";
}
div input, div select, div textarea, div button{
font-family: 'luzsansbook';
}
body h1, body h2, body h3, body h4, body h5, body h6{
font-family: 'Conv_Georgia';
line-height:1.2;
color:#000;
font-weight: normal;
margin:0 0 15px;
}
body h1 { font-size: 40px;}
body h2 { font-size: 35px;}
body h3 { font-size: 30px;}
body h4 { font-size: 20px;}
body h5 { font-size: 18px;}
body h6 { font-size: 16px;}
body h1:last-child,
body h2:last-child,
body h3:last-child,
body h4:last-child,
body h5:last-child,
body h6:last-child {
margin-bottom:0;
}
div select {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
div select option {
font-size: 13px;
color:#333;
padding: 2px 5px;
}
body img {
margin: 0 auto;
max-width: 100%;
max-height: 100%;
width: auto;
height:auto;
display:block;
}
body p , body li{
color: #000;
font-family: 'luzsansbook';
font-size:18px;
line-height: 1.5;
margin: 0 0 15px;
padding: 0;
}
body li{
font-size:16px;
}
body p:empty,
body li:empty{
margin:0;
line-height:0;
}
body p:last-child,
body li:last-child{
margin:0;
}
p strong {
font-weight: bold;
}
.a-left{
text-align:left;
}
.a-right{
text-align:right;
}
.a-center{
text-align:center;
}
label em {
color: #ff0000;
display: inline-block;
font-style: normal;
vertical-align: top;
margin-left:5px;
}
.hidden{
display:none!important;
}
.container:after{
content:"";
display:block;
clear:both;
}
body .container{
width:100%;
max-width:1200px;
padding-left:15px;
padding-right:15px;
margin:0 auto;
position:relative;
float:none;
}
body .container .container{
width:100%;
max-width:100%;
padding-left:0;
padding-right:0;
}
/*Default-CSS close*/
This global CSS is very helpful in custom sites.
If you add this global CSS to your style file once, you won’t have to make changes particularly.
I hope you guys found something useful.
