html and css refresh

block and inline elements
				
root elements
						
html is the root element of a html page, it contains the
head and body elements that contain the rest of the
structure of a page.

the head element contains metadata about the page, where
to find scripts and styles, amongst other information.

the body element contains the visible structure of the page.


<html>
	<head>
		styles, scripts, and meta data ...
	</head>
	<body>
		the content of your website ...
	</body>
</html>
						
block elements
						
block elements have a height and width, and cause a
line break above and below

while the following elements default to behaving as blocks,
you can also set any element to behave as a block with a
css style of display:block


examples

– h1, h2, h3, h4, h5, h6
– p

– main, section, article
– form

– div
						
block elements
						
<h1>hello</h1>
<p>
	this is a sentence. since its in a p tag it
	will sit below the above h1 tag
</p>
						
block elements
						

hello

this is a sentence. since its in a p tag it will sit below the above h1 tag

inline elements
						
inline elements don't have a height and width, and
ignore one given by css. futher, they don't line break
above or below

while the following elements default to being inline,
you can also set any element to be inline with a style
of display:inline

examples

– strong, em
– a
– sub, sup
– label

– span
						
inline elements
						
<p>
	inside of this p tag we have an <em>emphasis tag</em>
	as well as a <strong>strong tag</strong> which are inline
</p>
						
inline elements
						

inside of this p tag we have an emphasis tag as well as a strong tag which are inline

<div style="background:blue;padding:20px;width:600px;">
	<h1>
		a section
	</h1>
	<p>
		the h1 and the p tag are both inside of a div tag, so we
		can style them as a group! remember, divs act as blocks
	</p>
</div>

a section

the h1 and the p tag are both inside of a div tag, so we can style them as a group! remember, divs act as blocks

styling'

<p style="color:red">this is red text</p>
				
<p 
attribute name
style="color:red">this is red text</p>
<p 
attribute name
style="
attribute value
color:red">this is red text</p>
in head...
<style>
	p {
		color:red;
	}
</style>

later...
<p>this is red text</p>
				

this is red text

for our CSS typefaces, we'll use the div's and some specific
CSS styles heavily, including but not limited to:

... {
	width: 100px;
	height: 10px;
	background: red;
	transform: rotate(10deg) translate(0, 10px) scale(-1);
	position: [absolute, relative];
	[top, left, bottom, right]: 10px;
}
				
you can also use CSS Variables to make it easier
to keep parts of your typeface consistent. to use
CSS Variables, you define a value for them either
on html or the :root node in your stylesheet , like:

:root {
	--fontHeight: 100px;
	--color: black;
	--negativeColor: white;
	--baseKern: 20px;
	--thinStemWidth: 10px;
	--thickStemWidth: 30px;
}
				
later you can then use those values in place of numbers
in your stylesheet

.crossBar {
	width:50px; 
	height:var(--thinStemWidth);
	background: var(--color);
	transform:rotate(5deg);
}
				
later you can then use those values in place of numbers
in your stylesheet

.crossBar {
	width:50px; 
	height:var(--thinStemWidth);
	background: var(--color);
	transform:rotate(5deg);
}
				
we'll also want to think about how to use CSS classes
to make reusable modules
				
<div class="v letter">
	<div class="thinStem rightLeaning one"></div>
	<div class="thickStem leftLeaning two"></div>
	<div class="vTerminal three"></div>
	<div class="thinStemTerminal four"></div>
	<div class="thickStemTerminal five"></div>
</div>
				
.letter {
	float:left;
	position:relative; 
	padding-right:var(--baseKern); 
	height:calc(var(--fontHeight) + 20px);
}
.letter * {
	position:absolute;
}
.letter {
	float:left;
	position:relative; 
	padding-right:var(--baseKern); 
	height:calc(var(--fontHeight) + 20px);
}
.letter * {
	position:absolute;
}
.thinStem {
	background: var(--color);
	width:var(--thinStemWidth); 
	height: var(--fontHeight);
}

.thickStem {
	background: var(--color);
	width:var(--thickStemWidth); 
	height: var(--fontHeight);
}

.leftLeaning {
	transform:rotate(-10deg) 
}

.rightLeaning {
	transform:rotate(10deg) 
}
				
.vTerminal {
	/*  defines a triangular shape  */
	width: 0; 
	height: 0; 
	border-right: 20px solid transparent;
	border-left: 20px solid transparent; 
	border-bottom:30px solid var(--color); 

	transform: rotate(-5deg)
}

.thickStemTerminal {
	width: 0; 
	height: 0; 
	border-right: 20px solid transparent;
	border-left: 20px solid transparent; 
	border-top:15px solid var(--color); 
}
.thinStemTerminal {
	width: 0; 
	height: 0; 
	border-right: 10px solid transparent;
	border-left: 10px solid transparent; 
	border-top:7px solid var(--color); 
}
.v {
	width:80px;
}
.v .one {
	left:60px;  
}
.v .two {
	left:20px;  
}
.v .three {
	left:20px;
	top: calc(var(--fontHeight) - 28px);  
}
.v .four {
	top:-2px; 
	left:64px;
}
.v .five {
	top:-2px; 
}

shape of css

font drawing example