65 lines
1.9 KiB
Markdown
65 lines
1.9 KiB
Markdown
---
|
|
title: HTML and CSS Cheat Sheet
|
|
---
|
|
This a page that (hopefully) in time will grow to cover the basic and simple HTML and CSS solutions.
|
|
|
|
Please add to your alternate solutions if you know a different way.
|
|
|
|
## Making a `<hr>` horizontal rule smaller
|
|
```css
|
|
hr {
|
|
width: 75%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
```
|
|
## Giving a `<div>` non scrolling background
|
|
```css
|
|
#divName {
|
|
padding-top: 50px;
|
|
height: 500px;
|
|
color: #fff;
|
|
background-image: url("your_url.jpg");
|
|
background-repeat: no-repeat;
|
|
background-attachment: fixed;
|
|
background-size: 100%;
|
|
}
|
|
```
|
|
Try different values to see the how it affects the div and over in the html
|
|
|
|
```html
|
|
<div id="divName" class="container-fluid">
|
|
```
|
|
|
|
## Vertical alignment (for one line of text)
|
|
|
|
This can be of use in a CSS navigation menu. The key is to make the height of the menu and the line-height of the text the same.
|
|
```css
|
|
.nav li{
|
|
line-height:50px;
|
|
height:50px;
|
|
}
|
|
```
|
|
More neat tricks <a href = "https://www.webdesignerdepot.com/2016/10/20-essential-css-tricks-every-designer-should-know/" target = '_blank' rel='nofollow'>can be found here</a>
|
|
|
|
## Drop Caps
|
|
|
|
A drop caps is a large capital letter letter used at the beginning of a text block.
|
|
```css
|
|
p:first-letter{
|
|
display:block;
|
|
float:left;
|
|
margin:3px;
|
|
color:#f00;
|
|
font-size:300%;
|
|
}
|
|
```
|
|
|
|
## Center a horizontal list
|
|
|
|
<a href='http://csswizardry.com/2011/01/create-a-centred-horizontal-navigation/' target='_blank' rel='nofollow'>http://csswizardry.com/2011/01/create-a-centred-horizontal-navigation/</a>
|
|
|
|
## Sections and Outlines of an HTML Document
|
|
|
|
<a href='https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document' target='_blank' rel='nofollow'>https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document</a>
|