HTML & CSS

From STEAMwiki
Jump to: navigation, search

HTML Quick Reference

Tag What it looks like
<p>This is a paragraph.</p>

This is a paragraph.

<b>This text is bold.</b> This text is bold.
<strong>This text is strong.</strong> This text is strong.
<i>This text is italic.</i> This text is italic.
<em>This text is emphasized.</em> This text is emphasized.
<u>This text is underlined.</u> This text is underlined.
<h1>h1 is the largest header!</h1>

h1 is the largest header!

<h6>h6 is the smallest header. You can use h2, h3, h4, h5 for sizes in-between.</h6>
h6 is the smallest header. You can use h2, h3, h4, h5 for sizes in-between.

More HTML!

CSS Quick Reference

p {
  color: red;  /* or blue, yellow, green, orange, etc. */
  background-color: #6699ff;  /* #RRGGBB */
  font-family: "Courier New";  /* values with spaces need quotes */
  font-size: 18px;
  border: 1px solid black;  /* thickness type colour; type is, e.g., solid, dashed, etc. */ 
  padding: 4px;  /* padding is inside element; same on all four sides */
  margin: 5px 10px;  /* margin is outside element; vertical is 5px, horizontal is 10px */
}

#id {  /* select by ID */
  display: none;  /* hide an element! */
}

.class {  /* select by class */
  background-color: white;
  transition: all .1s ease-in-out;  /* we can animate things! */
}

.class:hover {  /* :hover means "when the mouse hovers over" */
  background-color: lightgrey;  /* this is applied only when hovering */
}

p.class {  /* you can combine selectors! */
  background-color: lightblue;  /* p.class is more specific than .class! */
}

#my_section .class {  /* selects .class elements inside #my_section */
  background-color: green;  /* #my_section .class is more specific than .class! */
}

.class:first-child {}  /* now we're getting advanced: first child selectors! */
.class:last-child {}  /* you can guess what this does... */
.class:not(:first-child) {}  /* negative selectors! */

More CSS!

Thimble Examples

HTML / CSS Starting Template:

https://thimbleprojects.org/candu/391822/


Scoreboard with HTML sections for layout, and CSS for size and positioning:

https://thimbleprojects.org/dimentians/64210/


Simple Greenhouse Control Panel:

https://thimbleprojects.org/dimentians/118512


Test your strength display screen:

https://thimbleprojects.org/katbarrett/82629/