Skip to content

Instantly share code, notes, and snippets.

@RunInUnderpants

RunInUnderpants/index.html

Last active May 23, 2022 21:36
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save RunInUnderpants/81e55ed55d6551e097685c3399998791 to your computer and use it in GitHub Desktop.
Save RunInUnderpants/81e55ed55d6551e097685c3399998791 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="styles.css" type="text/css" rel="stylesheet">
<title>CSS cheat sheet </title>
</head>
<body>
<header>
<nav class="breadCrumb">
<ul>
<li><a href="#toB">B</a></li>
<li><a href="#toC">C</a></li>
<li><a href="#toD">D</a></li>
<li><a href="#toF">F</a></li>
<li><a href="#toH">H</a></li>
<li><a href="#toL">L</a></li>
<li><a href="#toM">M</a></li>
<li><a href="#toO">O</a></li>
<li><a href="#toP">P</a></li>
<li><a href="#toS">S</a></li>
<li><a href="#toT">T</a></li>
<li><a href="#toV">V</a></li>
<li><a href="#toW">W</a></li>
<li><a href="#toZ">Z</a></li>
</ul>
</nav>
<h1>CSS Cheat Sheet</h1>
</header>
<section>
<h2 id="toB">B</a></h2>
<table>
<thead>
<th>CSS PROPARTIES</th>
<th class="borderSides">USAGE</th>
<th>MDN</th>
</thead>
<tbody>
<tr>
<td><span class="proparty">background</span></td>
<td class="borderSides">The <strong>background</strong> shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background">background MDN</a></td>
<tr>
<td><span class="proparty">background-attachment</span></td>
<td class="borderSides">The <strong>background-attachment</strong> CSS property sets whether a background image's position is fixed within the viewport, or scrolls with its containing block.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment">background-attachment MDN</a></td>
</tr>
<tr>
<td><span class="proparty">background-color</span></td>
<td class="borderSides">The <strong>background-color</strong> CSS property sets the background color of an element.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-color">background-color MDN</a></td>
</tr>
<tr>
<td><span class="proparty">background-color</span></td>
<td class="borderSides">The <strong>background-image</strong> CSS property sets one or more background images on an element.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-image">background-image MDN</a></td>
</tr>
<tr>
<td><span class="proparty">background-position</span></td>
<td class="borderSides">The <strong>background-position</strong> CSS property sets the initial position for each background image. The position is relative to the position layer set by background-origin.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-position">background-position MDN</a></td>
</tr>
<tr>
<td><span class="proparty">background-repeat</span></td>
<td class="borderSides">The <strong>background-repeat</strong> CSS property sets how background images are repeated. A background image can be repeated along the horizontal and vertical axes, or not repeated at all.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat">background-repeat MDN</a></td>
</tr>
<tr>
<td><span class="proparty">border</span></td>
<td class="borderSides">The <strong>border</strong> shorthand CSS property sets an element's border. It sets the values of border-width, border-style, and border-color.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border">border MDN</a></td>
</tr>
<tr>
<td><span class="proparty">border-bottom</span></td>
<td class="borderSides">The <strong>border-bottom</strong> shorthand CSS property sets an element's bottom border. It sets the values of border-bottom-width, border-bottom-style and border-bottom-color.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom">border-bottom MDN</a></td>
</tr>
<tr>
<td><span class="proparty">border-bottom-color</span></td>
<td class="borderSides">The <strong>border-bottom-color</strong> CSS property sets the color of an element's bottom border. It can also be set with the shorthand CSS properties border-color or border-bottom.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-color">border-bottom-color MDN</a></td>
</tr>
<tr>
<td><span class="proparty">border-bottom-style</span></td>
<td class="borderSides">The <strong>border-bottom-style</strong> CSS property sets the line style of an element's bottom border.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-style">border-bottom-style MDN</a></td>
</tr>
<tr>
<td><span class="proparty">border-bottom-width</span></td>
<td class="borderSides">The <strong>border-bottom-width</strong> CSS property sets the width of the bottom border of an element.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width">border-bottom-width MDN</a></td>
</tr>
<tr>
<td><span class="proparty">border-color</span></td>
<td class="borderSides">The <strong>border-color</strong> shorthand CSS property sets the color of an element's border.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-color">border-color MDN</a></td>
</tr>
<tr>
<td><span class="proparty">border-left</span></td>
<td class="borderSides">The <strong>border-left</strong> shorthand CSS property sets all the properties of an element's left border.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-left">border-left MDN</a></td>
</tr>
<tr>
<td><span class="proparty">border-left-color</span></td>
<td class="borderSides">The <strong>border-left-color</strong> CSS property sets the color of an element's left border. It can also be set with the shorthand CSS properties border-color or border-left.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-color">border-left-color MDN</a></td>
</tr>
<tr>
<td><span class="proparty">border-left-style</span></td>
<td class="borderSides">The <strong>border-left-style</strong> CSS property sets the line style of an element's left border.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-style">border-left-style MDN</a></td>
</tr>
<tr>
<td><span class="proparty">border-left-width</span></td>
<td class="borderSides">The <strong>border-left-width</strong> CSS property sets the width of the left border of an element.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width">border-left-width MDN</a></td>
</tr>
<tr>
<td><span class="proparty">border-right</span></td>
<td class="borderSides">The <strong>border-right</strong> shorthand CSS property sets all the properties of an element's right border.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-right">border-right MDN</a></td>
</tr>
<tr>
<td><span class="proparty">border-right-color</span></td>
<td class="borderSides">The <strong>border-right-color</strong> CSS property sets the color of an element's right border. It can also be set with the shorthand CSS properties border-color or border-right.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-color">border-right-color MDN</a></td>
</tr>
<tr>
<td><span class="proparty">border-right-style</span></td>
<td class="borderSides">The <strong>border-right-style</strong> CSS property sets the line style of an element's right border.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-style">border-right-style MDN</a></td>
</tr>
<tr>
<td><span class="proparty">border-right-width</span></td>
<td class="borderSides">The <strong>border-right-width</strong> CSS property sets the width of the right border of an element.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width">border-right-width MDN</a></td>
</tr>
<tr>
<td><span class="proparty">border-style</span></td>
<td class="borderSides">The <strong>border-style</strong> shorthand CSS property sets the line style for all four sides of an element's border.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-style">border-style MDN</a></td>
</tr>
<tr>
<td><span class="proparty">border-top</span></td>
<td class="borderSides">The <strong>border-top</strong> shorthand CSS property sets all the properties of an element's top border.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-top">border-top MDN</a></td>
</tr>
<tr>
<td><span class="proparty">border-top-color</span></td>
<td class="borderSides">The <strong>border-top-color</strong> CSS property sets the color of an element's top border. It can also be set with the shorthand CSS properties border-color or border-top.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-color">border-top-color MDN</a></td>
</tr>
<tr>
<td><span class="proparty">border-top-style</span></td>
<td class="borderSides">The <strong>border-top-style</strong> CSS property sets the line style of an element's top border.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-style">border-top-style MDN</a></td>
</tr>
<tr>
<td><span class="proparty">border-top-width</span></td>
<td class="borderSides">The <strong>border-top-width</strong> CSS property sets the width of the top border of an element.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width">border-top-width MDN</a></td>
</tr>
<tr>
<td><span class="proparty">border-width</span></td>
<td class="borderSides">The <strong>border-width</strong> shorthand CSS property sets the width of an element's border.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-width">border-width MDN</a></td>
</tr>
</tbody>
</table>
</section>
<section>
<h2 id="toC">C</h2>
<table>
<thead>
<th>CSS PROPARTIES</th>
<th class="borderSides">USAGE</th>
<th>MDN</th>
</thead>
<tbody>
<tr>
<td><span class="proparty">clear</span></td>
<td class="borderSides">The <strong>clear</strong> CSS property sets whether an element must be moved below (cleared) floating elements that precede it. The clear property applies to floating and non-floating elements.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/clear">clear MDN</a></td>
</tr>
<tr>
<td><span class="proparty">clip</span></td>
<td class="borderSides">The <strong>clip</strong> CSS property defines a visible portion of an element. The clip property applies only to absolutely positioned elements — that is, elements with position:absolute or position:fixed.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/clip">clip MDN</a></td>
</tr>
<tr>
<td><span class="proparty">color</span></td>
<td class="borderSides">The <strong>color</strong> CSS property sets the foreground color value of an element's text and text decorations, and sets the currentcolor value. currentcolor may be used as an indirect value on other properties and is the default for other color properties, such as border-color.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color">color MDN</a></td>
</tr>
<tr>
<td><span class="proparty">cursor</span></td>
<td class="borderSides">The <strong>cursor</strong> CSS property sets the mouse cursor, if any, to show when the mouse pointer is over an element. The cursor setting should inform users of the mouse operations that can be performed at the current location, including: text selection, activating help or context menus, copying content, resizing tables, and so on. You can specify either the type of cursor using a keyword, or load a specific icon to use (with optional fallback images and mandatory keyword as a final fallback).</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/cursor">cursor MDN</a></td>
</tr>
</tbody>
</table>
</section>
<section>
<h2 id="toD">D</h2>
<table>
<thead>
<th>CSS PROPARTIES</th>
<th class="borderSides">USAGE</th>
<th>MDN</th>
</thead>
<tbody>
<tr>
<td><span class="proparty">display</span></td>
<td class="borderSides">The <strong>display</strong> CSS property sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display">display MDN</a></td>
</tr>
</tbody>
</table>
</section>
<section>
<h2 id="toF">F</h2>
<table>
<thead>
<th>CSS PROPARTIES</th>
<th class="borderSides">USAGE</th>
<th>MDN</th>
</thead>
<tbody>
<tr>
<td><span class="proparty">filter</span></td>
<td class="borderSides">The <strong>filter</strong> CSS property applies graphical effects like blur or color shift to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter">filter MDN</a></td>
</tr>
<tr>
<td><span class="proparty">float</span></td>
<td class="borderSides">The <strong>float</strong> CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning).</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/float">float MDN</a></td>
</tr>
<tr>
<td><span class="proparty">font</span></td>
<td class="borderSides">The <strong>font</strong> CSS shorthand property sets all the different properties of an element's font. Alternatively, it sets an element's font to a system font.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font">font MDN</a></td>
</tr>
<tr>
<td><span class="proparty">font-family</span></td>
<td class="borderSides">The <strong>font-family</strong> CSS property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-family">font-family MDN</a></td>
</tr>
<tr>
<td><span class="proparty">font-size</span></td>
<td class="borderSides">The <strong>font-size</strong> CSS property sets the size of the font. Changing the font size also updates the sizes of the font size-relative <length> units, such as em, ex, and so forth.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-size">font-size MDN</a></td>
</tr>
<tr>
<td><span class="proparty">font-variant</span></td>
<td class="borderSides">The <strong>font-variant</strong> CSS shorthand property allows you to set all the font variants for a font.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant">font-variant MDN</a></td>
</tr>
<tr>
<td><span class="proparty">font-weight</span></td>
<td class="borderSides">The <strong>font-weight</strong> CSS property sets the weight (or boldness) of the font. The weights available depend on the font-family that is currently set.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight">font-weight MDN</a></td>
</tr>
</tbody>
</table>
</section>
<section>
<h2 id="toH">H</h2>
<table>
<thead>
<th>CSS PROPARTIES</th>
<th class="borderSides">USAGE</th>
<th>MDN</th>
</thead>
<tbody>
<tr>
<td><span class="proparty">height</span></td>
<td class="borderSides">The <strong>height</strong> CSS property specifies the height of an element. By default, the property defines the height of the content area. If box-sizing is set to border-box, however, it instead determines the height of the border area.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/height">height MDN</a></td>
</tr>
</tbody>
</table>
</section>
<section>
<h2 id="toL">L</h2>
<table>
<thead>
<th>CSS PROPARTIES</th>
<th class="borderSides">USAGE</th>
<th>MDN</th>
</thead>
<tbody>
<tr>
<td><span class="proparty">left</span></td>
<td class="borderSides">The <strong>left</strong> CSS property participates in specifying the horizontal position of a positioned element. It has no effect on non-positioned elements.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/left">left MDN</a></td>
</tr>
<tr>
<td><span class="proparty">letter-spacing</span></td>
<td class="borderSides">The <strong>letter-spacing</strong> CSS property sets the horizontal spacing behavior between text characters. This value is added to the natural spacing between characters while rendering the text. Positive values of letter-spacing causes characters to spread farther apart, while negative values of letter-spacing bring characters closer together.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing">letter-spacing MDN</a></td>
</tr>
<tr>
<td><span class="proparty">line-height</span></td>
<td class="borderSides">The <strong>line-height</strong> CSS property sets the height of a line box. It's commonly used to set the distance between lines of text. On block-level elements, it specifies the minimum height of line boxes within the element. On non-replaced inline elements, it specifies the height that is used to calculate line box height.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/line-height">line-height</a></td>
</tr>
<tr>
<td><span class="proparty">list-style</span></td>
<td class="borderSides">The <strong>list-style</strong> CSS shorthand property allows you to set all the list style properties at once.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/list-style">list-style MDN</a></td>
</tr>
<tr>
<td><span class="proparty">list-style-image</span></td>
<td class="borderSides">The <strong>list-style-image</strong> CSS property sets an image to be used as the list item marker.It is often more convenient to use the shorthand list-style.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-image">list-style-image MDN</a></td>
</tr>
<tr>
<td><span class="proparty">list-style-position</span></td>
<td class="borderSides">The <strong>list-style-position</strong> CSS property sets the position of the ::marker relative to a list item.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position">list-style-position MDN</a></td>
</tr>
<tr>
<td><span class="proparty">list-style-type</span></td>
<td class="borderSides">The <strong>list-style-type</strong> CSS property sets the marker (such as a disc, character, or custom counter style) of a list item element.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type">list-style-type MDN</a></td>
</tr>
</tbody>
</table>
</section>
<section>
<h2 id="toM">M</h2>
<table>
<thead>
<th>CSS PROPARTIES</th>
<th class="borderSides">USAGE</th>
<th>MDN</th>
</thead>
<tbody>
<tr>
<td><span class="proparty">margin</span></td>
<td class="borderSides">The <strong>margin</strong> CSS shorthand property sets the margin area on all four sides of an element.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin">margin MDN</a></td>
</tr>
<tr>
<td><span class="proparty">margin-bottom</span></td>
<td class="borderSides">The <strong>margin-bottom</strong> CSS property sets the margin area on the bottom of an element. A positive value places it farther from its neighbors, while a negative value places it closer.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom">margin-bottom MDN</a></td>
</tr>
<tr>
<td><span class="proparty">margin-left</span></td>
<td class="borderSides">The <strong>margin-left</strong> CSS property sets the margin area on the left side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left">margin-left</a></td>
</tr>
<tr>
<td><span class="proparty">margin-right</span></td>
<td class="borderSides">The <strong>margin-right</strong> CSS property sets the margin area on the right side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right">margin-right MDN</a></td>
</tr>
<tr>
<td><span class="proparty">margin-top</span></td>
<td class="borderSides">The <strong>margin-top</strong> CSS property sets the margin area on the top of an element. A positive value places it farther from its neighbors, while a negative value places it closer.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top">margin-top</a></td>
</tr>
</tbody>
</table>
</section>
<section>
<h2 id="toO">O</h2>
<table>
<thead>
<th>CSS PROPARTIES</th>
<th class="borderSides">USAGE</th>
<th>MDN</th>
</thead>
<tbody>
<tr>
<td><span class="proparty">overflow</span></td>
<td class="borderSides">The <strong>overflow</strong> CSS shorthand property sets the desired behavior for an element's overflow — i.e. when an element's content is too big to fit in its block formatting context — in both directions.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/overflow">overflow MDN</a></td>
</tr>
</tbody>
</table>
</section>
<section>
<h2 id="toP">P</h2>
<table>
<thead>
<th>CSS PROPARTIES</th>
<th class="borderSides">USAGE</th>
<th>MDN</th>
</thead>
<tbody>
<tr>
<td><span class="proparty">padding</span></td>
<td class="borderSides">The <strong>padding</strong> CSS shorthand property sets the padding area on all four sides of an element at once.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding">padding MDN</a></td>
</tr>
<tr>
<td><span class="proparty">padding-bottom</span></td>
<td class="borderSides">The <strong>padding-bottom</strong> CSS property sets the height of the padding area on the bottom of an element.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom">padding-bottom MDN</a></td>
</tr>
<tr>
<td><span class="proparty">padding-left</span></td>
<td class="borderSides">The <strong>padding-left</strong> CSS property sets the width of the padding area to the left of an element.</td>
<td><a href="">padding-left MDN</a></td>
</tr>
<tr>
<td><span class="proparty">padding-right</span></td>
<td class="borderSides">The <strong>padding-right</strong> CSS property sets the width of the padding area on the right of an element.</td>
<td><a href="">padding-right MDN</a></td>
</tr>
<tr>
<td><span class="proparty">padding-top</span></td>
<td class="borderSides">The <strong>padding-top</strong> CSS property sets the height of the padding area on the top of an element.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top">padding-top MDN</a></td>
</tr>
<tr>
<td><span class="proparty">position</span></td>
<td class="borderSides">The <strong>position</strong> CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position">position MDN</a></td>
</tr>
</tbody>
</table>
</section>
<section>
<h2 id="toS">S</h2>
<table>
<thead>
<th>CSS PROPARTIES</th>
<th class="borderSides">USAGE</th>
<th>MDN</th>
</thead>
<tbody>
<tr>
<td><span class="proparty">stroke-dasharray</span></td>
<td class="borderSides">The <strong>stroke-dasharray</strong> attribute is a presentation attribute defining the pattern of dashes and gaps used to paint the outline of the shape.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray">stroke-dasharray MDN</a></td>
</tr>
<tr>
<td><span class="proparty">stroke-dashoffset</span></td>
<td class="borderSides">The <strong>stroke-dashoffset</strong> attribute is a presentation attribute defining an offset on the rendering of the associated dash array.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset">stroke-dashoffset MDN</a></td>
</tr>
</tbody>
</table>
</section>
<section>
<h2 id="toT">T</h2>
<table>
<thead>
<th>CSS PROPARTIES</th>
<th class="borderSides">USAGE</th>
<th>MDN</th>
</thead>
<tbody>
<tr>
<td><span class="proparty">text-align</span></td>
<td class="borderSides">The <strong>text-align</strong> CSS property sets the horizontal alignment of the content inside a block element or table-cell box. This means it works like vertical-align but in the horizontal direction.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-align">text-align MDN</a></td>
</tr>
<tr>
<td><span class="proparty">text-decoration</span></td>
<td class="borderSides">The <strong>text-decoration</strong> shorthand CSS property sets the appearance of decorative lines on text. It is a shorthand for text-decoration-line, text-decoration-color, text-decoration-style, and the newer text-decoration-thickness property.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration">text-decoration MDN</a></td>
</tr>
<tr>
<td><span class="proparty">text-indent</span></td>
<td class="borderSides">The <strong>text-indent</strong> CSS property sets the length of empty space (indentation) that is put before lines of text in a block.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent">text-indent MDN</a></td>
</tr>
<tr>
<td><span class="proparty">text-transform</span></td>
<td class="borderSides">The <strong>text-transform</strong> CSS property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized. It also can help improve legibility for ruby.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform">text-transform MDN</a></td>
</tr>
<tr>
<td><span class="proparty">top</span></td>
<td class="borderSides">The <strong>top</strong> CSS property participates in specifying the vertical position of a positioned element. It has no effect on non-positioned elements.</td>
<td><a href="">top MDN</a></td>
</tr>
</tbody>
</table>
</section>
<section>
<h2 id="toV">V</h2>
<table>
<thead>
<th>CSS PROPARTIES</th>
<th class="borderSides">USAGE</th>
<th>MDN</th>
</thead>
<tbody>
<tr>
<td><span class="proparty">vertical-align</span></td>
<td class="borderSides">The <strong>vertical-align</strong> CSS property sets vertical alignment of an inline, inline-block or table-cell box.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align">vertical-align MDN</a></td>
</tr>
<tr>
<td><span class="proparty">visibility</span></td>
<td class="borderSides">The <strong>visibility</strong> CSS property shows or hides an element without changing the layout of a document. The property can also hide rows or columns in a table.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/visibility">visibility MDN</a></td>
</tr>
</tbody>
</table>
</section>
<section>
<h2 id="toW">W</h2>
<table>
<thead>
<th>CSS PROPARTIES</th>
<th class="borderSides">USAGE</th>
<th>MDN</th>
</thead>
<tbody>
<tr>
<td><span class="proparty">width</span></td>
<td class="borderSides">The <strong>width</strong> CSS property sets an element's width. By default, it sets the width of the content area, but if box-sizing is set to border-box, it sets the width of the border area./td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/width">width MDN</a></td>
</tr>
</tbody>
</table>
</section>
<section>
<h2 id="toZ">Z</h2>
<table>
<thead>
<th>CSS PROPARTIES</th>
<th class="borderSides">USAGE</th>
<th>MDN</th>
</thead>
<tbody>
<tr>
<td><span class="proparty">z-index</span></td>
<td class="borderSides">he <strong>z-index</strong> CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/z-index">z-index MDN</a></td>
</tr>
</tbody>
</table>
</section>
<footer>
<p>Created by <em>Jurijs F.</em></p>
<p>Data From <a href="https://developer.mozilla.org/en-US/" target="_blank">MDN</a></p>
</footer>
</body>
</html>
Raw
styles.css
table {
background-color: rgb(241, 232, 232);
border: 2px solid black;
width: 70%;
position: relative;
margin-left: auto;
margin-right: auto;
}
h1 {
font-size: 4em;
}
th {
border-bottom: 2px solid black;
padding: 1em;
text-align: 0 auto;
font-weight: bolder;
color: rgb(78, 78, 78);
background-color: rgb(250, 202, 139);
}
h2, h1 {
text-align: center;
margin-top: 1.5em;
margin-bottom: .4em;
font-size: 4em;
}
td {
padding: .4em;
font-family: Helvetica;
text-align: center;
}
.borderSides {
border-left: 2px solid black;
border-right: 2px solid black;
width: 80em;
}
.proparty {
font-family: monospace, sans-serif;
background-color: rgb(240, 202, 152);
font-weight: 300;
}
body {
background-color: rgb(186, 209, 224);
}
nav {
height: 5%;
width: 100%;
position: fixed;
background-color: rgb(240, 202, 152);
text-align: center;
padding: auto;
z-index: 1;
top: 0;
}
nav li {
font-weight: bolder;
font-size: 1.2em;
display: inline;
}
footer {
width: 100%;
text-align: center;
background-color: rgb(250, 202, 139);
}
nav li a:hover {
color: gray;
font-size: 1.4em;
}
a {
text-decoration: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment