Useful Stuff About:
Commonly Used CSS Styles
Here are some default CSS Styles you should use for ANY web project:
/*
Here are some commonly used CSS class selectors which
-class rules can applied to multiple elements on a page
-can be applied in any combination
*/
@font-face {/*instructions to browser where to find your custom font*/
font-family: customName1;/*use any name but don't start with a number and don't use spaces or strange characters*/
src: url(../fonts/filename1.ttf);
}
@font-face {/*instructions to browser where to find your custom font*/
font-family: customName2;/*use any name but don't start with a number and don't use spaces or strange characters*/
src: url(../fonts/filename2.ttf);
}
* {
box-sizing:border-box;/*This allows you to set and border width and padding but the div will retain its set width and set height*/
position: relative;
margin: 0px;
padding: 0px;
}
html, body {
width:100%;
min-height:100%;
height:auto;
}
header, nav, section, article, figure, figcaption, aside, footer {/*ensures older browsers display these tags correctly*/
display:block;
/*DON'T ADD anything else in this selector block - only this property should be in this CSS selector set*/
}
body {/*these are the 5 basic CSS properties and values to start a website*/
font-family: Verdana, sans-serif;/*change this for your design*/
font-size:100%;/*DON'T CHANGE THIS VALUE HERE - you can set font sizes in other selector styles*/
color:rgba(0,0,0,1.00);/*main text color, default black, change as needed*/
margin:0px;/*removes default edges*/
padding:0px;/*removes default settings*/
z-index:0;/*stacking order - small numbers a below high numbers*/
}
#centeringDiv, .centeringDiv{
max-width:980px;/*optimum width for both desktops, laptops, and tablets*/
width:100%;/*allows the page to resize it's width to fit smaller devices*/
height: auto;/*optimum height for both desktops, laptops, and tablets*/
margin:0 auto;/*0 = no margin for top and bottom and auto = same margin for left and right*/
z-index:1;/*stacking order - small numbers a below high numbers*/
}
header, .header {
padding:10px;
width:100%;
height:300px;
display:-webkit-flex;/*allows elements in nav to have flexible locations*/
display:flex;/*allows elements in nav to have flexible locations*/
align-items:center;/*vertically centers all elements in header for a single row of elements*/
z-index:920;/*stacking order - small numbers a below high numbers*/
}
nav {
width:100%;/*change as needed*/
height:100px;/*change as needed*/
margin: 0 auto;
z-index:925;/*stacking order, bigger numbers are on top*/
display:-webkit-flex;/*allows elements in nav to have flexible locations*/
display:flex;/*allows elements in nav to have flexible locations*/
justify-content:center;/*horizontally centers all elements in nav*/
align-items:center;/*vertically centers all elements in nav for a single row of elements*/
flex-direction:row;/*places all elements in nav in a row - other option is column*/
flex-wrap:no-wrap;/*ensures that elements in nav do NOT wrap to a 2nd row*/
}
.btn {
z-index:926;/*stacking order, bigger numbers are on top*/
margin:auto;/*IMPORTANT! togther with btn justify-content will space out buttons automatically*/
display:-webkit-flex;/*allows elements in btn to have flexible locations*/
display:flex;/*allows elements in btn to have flexible locations*/
justify-content:center;/*horizontally centers all elements in btn*/
align-items:center;/*vertically centers all elements in btn for a single row of elements*/
flex-direction:row;/*places all elements in btn in a row - other option is column*/
flex-wrap:no-wrap;/*ensures that elements in btn do NOT wrap to a 2nd row*/
}
article {/*used for the main content area*/
clear:both;/*clears away and floating or text wrapping*/
width:100%;
height:auto;
padding:10px;
z-index:900;/*stacking order - below nav and .btn but above section*/
}
section {/*used for the main content area*/
width:100%;
height:auto;
z-index:901;/*stacking order - below nav and .btn and article*/
clear:both;/*clears away and floating or text wrapping*/
}
article p {
text-indent: 0rem;/*an rem is the size of a letter m relative to what's set in the body css rule*/
}
footer {
clear: both;/*clears away and floating or text wrapping*/
text-align: right;
font-size: 0.8rem;
width: 100%;
line-height: 1.2rem;/*This will help to vertically center the text */
height: auto;
z-index: 900;/*stacking order - below article, nav, and .btn*/
}
/*===========Class rules to apply to multiple elements in the HTML===============================*/
figure, figure p, figcaption p {text-indent: 0px; text-align:center;}/*for any captions or paragraphs inside figure tags*/
figure img {width: 100%; height:auto;}/*forces image in figure to fit a specific figure width set with other CSS*/
.clearFloats {clear: both; width:100%; height:0px;}/*apply to div tags - clears away and floating or text wrapping*/
Here are some commonly used CSS class selectors which
-class rules can applied to multiple elements on a page
-can be applied in any combination
*/
@font-face {/*instructions to browser where to find your custom font*/
font-family: customName1;/*use any name but don't start with a number and don't use spaces or strange characters*/
src: url(../fonts/filename1.ttf);
}
@font-face {/*instructions to browser where to find your custom font*/
font-family: customName2;/*use any name but don't start with a number and don't use spaces or strange characters*/
src: url(../fonts/filename2.ttf);
}
* {
box-sizing:border-box;/*This allows you to set and border width and padding but the div will retain its set width and set height*/
position: relative;
margin: 0px;
padding: 0px;
}
html, body {
width:100%;
min-height:100%;
height:auto;
}
header, nav, section, article, figure, figcaption, aside, footer {/*ensures older browsers display these tags correctly*/
display:block;
/*DON'T ADD anything else in this selector block - only this property should be in this CSS selector set*/
}
body {/*these are the 5 basic CSS properties and values to start a website*/
font-family: Verdana, sans-serif;/*change this for your design*/
font-size:100%;/*DON'T CHANGE THIS VALUE HERE - you can set font sizes in other selector styles*/
color:rgba(0,0,0,1.00);/*main text color, default black, change as needed*/
margin:0px;/*removes default edges*/
padding:0px;/*removes default settings*/
z-index:0;/*stacking order - small numbers a below high numbers*/
}
#centeringDiv, .centeringDiv{
max-width:980px;/*optimum width for both desktops, laptops, and tablets*/
width:100%;/*allows the page to resize it's width to fit smaller devices*/
height: auto;/*optimum height for both desktops, laptops, and tablets*/
margin:0 auto;/*0 = no margin for top and bottom and auto = same margin for left and right*/
z-index:1;/*stacking order - small numbers a below high numbers*/
}
header, .header {
padding:10px;
width:100%;
height:300px;
display:-webkit-flex;/*allows elements in nav to have flexible locations*/
display:flex;/*allows elements in nav to have flexible locations*/
align-items:center;/*vertically centers all elements in header for a single row of elements*/
z-index:920;/*stacking order - small numbers a below high numbers*/
}
nav {
width:100%;/*change as needed*/
height:100px;/*change as needed*/
margin: 0 auto;
z-index:925;/*stacking order, bigger numbers are on top*/
display:-webkit-flex;/*allows elements in nav to have flexible locations*/
display:flex;/*allows elements in nav to have flexible locations*/
justify-content:center;/*horizontally centers all elements in nav*/
align-items:center;/*vertically centers all elements in nav for a single row of elements*/
flex-direction:row;/*places all elements in nav in a row - other option is column*/
flex-wrap:no-wrap;/*ensures that elements in nav do NOT wrap to a 2nd row*/
}
.btn {
z-index:926;/*stacking order, bigger numbers are on top*/
margin:auto;/*IMPORTANT! togther with btn justify-content will space out buttons automatically*/
display:-webkit-flex;/*allows elements in btn to have flexible locations*/
display:flex;/*allows elements in btn to have flexible locations*/
justify-content:center;/*horizontally centers all elements in btn*/
align-items:center;/*vertically centers all elements in btn for a single row of elements*/
flex-direction:row;/*places all elements in btn in a row - other option is column*/
flex-wrap:no-wrap;/*ensures that elements in btn do NOT wrap to a 2nd row*/
}
article {/*used for the main content area*/
clear:both;/*clears away and floating or text wrapping*/
width:100%;
height:auto;
padding:10px;
z-index:900;/*stacking order - below nav and .btn but above section*/
}
section {/*used for the main content area*/
width:100%;
height:auto;
z-index:901;/*stacking order - below nav and .btn and article*/
clear:both;/*clears away and floating or text wrapping*/
}
article p {
text-indent: 0rem;/*an rem is the size of a letter m relative to what's set in the body css rule*/
}
footer {
clear: both;/*clears away and floating or text wrapping*/
text-align: right;
font-size: 0.8rem;
width: 100%;
line-height: 1.2rem;/*This will help to vertically center the text */
height: auto;
z-index: 900;/*stacking order - below article, nav, and .btn*/
}
/*===========Class rules to apply to multiple elements in the HTML===============================*/
figure, figure p, figcaption p {text-indent: 0px; text-align:center;}/*for any captions or paragraphs inside figure tags*/
figure img {width: 100%; height:auto;}/*forces image in figure to fit a specific figure width set with other CSS*/
.clearFloats {clear: both; width:100%; height:0px;}/*apply to div tags - clears away and floating or text wrapping*/