CSS

Link Styles

<link rel="stylesheet" type="text/css" href="/styles_Scripts/fontfix.css">

Embed Styles into a page

<style>
p { font-family: verdana; font-size: 20px; }
</style>

embedding styles inside html

<p style="color:blue; font-size:90%;font-weight: bold; text-align: right; vertical-align: middle;">This makes a blue small font<\p>

Hide an element

<p style="display: none;">Hide this area</p>

vertical-align: top;

<td style="vertical-align: top;">Align Top<\td>

Max width

<td style="max-width: 150px;">Align Top<\td>
<img src="images.jpg" alt="Alt text" height="400px" style="width: 100%; max-width: 600px; object-fit: contain;" \>

Hightlight text color in paragraph

Hightlight <span style="background: #ffb7b7;">text color</span> in paragraph

Table center on page

<table style="margin-left: auto; margin-right: auto;">

Bring an image to the front of the page

z-index:-1;
controls how images or divs stack over each other
higher z-index value takes front place and lower would stay behind

Indent Unordered List

<ul style="margin-left:10px">;

• list 1
• list 2
• list 3

Not indented

• list 1
• list 2
• list 3

Input box

<input type="text" value="4" width="2" id="return_number" style="background-color: #000000; color: #007acc; font-size: 20px; border-color:#FFFFFF; border-width: 1px; outline: none; width: 300px; height: 30px;>

Differenct Screen sizes and media

Example used in read write section of webiste.

Put your code for the specific screen size into between the media code

@media screen and (max-width: 920px) {
.container { width: 99%; }
}

@media screen and (max-width: 420px) {
.container { width: 90%; }

}

HTML CSS menu bar

Navigation Example

drop down menu

tab nav bar

side menu, tree format

Including the padding and margin in the max height and width

use
box-sizing: border-box;

selecting nth-child

link to reference

my example

div 100% height

If you will try the set the height of a div container to 100% using the style rule height: 100%; it doesn't work, because the percentage (%) is a relative unit so the resulting height depends on the height of parent element's height.

<style>
html, body {
height: 100%;
margin: 0px;
}
.container {
height: 100%;
background: #f0e68c;
}
<style>

<div class="container">The height of this DIV element is equal to the 100% height of its parent element's height.</div>

CSS grid make the height of the div match the content

Use
align-self: start;
or
height: fit-content;

Topic

Body Text