Cheat Sheet HTML
An HTML element is defined by a start tag, some content, and an end tag: <tagname> Content goes here... </tagname>
HTML Headings HTML Table
HTML headings are titles or subtitles <table >
that you want to display on a webpage. <tr>
Company Contact Country
<h1> Heading 1</h1>
<h2>Heading 2</h2>
Heading 1 <th>Company</th>
<th>Contact</th> Alfreds Futterkiste Maria Anders Germany
<h3>Heading 3</h3> Heading 2 <th>Country</th> Centro comercial Moctezuma Fancisco Chang Mexico
<h4>Heading 4</h4> Heading 3 </tr>
<h5>Heading 5</h5> Heading 4 To understand the example better, we have added borders to the table.
Heading 5 <tr>
<h6>Heading 6</h6> Heading 6
<td>Alfreds Futterkiste</td>
HTML headings are defined with the <h1> to <h6> tags. <td>Maria Anders</td>
<h1> defines the most important heading.
<td>Germany</td>
<h6> defines the least important heading.
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
HTML Most Useful Tags <td>Francisco Chang</td>
<div> is used to group and style block-level elements <td>Mexico</td>
on a webpage. </tr>
<span> is used to style small sections of text within </table>
a larger block of text.
<p> is used to define and style paragraphs of text
on a webpage.
HTML Atributes
HTML List <img src="example.jpg" alt="example">
An unordered HTML list: <a href="https://YourLink.com">Text Here</a>
<ul>
<iframe src="https://YourLink.com" title=”TitleHere”></iiframe>
<li>Coffee</li> Coffee
<li>Tea</li> Tea
<li>Milk</li> Milk title: provide additional information about the element when a user hovers their cursor over it
</ul> alt: used in an image tag(<img>) to provide a text description of the image
An ordered HTML list: href: used in an anchort ag(<a>) to specify the URLof the web page or resource that the links hould direct to.
<ol> src: used to specify the URL of an image, video, audio, or script file that should be embedded in a webpage.
<li>Coffee</li> 1. Coffee NB. tag attributes like 'href', 'src','title' and 'alt'. You can modify the tags and attributes as needed to reflect
<li>Tea</li> 2. Tea your own requirements.
<li>Milk</li> 3. Milk
</ol>
Cheat Sheet CSS
The main difference between inline CSS and external CSS is that inline CSS is CSS Syntaxe (external)
CSS Syntaxe (Inline) processed faster as it only requires the browser to download 1 file while using external
<selector style=’property:value;’></selector> CSS will require downloading HTML and CSS files separately. selector {property:value;}
In summary, CSS inline is used for applying styles directly to individual HTML
<div style=’text-align:center;’></div> elements using the "style" attribute, while CSS inside <style> tags is used for div {text-align:center;}
defining stylest hat apply to multiple elements based on selectors. Css Syntaxe (external): Work with Both
Css Syntaxe (external): Work Only with HTML Vizcreator Flex HTML Vizcreator Flex & HTML Vizcreator Cert
Text Property Box Model Padding And Margin
font-family font used, e.g. Helvetiva. Arial Width
Padding properties are used to generate space around an
font-size text size, e.g. 6Opx. 3em
element's content, inside of any defined borders.
color text color. e.g. #000. #abedef
Margin properties are used to create space around
font-weight how bold the text is, e.g. bold
elements, outside of any defined borders.
font-style what style the text is e.g. italic
text-decoration sets a variety of effects on text, CSS has properties for specifying the padding & Margin for each
e.g.underline, overline, none side of an element:
Height Content
text-align how text is aligned, e.g. center
line-height spacing between lines, e.g. Zem padding-top / padding-right / padding-bottom / padding-left
letter-spacing spacing between letters. e.g. 5px margin-top / marginright / margin-bottom / margin-left
text-indent indent of the first line, e.g. Zem
Padding
text-transform applies formatting to text, e.g. padding-top: 30px;
e.g. upper-case, lowercase, capitalize Border margin-left: 10px;
vertical-align align relative to baseline, e.g. text-top Margin
Position Borders and Dimensions Everything Else
Position place elements on screen,
border sets border style for all borders, in the format opacity property specifies the opacity/transparency
e.g. absolute, fixed, relative
: border: (solid, dashed, dotted, double) of an element.
float stacks elements horizontally in a particular
width) (color). e.g.border: solid Ipx #000
direction, e.g. left object-fit property is used to specify how an <img>
height sets height of an element or <video> should be resized to fit its
top. left, right. specifies the offsets used in absolute. fixed,
bottom and relative positions, e.g. top:lOpxleft:10px max-height sets maximum height of an element container. e.g. object-fit :cover;
min-height sets minimum height of an element
width sets width of an element background colour property sets the background color of
display sets how the elements is placed in the doc an element.
flow. e.g. block, inline, none max-width sets maximum width of an element
min-width sets minimum width of an element
z-index sets the stracking order of elements. background image (for gradient color ) this is the syntaxe
e.g. z-index of I is below z-index of 2 linear-gradient(direction, color-stop1,
overflow sets what happens to content outside of color-stop2, ...);
container, e.g. auto, hidden
