HTML / CSS Refresh

<html>
<head>
<body>
<h1><h2><h3>
<p>
<strong>
<em>
<ol>, <ul>, <li>
						
<html>
<head>
<body>
<h1><h2><h3>
<p>
<strong>
<em>
<ol>, <ul>, <li>]
						
<html>
<head>
... meta info ...
</head>
<body>
... content ...
</body>
</html>
						
<html>
<head>
<body>
<h1><h2><h3>
<p>
<strong>
<em>
<ol>, <ul>, <li>
						
<p>
	Sketchpad (aka Robot Draftsman) was a revolutionary
	computer program written by Ivan Sutherland in 1963
	in the course of his PhD thesis, for which he received
	the Turing Award in 1988, and the Kyoto Prize in 2012.
</p>
						
<html>
<head>
<body>
<h1><h2><h3>
<p>
<strong>
<em>
<ol>, <ul>, <li>
						

Sketchpad (aka Robot Draftsman) was a revolutionary computer program written by Ivan Sutherland in 1963 in the course of his PhD thesis, for which he received the Turing Award in 1988, and the Kyoto Prize in 2012.

<html>
<head>
<body>
<h1><h2><h3>
<p>
<strong>
<em>
<ol>, <ul>, <li>
						
<p>
	Sketchpad (<em>aka Robot Draftsman</em>) was a
	revolutionary computer program written by <strong>Ivan
	Sutherland</strong> in 1963 in the course of his PhD
	thesis, for which he received the Turing Award in 1988,
	and the Kyoto Prize in 2012.
</p>
						
<html>
<head>
<body>
<h1><h2><h3>
<p>
<strong>
<em>
<ol>, <ul>, <li>
						

Sketchpad (aka Robot Draftsman) was a revolutionary computer program written by Ivan Sutherland in 1963 in the course of his PhD thesis, for which he received the Turing Award in 1988, and the Kyoto Prize in 2012.

attributes

<p>this is default color text</p>
				
<p 
attribute name
style="color:red">this is red text</p>
<p style="
attribute value
color:red">this is red text</p>
<p 
attribute name
style="
attribute value
color:red">this is red text</p>

css

<p style="color:red">this is red text</p>
				
in head or a separate doc...
<style>
	p {
		color:red;
	}
</style>

later...
<p>this is red text</p>
				
<style>
    p {
		color:red;
	}
</style>

				
<style>
	p {
		color:red;
	}
</style>

				
<style>
	p {
		color:red;
	}
</style>

				
<p id="myFavoriteParagraph" class="brownText">my favorite text</p>
				
<p 
attribute name
id="
attribute name
myFavoriteParagraph"
attribute name
class="
attribute value
brownText">my favorite text</p>
<style>
    p {
		font-family: Helvetica;
	}
	#myFavoriteParagraph {
		font-weight: bold;
		background: gold;
	}
	.brownText {
		color: brown;
	}
</style>
				

my favorite text

arrangement

layout : floats

<div>
	<h1>
		this comes first
	</h1>
	<img src="images/cat.jpg"
		alt="this will come second" >
	<p>
		this will come third ...
	</p>
	<p>
		this will come last ...
	</p>
</div>
				

this comes first

this will come second

this will come third ... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus volutpat blandit mauris eget posuere. Aliquam arcu quam, maximus cursus dolor a, blandit aliquet ligula.

this will come last ... Duis justo mauris, molestie a tincidunt id, lobortis in arcu. Donec imperdiet at velit aliquet faucibus. Proin quis neque sodales, hendrerit mi id, fringilla diam. Sed interdum sapien vitae tempor interdum.

this comes first

this will come second

this will come third ... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus volutpat blandit mauris eget posuere. Aliquam arcu quam, maximus cursus dolor a, blandit aliquet ligula.

this will come last ... Duis justo mauris, molestie a tincidunt id, lobortis in arcu. Donec imperdiet at velit aliquet faucibus. Proin quis neque sodales, hendrerit mi id, fringilla diam. Sed interdum sapien vitae tempor interdum.

this comes first

this will come second

this will come third ... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus volutpat blandit mauris eget posuere. Aliquam arcu quam, maximus cursus dolor a, blandit aliquet ligula.

this will come last ... Duis justo mauris, molestie a tincidunt id, lobortis in arcu. Donec imperdiet at velit aliquet faucibus. Proin quis neque sodales, hendrerit mi id, fringilla diam. Sed interdum sapien vitae tempor interdum.

<div>
	<h1>
		this comes first
	</h1>
	<img src="images/cat.jpg"
		alt="this will come second"
		style="float:left">
	<p>
		this will come third ...
	</p>
	<p>
		this will come last ...
	</p>
</div>
				
<div>
	<h1>
		this comes first
	</h1>
	<img src="images/cat.jpg"
		alt="this will come second"
		style="float:right">
	<p>
		this will come third ...
	</p>
	<p>
		this will come last ...
	</p>
</div>
				

this comes first

this will come second

this will come third ... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus volutpat blandit mauris eget posuere. Aliquam arcu quam, maximus cursus dolor a, blandit aliquet ligula.

this will come last ... Duis justo mauris, molestie a tincidunt id, lobortis in arcu. Donec imperdiet at velit aliquet faucibus. Proin quis neque sodales, hendrerit mi id, fringilla diam. Sed interdum sapien vitae tempor interdum.

  
<img src="1/cat.jpg" style="float:right">
+ <img src="4/dog.jpg">
				

this comes first

this will come second this will come second

this will come third ... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus volutpat blandit mauris eget posuere. Aliquam arcu quam, maximus cursus dolor a, blandit aliquet ligula.

this will come last ... Duis justo mauris, molestie a tincidunt id, lobortis in arcu. Donec imperdiet at velit aliquet faucibus. Proin quis neque sodales, hendrerit mi id, fringilla diam. Sed interdum sapien vitae tempor interdum.

  
<img src="1/cat.jpg" style="float:right">
+ <img src="4/dog.jpg  style="float:right">
				

this comes first

this will come second this will come second

this will come third ... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus volutpat blandit mauris eget posuere. Aliquam arcu quam, maximus cursus dolor a, blandit aliquet ligula.

this will come last ... Duis justo mauris, molestie a tincidunt id, lobortis in arcu. Donec imperdiet at velit aliquet faucibus. Proin quis neque sodales, hendrerit mi id, fringilla diam. Sed interdum sapien vitae tempor interdum.

  
<img src="1/cat.jpg" style="float:right">
+ <img src="4/dog.jpg  style="float:right;clear:right">
				

this comes first

this will come second this will come second

this will come third ... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus volutpat blandit mauris eget posuere. Aliquam arcu quam, maximus cursus dolor a, blandit aliquet ligula.

this will come last ... Duis justo mauris, molestie a tincidunt id, lobortis in arcu. Donec imperdiet at velit aliquet faucibus. Proin quis neque sodales, hendrerit mi id, fringilla diam. Sed interdum sapien vitae tempor interdum.

<img src="1/cat.jpg" style="float:left">
<img src="4/dog.jpg  style="float:left; clear: right">
				

this comes first

this will come second this will come second

this will come third ... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus volutpat blandit mauris eget posuere. Aliquam arcu quam, maximus cursus dolor a, blandit aliquet ligula.

this will come last ... Duis justo mauris, molestie a tincidunt id, lobortis in arcu. Donec imperdiet at velit aliquet faucibus. Proin quis neque sodales, hendrerit mi id, fringilla diam. Sed interdum sapien vitae tempor interdum.

<img src="1/cat.jpg" style="float:left">
<img src="4/dog.jpg  style="float:left;clear:right">
				

this comes first

this will come second this will come second

this will come third ... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus volutpat blandit mauris eget posuere. Aliquam arcu quam, maximus cursus dolor a, blandit aliquet ligula.

this will come last ... Duis justo mauris, molestie a tincidunt id, lobortis in arcu. Donec imperdiet at velit aliquet faucibus. Proin quis neque sodales, hendrerit mi id, fringilla diam. Sed interdum sapien vitae tempor interdum.

  <img src="1/cat.jpg" style="float:left">
  <img src="4/dog.jpg  style="float:left;clear:left">
				

this comes first

this will come second this will come second

this will come third ... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus volutpat blandit mauris eget posuere. Aliquam arcu quam, maximus cursus dolor a, blandit aliquet ligula.

this will come last ... Duis justo mauris, molestie a tincidunt id, lobortis in arcu. Donec imperdiet at velit aliquet faucibus. Proin quis neque sodales, hendrerit mi id, fringilla diam. Sed interdum sapien vitae tempor interdum.

<div>
	<h1>
		this comes first
	</h1>
	<img src="images/cat.jpg"
		alt="this will come second"
		style="float:left">
	<img src="images/dog.jpg"
		alt="a dog interrupts"
		style="float:left; clear:left">
	<p>
		this will come third ...
	</p>
	<p>
		this will come last ...
	</p>
</div>
				

this comes first

this will come second this will come second

this will come third ... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus volutpat blandit mauris eget posuere. Aliquam arcu quam, maximus cursus dolor a, blandit aliquet ligula.

this will come last ... Duis justo mauris, molestie a tincidunt id, lobortis in arcu. Donec imperdiet at velit aliquet faucibus. Proin quis neque sodales, hendrerit mi id, fringilla diam. Sed interdum sapien vitae tempor interdum.

layout : absolute

<div id="container">
	<div class="top">
		this sticks to the top
	</div>
	<img src="images/cat.jpg"
		alt="this will go to the right"
		class="right">
</div>
				
this sticks to the top
this will go to the right
#container {
	border: 1px solid red;
	position: relative;
}

.top {
	position: absolute;
	top: 0px;
}

.right {
	position: absolute;
	right: 0px;
}
				
this sticks to the top
this will go to the right
<div id="container">
	<div class="top">
		this sticks to the top
	</div>
	<img src="images/cat.jpg"
		alt="this will go to the bottom right"
		class="right bottom">
</div>
				
#container {
	border: 1px solid red;
	position: relative;
}

.top {
	position: absolute;
	top: 0px;
}

.right {
	position: absolute;
	right: 0px;
}

.bottom {
	position: absolute;
	bottom: 0px;
}

				
this sticks to the top
this will go to the bottom right

layout : grid

<div id="myGrid">
	<h1>
		this comes first
	</h1>
	<img src="images/cat.jpg"
		alt="this will come second" >
	<div class="content" >	
		<p>
			this will come third ...
		</p>
		<p>
			this will come last ...
		</p>
	</div>
</div>
				

this comes first

this will come second

this will come third ... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus volutpat blandit mauris eget posuere. Aliquam arcu quam, maximus cursus dolor a, blandit aliquet ligula.

this will come last ... Duis justo mauris, molestie a tincidunt id, lobortis in arcu. Donec imperdiet at velit aliquet faucibus. Proin quis neque sodales, hendrerit mi id, fringilla diam. Sed interdum sapien vitae tempor interdum.

#myGrid {
	display: grid;
}
				
#myGrid {
	display: grid;
	grid-template-columns: 100px 1fr 1fr;
}
				
#myGrid {
	display: grid;
	grid-template-columns: 100px 1fr 1fr;
}
				
100px
the rest
100px
1fr + 1fr = 2fr
100px
1fr
1fr
#myGrid {
	display: grid;
	grid-template-columns: 100px 1fr 1fr;
	grid-template-rows: 50px 1fr;
}
			
50px
1fr
100px
1fr
1fr
#myGrid {
	display: grid;
	grid-template-columns: 100px 1fr 1fr;
	grid-template-rows: 50px 1fr;
	grid-template-areas:
    	".   header ."
    	"cat main   main";
}
				
50px
1fr
100px
1fr
1fr
cat
header
main
main
<div id="myGrid">
	<h1>
		this comes first
	</h1>
	<img src="images/cat.jpg"
		alt="this will come second" >
	<div class="content" >	
		<p>
			this will come third ...
		</p>
		<p>
			this will come last ...
		</p>
	</div>
</div>
				
.content {
	grid-area:main;
}

h1 {
	grid-area:header;
}

img {
	grid-area:cat;
}
				

this comes first

this will come second

this will come third ... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus volutpat blandit mauris eget posuere. Aliquam arcu quam, maximus cursus dolor a, blandit aliquet ligula.

this will come last ... Duis justo mauris, molestie a tincidunt id, lobortis in arcu. Donec imperdiet at velit aliquet faucibus. Proin quis neque sodales, hendrerit mi id, fringilla diam. Sed interdum sapien vitae tempor interdum.

this comes first

this will come second

this will come third ... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus volutpat blandit mauris eget posuere. Aliquam arcu quam, maximus cursus dolor a, blandit aliquet ligula.

this will come last ... Duis justo mauris, molestie a tincidunt id, lobortis in arcu. Donec imperdiet at velit aliquet faucibus. Proin quis neque sodales, hendrerit mi id, fringilla diam. Sed interdum sapien vitae tempor interdum.

this comes first

this will come second

this will come third ... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus volutpat blandit mauris eget posuere. Aliquam arcu quam, maximus cursus dolor a, blandit aliquet ligula.

this will come last ... Duis justo mauris, molestie a tincidunt id, lobortis in arcu. Donec imperdiet at velit aliquet faucibus. Proin quis neque sodales, hendrerit mi id, fringilla diam. Sed interdum sapien vitae tempor interdum.

header
cat
main
50px
1fr
100px
1fr
1fr

this comes first

this will come second

this will come third ... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus volutpat blandit mauris eget posuere. Aliquam arcu quam, maximus cursus dolor a, blandit aliquet ligula.

this will come last ... Duis justo mauris, molestie a tincidunt id, lobortis in arcu. Donec imperdiet at velit aliquet faucibus. Proin quis neque sodales, hendrerit mi id, fringilla diam. Sed interdum sapien vitae tempor interdum.

header
cat
main
#myGrid {
	...
	grid-column-gap: 20px;
	grid-row-gap: 20px;
}
				

this comes first

this will come second

this will come third ... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus volutpat blandit mauris eget posuere. Aliquam arcu quam, maximus cursus dolor a, blandit aliquet ligula.

this will come last ... Duis justo mauris, molestie a tincidunt id, lobortis in arcu. Donec imperdiet at velit aliquet faucibus. Proin quis neque sodales, hendrerit mi id, fringilla diam. Sed interdum sapien vitae tempor interdum.

CSS Shapes