ViAdvena
Schrödinger's cat
Okay, this is part cheat sheet, part guide. Those who are familiar with BBCode but aren't used to HTML yet can use this to replicate some effect from the old BBcode to HTML. This is still in progress, so more will be added later.
div.lcontent{
background-color:rgba(29,131,183,0.2);
max-height:600px;
overflow:auto;
padding:15px;
}
div.clr{clear:both;}
div.cleft, div.cright{ width:49%;}
@media (max-width:400px){
div.cleft, div.cright{ width:100%;}
}
}
Horizontal rule
Also known as dividers.
Code:
Basic
<hr>
Thick
<hr style="border:2px solid;">
Dotted
<hr style="border:1px dotted;">
Colored
<hr style="border:1px solid red;">
Result:
Basic
Thick
Dotted
Colored
Div
In a nutshell, <div> is a box that can be styled to your heart content. The following are properties that can be be used for styling the box.
Border
Code:
<div style="border:5px solid black;">
This is a bordered div
</div>
Result:
This is a bordered div
The format is border: width style color
Width is in pixels. Color can be in text, hex code (example: #000000), or rgb code (example: rgb(0,0,0) ).
Style options: solid, double, inset, outset, ridge, groove
Border radius
A properties to give div rounded corners
Code:
<div style="border:5px solid black;
border-radius:15px;">
This is a div with rounded corners
</div>
<div style="border:5px solid black;
border-radius:15px 0px 15px 0px;">
This is a div with some rounded corners
</div>
Result:
This is a div with rounded corners
This is a div with some rounded corners
The format is border-radius: value for all corner
Or border-radius: top left-value top right-value bottom right-value bottom left-value for each corner.
Value can be in pixels or percent (example: border-radius:20%
.
Width & Height
Code:
<div style="border:1px solid black;
width:200px;
height:100px;">
This is a div with fixed width and height
</div>
Result:
This is a div with fixed width and height
The width and height can be in pixels or in percent (example: width:80%.
Background color
Code:
<div style="background-color:magenta;">
This is a div with colored background
</div>
Result:
This is a div with colored background
The format is background-color: color
Color can be in text, hex code (example: #000000), or rgb code (example: rgb(0,0,0) ).
Background image
Code:
<div style="background-image:url('https://www.rpnation.com/uploads/monthly_2016_08/rpncrest17.png.58fe3b813c84826b06de1077bd1919bd.png');
width:300px;
height:100px;">
This is a div with image background
</div>
Result:
This is a div with image background
The format is background-image: url('image link')
Float
Code:
<div style="background-color:magenta;
width:150px; height:100px;
float:left;">
This is a floated div
</div>
<div style="background-color:cyan;
width:150px; height:100px;
float:right;">
This is a floated div
</div>
Result:
This is a floated div
This is a floated div
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ultrices consectetur euismod. Suspendisse commodo odio eget eleifend maximus. Sed rutrum laoreet massa, in varius erat accumsan ac. Pellentesque enim leo, fermentum eget nulla a, viverra accumsan magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla auctor nisl arcu, nec vestibulum arcu lobortis vel. Proin vel tincidunt augue.
The format is float: alignment
Alignment options: left, right, none.
Margin
A properties to give distance between div and other element.
Code:
<div style="background-color:magenta;
width:150px; height:100px;float:left;
margin:20px;">
This is a floated div with margin
</div>
<div style="background-color:cyan;
width:150px; height:100px;
margin:auto;">
This is a centered div
</div>
Result:
This is a floated div with margin
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ultrices consectetur euismod. Suspendisse commodo odio eget eleifend maximus. Sed rutrum laoreet massa, in varius erat accumsan ac. Pellentesque enim leo, fermentum eget nulla a, viverra accumsan magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla auctor nisl arcu, nec vestibulum arcu lobortis vel. Sed euismod imperdiet quam. Sed sit amet cursus metus. Duis eu ultricies elit. Suspendisse potenti. Curabitur quis posuere elit, et sagittis nunc.
This is a centered div
The format is margin:value
or margin:top-value right-value bottom-value left-value for each side.
margin:auto is used to center the box. Beside that, the value is in pixels.
Padding
A properties to give distance between border of the div and the content inside it.
Code:
<div style="border:1px solid;">
This text is too edgy
</div>
<div style="border:1px solid;
padding:15px;">
This text is not so edgy anymore.
</div>
Result:
This text is too edgy
This text is not so edgy anymore.
The format is padding:value
or padding:top-value right-value bottom-value left-value for each side.
Scrollbars
We can add scrollbars to div by adjusting overflow properties.
Code:
<div style="border:1px solid;
width:100%; height:70px; padding:15px;
overflow:auto;">
This div has scrollbar, but the text is too short to show it
</div>
<div style="border:1px solid;
width:100%; height:70px; padding:15px;
overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ultrices consectetur euismod. Suspendisse commodo odio eget eleifend maximus. Sed rutrum laoreet massa, in varius erat accumsan ac. Pellentesque enim leo, fermentum eget nulla a, viverra accumsan magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla auctor nisl arcu, nec vestibulum arcu lobortis vel. Proin vel tincidunt augue.
</div>
Result:
This div has scrollbar, but the text is too short to show it
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ultrices consectetur euismod. Suspendisse commodo odio eget eleifend maximus. Sed rutrum laoreet massa, in varius erat accumsan ac. Pellentesque enim leo, fermentum eget nulla a, viverra accumsan magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla auctor nisl arcu, nec vestibulum arcu lobortis vel. Proin vel tincidunt augue.
The format is overflow:value
Value options: scroll (to give div scrollbar), auto (to give div scrollbar only if the content exceed div's height/width), visible (no scrollbar, to let the content exceed div's height), or hidden (no scrollbar, to clip the part of the content that exceed div's height).
View full tutorial
div.lcontent{
background-color:rgba(29,131,183,0.2);
max-height:600px;
overflow:auto;
padding:15px;
}
div.clr{clear:both;}
div.cleft, div.cright{ width:49%;}
@media (max-width:400px){
div.cleft, div.cright{ width:100%;}
}
}
Horizontal rule
Also known as dividers.
Code:
Basic
<hr>
Thick
<hr style="border:2px solid;">
Dotted
<hr style="border:1px dotted;">
Colored
<hr style="border:1px solid red;">
Result:
Basic
Thick
Dotted
Colored
Div
In a nutshell, <div> is a box that can be styled to your heart content. The following are properties that can be be used for styling the box.
Border
Code:
<div style="border:5px solid black;">
This is a bordered div
</div>
Result:
This is a bordered div
The format is border: width style color
Width is in pixels. Color can be in text, hex code (example: #000000), or rgb code (example: rgb(0,0,0) ).
Style options: solid, double, inset, outset, ridge, groove
Border radius
A properties to give div rounded corners
Code:
<div style="border:5px solid black;
border-radius:15px;">
This is a div with rounded corners
</div>
<div style="border:5px solid black;
border-radius:15px 0px 15px 0px;">
This is a div with some rounded corners
</div>
Result:
This is a div with rounded corners
This is a div with some rounded corners
The format is border-radius: value for all corner
Or border-radius: top left-value top right-value bottom right-value bottom left-value for each corner.
Value can be in pixels or percent (example: border-radius:20%
.Width & Height
Code:
<div style="border:1px solid black;
width:200px;
height:100px;">
This is a div with fixed width and height
</div>
Result:
This is a div with fixed width and height
The width and height can be in pixels or in percent (example: width:80%
.Background color
Code:
<div style="background-color:magenta;">
This is a div with colored background
</div>
Result:
This is a div with colored background
The format is background-color: color
Color can be in text, hex code (example: #000000), or rgb code (example: rgb(0,0,0) ).
Background image
Code:
<div style="background-image:url('https://www.rpnation.com/uploads/monthly_2016_08/rpncrest17.png.58fe3b813c84826b06de1077bd1919bd.png');
width:300px;
height:100px;">
This is a div with image background
</div>
Result:
This is a div with image background
The format is background-image: url('image link')
Float
Code:
<div style="background-color:magenta;
width:150px; height:100px;
float:left;">
This is a floated div
</div>
<div style="background-color:cyan;
width:150px; height:100px;
float:right;">
This is a floated div
</div>
Result:
This is a floated div
This is a floated div
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ultrices consectetur euismod. Suspendisse commodo odio eget eleifend maximus. Sed rutrum laoreet massa, in varius erat accumsan ac. Pellentesque enim leo, fermentum eget nulla a, viverra accumsan magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla auctor nisl arcu, nec vestibulum arcu lobortis vel. Proin vel tincidunt augue.
The format is float: alignment
Alignment options: left, right, none.
Margin
A properties to give distance between div and other element.
Code:
<div style="background-color:magenta;
width:150px; height:100px;float:left;
margin:20px;">
This is a floated div with margin
</div>
<div style="background-color:cyan;
width:150px; height:100px;
margin:auto;">
This is a centered div
</div>
Result:
This is a floated div with margin
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ultrices consectetur euismod. Suspendisse commodo odio eget eleifend maximus. Sed rutrum laoreet massa, in varius erat accumsan ac. Pellentesque enim leo, fermentum eget nulla a, viverra accumsan magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla auctor nisl arcu, nec vestibulum arcu lobortis vel. Sed euismod imperdiet quam. Sed sit amet cursus metus. Duis eu ultricies elit. Suspendisse potenti. Curabitur quis posuere elit, et sagittis nunc.
This is a centered div
The format is margin:value
or margin:top-value right-value bottom-value left-value for each side.
margin:auto is used to center the box. Beside that, the value is in pixels.
Padding
A properties to give distance between border of the div and the content inside it.
Code:
<div style="border:1px solid;">
This text is too edgy
</div>
<div style="border:1px solid;
padding:15px;">
This text is not so edgy anymore.
</div>
Result:
This text is too edgy
This text is not so edgy anymore.
The format is padding:value
or padding:top-value right-value bottom-value left-value for each side.
Scrollbars
We can add scrollbars to div by adjusting overflow properties.
Code:
<div style="border:1px solid;
width:100%; height:70px; padding:15px;
overflow:auto;">
This div has scrollbar, but the text is too short to show it
</div>
<div style="border:1px solid;
width:100%; height:70px; padding:15px;
overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ultrices consectetur euismod. Suspendisse commodo odio eget eleifend maximus. Sed rutrum laoreet massa, in varius erat accumsan ac. Pellentesque enim leo, fermentum eget nulla a, viverra accumsan magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla auctor nisl arcu, nec vestibulum arcu lobortis vel. Proin vel tincidunt augue.
</div>
Result:
This div has scrollbar, but the text is too short to show it
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ultrices consectetur euismod. Suspendisse commodo odio eget eleifend maximus. Sed rutrum laoreet massa, in varius erat accumsan ac. Pellentesque enim leo, fermentum eget nulla a, viverra accumsan magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla auctor nisl arcu, nec vestibulum arcu lobortis vel. Proin vel tincidunt augue.
The format is overflow:value
Value options: scroll (to give div scrollbar), auto (to give div scrollbar only if the content exceed div's height/width), visible (no scrollbar, to let the content exceed div's height), or hidden (no scrollbar, to clip the part of the content that exceed div's height).
View full tutorial
