# Strikers HTML and CSS Cheatsheet ## HTML ### Div The div tag or "division" tag is used to create layouts and position elements to then be styled by CSS selectors. ``` <div> <div> Left Child Content </div> <div> Right Child Content </div> </div> ``` ### Header The header creates a full width element that can be utilized for header components. ``` <header> <h1> My Header Title! </h1> </header> ``` ### H Blocks The H elements, or "header" elements allow you to create various different sized header text sizes. ``` <h1> The biggest header </h1> <h2> The second biggest header </h2> ... <h5> The smallest header </h5> ``` ### A Links The A tags are used to create links to other pages within your website. ``` <a href="index.html">Home</a> ``` Creates a link titled `Home` that will direct the user to the page `index.html` when they click on a link. ## CSS ### Selectors CSS selectors work in three ways. ##### Element Just using a name with apply the CSS to all elements that match that name. ``` body { background-color: red } ``` Will set any `<body>` tag to have a red background. ##### ID Using a `#` prefixed name will apply the CSS to any element that has the matching ID attribute. ``` #IDContainer { background-color: blue } ``` Will set any element with the attribute `id="IDContainer"` to have a blue background. Note: IDs should never be duplicated so you should only ever use this on singular elements. For anything else use classes. ##### Class Using a `.` prefixed name will apply the CSS to any element that has the matching class attribute. ``` .BackgroundClass { background-color: yellow } ``` Will set any element with the attribute `class="BackgroundClass"` to have a yellow background. ### Margin Can be used to position an element relevant to other elements. ``` margin: 20px; margin-left: 20px; margin-right: 20px; margin-top: 20px; margin-bottom: 20px; ``` Margins can also be used to automatically position an element within its parent container. ``` margin: auto; ``` ### Border Create a border around an element. ``` border: 1px solid black; border-left: 1px solid black; border-right: 1px solid black; border-bottom: 1px solid black; border-top: 1px solid black; ``` ### Padding Add an internal padding to an element. ``` padding: 10px; padding-left: 10px; padding-right: 10px; padding-bottom: 10px; padding-top: 10px; ``` ### Float Can be used to position two elements side by side within their parent container. Note: This will set the height of the parent container to `0px`. ``` float: left; float: right; ``` ### Box Sizing In some cases when floating with a percentage width adding a border will affect the width. This can be avoided by including the border width in the width calculation. ``` box-sizing: border-box; ``` ### Width Setting a width on an element will fix its width. Note using pixels while easier doesn't allow for automatic resizing as with percentages. You should always use percentages if you can. ``` width: 100px; width: 50%; ``` ### Height Setting a heigh on an element will fix its height. This is normally derived from the content within the container. ``` height: 100px; ``` Note height is a trickier thing to get right with dynamic widths so generally just let the content infer the height. But you can use things such as `vh` (view height) to mimic a height percentage. ``` height: 50vh; ``` ### Text Align Set the alignment of text and some other elements within a container. ``` text-align: center; text-align: right; text-align: left; ``` ### Font Family Set the font to apply to the text within an element. ``` font-family: arial; font-family: sans-serif; ```