Cheatsheet for Banana

How to Begin

Command Line

HTML

CSS

Content Sizing

Text Styling

Color

Table

Font

Link Style

Box Shadow

Breadcrumb

This is a cheatsheet created by Anna for Anna Banana.
This cheatsheet was created as a practice website,
as well as to keep a note on all Anna Banana knowledge of CSS on a website.
In a way this is a notebook or Anna Banana.

Let there be light

Starting off a HTML document:

[!DOCTYPE html]
[html]
[head]

[!--add title here like this: --]
[title] Banana Cheatsheet [/title]

[!--link to css stylesheet like this: --]
[link href="styles.css" rel="stylesheet"]

[!--embed google font here, like this: --]
[link rel="preconnect" href="https://fonts.googleapis.com"]
[!--learn more at Font --]

[/head]

[body]

where header, body, footer and various attributes goes here
more about this at HTML

[/body]
[/html]

*replace [ and ] with < and >

Command line

Command line is a text interface for the computer's operating system. To access the command line, we use the terminal.

element explanation
$ ls (LS) the terminal would display our current directory’s files and directories
$ pwd Print working directory - show where you are in the file system
$ cd Change directory
$ cd .. the argument . . stands for the directory above the current working directory.
$ cd ../.. move the directory 2 path above
$ cd ../2014 move to above, then to folder 2014
$ mkdir media make directory / create new directory named media inside working directory
$ touch keyboard.txt creates new file (in this case keyboard.txt) inside working directory

Other HTML elements

HTML can also contain the following

element explanation variations
Ordered list list appeared with 123 [ol]
[li]content1[/li]
[li]content2[/li]
[/ol]
Unordered list list appeared with a dot [ul]
[li]content1[/li]
[li]content2[/li]
[/ul]
Image attach image. It has no close tag [img src="link]
Video attach image. It has a close tag, in which have to add description in case video doesn't load [video src="link"] add description [/video]
Include control for video [video src="link" controls] add description [/video]
Audio Insert audio on website [audio control]
[source src="link to audio.mp3" type="audio/mp3"]
[/audio]
Figure Caption Insert figure caption [figure]
[img src="link.jpg"]
[figcaption] Insert Caption [/figcaption]
[/figure]
Embed Embed gif into paragraph or any element [embed src="down.oad.gif"/]
Link to link to new page, add the target [a href="link" target"_blank"] words that will be transformed into link[/a]
to link to same page [a href="link"] words that will be transformed into link[/a]
to add an anchor to same page: use id selector [p id="top"]This is the top[/p]
[a href="#top"] This link will bring you to the top[/a]
Comment item in comment will not be displayed on the website [!--insert your comment here--]
Other elements can be written as:
HTML style
or		 [header]
[nav]
[body]
[footer]
[section]
[article]
[aside]
[h1] all the way to [h6]
[p]
all of which need closing tag
DIV style [div class="header"]
[div class="nav"]
[div class="body"]
[div class="footer"]
[div class="section"]
[div class="article"]
[div class="aside"]
[div class="h1"] all the way to [div class="h6"]
[div class="p"]
all of which need closing tag of [/div]

*replace [ and ] with < and > when applicable

Styling on CSS

Basic CSS

Basic CSS elements

element explanation variations
Class can have multiple ID - can only be used once HTML
[h1 class="title"] THIS IS THE TITLE [/h1]

CSS
.title {
color: teal;
}
ID can only be used once, most prominent selector HTML
[h1 id="article-title"] THIS IS THE TITLE [/h1]

CSS
#article-title {
color: yellow;
}
Multiple Selector Instead of writing same instructions multiple times, can be shortened. h2,
.menu {
font-family: Tahoma;
}

example above will select h2 element and menu class to have the same font
Chaining CSS style will be for elements within class specifications h2.destination {
font-family: Tahoma;
}

example above will select h2 element within the class of destination to have font of Tahoma
Descendant combinator almost similar to chaining. Chaining is more specific while Descendant combinator combines two selectors to select elements that have ancestor element that matches the first selector HTML

[div class="destination"]
[h1]THIS IS THE TITLE [/h1]
[p]This is paragraph[/p]
[/div]

CSS

.destination h1 {
color: yellow;
}
this will select h1 element under class destination
Pseudo Class A pseudo-class can be attached to any selector. It is always written as a colon : followed by a name. For example p:hover.
Value:
  • :focus,
  • :visited,
  • :disabled,
  • :active
More on this on Link Styling 		p:hover {
background-color: lime;
}

*replace [ and ] with < and > when applicable

Content sizing

Content can be arranged with the following elements on CSS

element explanation variations
Width and Height width and height of the content width: 100%;
height: 10px;
Margin gaps between border and other elements. Shortcut:
  • 4 values: top right bottom left
  • 3 values: top left&right bottom
  • 2 values: top&bottom left&right
  • 1 values: top&right&left&bottom
margin: 0 auto means it horizontally centers an element inside of its parent content are if it has a width. 		margin-top/margin-right/margin-bottom/margin-left
margin: 6px, 7px, 8px, 9px;
margin: 7px, 8px, 9px;
margin: 8px, 9px;
margin: 9px;
Border between margin and padding border: 3px solid red;
border-radius: 5px;
Padding between content and border. Shortcut:
  • 4 values: top right bottom left
  • 3 values: top left&right bottom
  • 2 values: top&bottom left&right
  • 1 values: top&right&left&bottom
 padding-top/padding-right/padding-bottom/padding-left
padding: 6px, 7px, 8px, 9px;
padding: 7px, 8px, 9px;
padding: 8px, 9px;
padding: 9px;
Min and Max min and max width / height of a content. min-width / min-height / max-width / max-height
Overflow what will happen if the content spills / overflow. Values:
hidden - when set to this value, any content that overflows will be hidden from view.
scroll - when set to this value, a scrollbar will be added to the element box.
visible - when set to this value, the overflow content will be displayed outside of the containing element. This is the default.		 overflow: scroll;
Visibility Elements can be hidden from view with the visibility property. Values:
hidden - hides an element
visible - displays an element
collapse - collapse an element		 visibility: hidden;
Position static: the default position. It doesn't need to be specified. position: static;
relative: in relative to static position of the web page. Can move top bottom left right .question {
position: relative;
top: 40px;
}
absolute: all the other element will ignore the element and act like its not present on the page. .question {
position: absolute;
}
fixed: fix the element to a specific position on the page regardless of user scrolling/ .question {
position: fixed;
top: 0px;
left: 0px;
}
sticky: keeps an element in the document flow as the user scrolls, but sticks to a specific position as the page is scrolled further .question {
position: sticky;
top: 240px;
}
Z-index controls how far back or forward an element should appear on the web page when elements overlap. .question {
position: relative;
z-index: 1;
}
Display Inline - styled inside HTML beside the line where they want to style. Does not need to start new line, cannot style height and width HTML
[div style="color: yellow]
[strong] [em] [a]
Block - styled inside css stylesheet. Starts new line, can style height and width normal css stylesheet
inline-block - elements can appear next to each other and we can specify their dimensions using the width and height. HTML
[div class="rectangle"]
[p]I am a rectangle![/p]
[/div]
[div class="rectangle"]
[p]I am a rectangle![/p]
[/div]
[div class="rectangle"]
[p]I am a rectangle![/p]
[/div]

CSS
.rectangle {
display: inline-block;
width: 200px;
height: 300px;
}
Float Commonly used for wrapping text around an image. Moving elements left or right for layout purposes is better suited for tools like CSS grid and flexbox. Values:
  • left - moves or floats elements as far left as possible
  • right - moves or floats elements as far right as possible
 float: left;
Clear Specifies how elements should behave when they bump into each other on the page. Values:
  • left - the left side of ht element will not touch any other element within the same containing element
  • right - the right side of the element will not touch any other element within the same contianing element
  • both - neither side of the element will touch any other element within the same containing element
  • none - the element can touch either side
 clear: left;

*replace [ and ] with < and > when applicable

Tips and Tricks

how to make header stay on top

width: 100%;
position: fixed;
top: 0;
left: 0;
padding: 20px;
text-align: center;

to make footer stay on bottom

width: 100%;
position: fixed;
bottom: 0;
left: 0;

Text styling

Text can be styled the following way

element explanation variations
font-family property defines the typeface of an element.
5 types of web safe font family:
  • Serif EG: Times New Roman, Georgia, Garamond
  • Sans-serif EG: Arial, Verdana, Helvetica
  • Monospace EG: Courier New, Lucida Console, Monaco
  • Cursive: Brush Script MT, Lucida Handwriting
  • Fantasy: Copperplate, Papyrus
Other ways to insert font: google font and downloaded font 		font-family: Monospace;
font-size Controls the size of text displayed.
Can be set based on Absolute size or Relative size. EG:
  • Absolute size: 40px,
  • Relative size: 1.2em,
font-size: 40px;
font-size: 1.2em;
font-weight defines how thin or thick text is displayed
  • lighter,
  • normal,
  • bold,
  • bolder,
  • 100-900, where 400 is normal, 700 is bold,
  • initial: set this property to its default value,
  • inherit: set this property to its parent element,
font-weight: 700;
font-weight: bold;
font-style define text style
  • normal - text shown normally
  • italic - text shown italic
  • oblique - text is leaning
font-style: italic;
text-align aligning the text to its container left, center, right, justify
background image setting background of an element to an image background-image: url('link');
Text transform Transform whole text to uppercase text-transform: uppercase;
Letter spacing Spacing between letters letter-spacing: 2px;
Word spacing Spacing between words word-spacing: 2px;
Line height Height between line. Value is in relative to font size line-height: 1.4;
Text decoration To change text to underline text-decoration: underline;

Colors

element explanation variations
Color / Background-color color refers to text colour while background-color refers to background colour.
3 ways to write colours:
  • name colour
  • hex code
  • rgb
Can get more colours and code from here		 color: darkseagreen
color: #8FBC8F
background-color: rgb(143,188,143)
Opacity setting the transparency of an element opacity: 50%;
Hue Saturation Light Hue is the first number. It refers to an angle on a color wheel. Red is 0 degrees, Green is 120 degrees, Blue is 240 degrees, and then back to Red at 360.

Saturation refers to the intensity or puritycolorhe color. The saturation increases towards 100% as the color becomes richer. The saturation decreases towards 0% as the color becomes grayer.

Lightness refers to how light or dark the color is. Halfway, or 50%, is normal lightness. Imagine a sliding dimmer on a light switch that starts halfway. Sliding the dimmer up towards 100% makes the color lighter, closer to white. Sliding the dimmer down towards 0% makes the color darker, closer to black.		 color: hsl(120, 60%, 70%);
Opacity and Alpha To use opacity in the HSL color scheme, use hsla instead of hsl, and four values instead of three. Alpha (a) can be attached to HSL or RGB. Its in decimal, whereby 0.5 is half transparent. color: hsla(34, 100%, 50%, 0.1);
OR
color: rgba(234, 45, 98, 0.33);
A little unconventional, but still worth mentioning is how hex colors can also have an alpha value. By adding a two-digit hexadecimal value to the end of the six-digit representation (#52BC8280), or a one-digit hexadecimal value to the end of the three-digit representation (#F003), you can change the opacity of a hexadecimal color. Hex opacity ranges from 00 (transparent) to FF (opaque).

Alpha can only be used with HSL, RGB, and hex colors; we cannot add the alpha value to name colors like green. There is, however, a named color keyword for zero opacity, transparent. It’s equivalent to rgba(0, 0, 0, 0), and it’s used like any other color keyword:

color: transparent;		 color: #52BC8280;
OR
color: #F003;
OR
color: rgba(0, 0, 0, 0);
OR
color: transparent;

Other CSS styles

element explanation variations
Image styling Image containing banana will have the attributes img[src*='banana'] {
height: 80px;
}
Link styling Link containing Florence will have the attributes.
more styling tips at Link Styling		 a[href*='florence'] {
color: lightgreen;
}
Important syntax !important syntax is used to override any style p {
color: blue !important;
}

Table

table has to contain the following (on HTML)

[table]
[thead]
[tr]
[th]header row column 1[/th]
[th]header row column 2[/th]
[th]header row column 3[/th]
[/tr]
[/thead]
[tbody]
[tr]
[td]row1 column 1[/td]
[td]row1 column 2[/td]
[td]row1 column 3[/td]
[/tr]
[tr]
[td]row2 column 1[/td]
[td]row2 column 2[/td]
[td]row2 column 3[/td]
[/tr]
[/tbody]
[tfoot]
[tr]
[td]footer column 1[/td]
[td]footer column 2[/td]
[td]footer column 3[/td]
[/tr]
[/tfoot]
[/table]

*replace [ and ] with < and >

to collapse 2 columns together

[td colspan="2"] your content [/td]

*replace [ and ] with < and >

to collapse 2 rows together

[td rowspan="2"] your content [/td]

*replace [ and ] with < and >

Table style

table styled at css with the following examples:

table {
border: 3px solid black;
border-collapse: collapse; /*to collapse border or else there will be 2 borders*/
font-family: Monospace;
}

th, td {
border: 3px solid black;
padding: 8px;
}

Google font

Google font can be embedded into coding

Go to Google Font to look for code.
Embed the code into [head] section
EG:

HTML

[head]
[link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet"]
[/head]

*replace [ and ] with < and >

CSS

p {
font-family: 'Roboto', sans-serif;
}

Downloaded font

Downloaded font can be linked into coding

Download and save font into folder, link it via CSS

EG:

CSS

[beginning of CSS:]

@font-face {
font-family: 'GlegooBanner';
src: url('../fonts/Glegoo-Regular.woff2') format('woff2'),
url('../fonts/Glegoo-Regular.woff') format('woff'),
url('../fonts/Glegoo-Regular.ttf') format('truetype');
}

[later part of CSS:]

.banner p {
font-family: 'GlegooBanner';
font-size: 20px;
}

Box shadow property

CSS styling

element explanation

This is a box with shadow

 box-shadow: 10px 10px;

This is a box with shadow with colour

 box-shadow: 10px 10px lightblue;

This is a box with 5px blurred, lightblue box-shadow

 box-shadow: 10px 10px 5px lightblue;

This is a box with blurred, light blue box-shadow with spread radius of 10px

 box-shadow: 10px 10px 5px 10px lightblue;
The inset parameter changes the shadow from an outer shadow (outset) to an inner shadow.

This is a box with blurred, light blue, inset box-shadow

 box-shadow: 10px 10px 5px lightblue inset;
Multiple shadow

This is a box with multiple shadow

 box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;

Shadow can also be added to text with the property of text-shadow.

Site stylesheet

made by banana, for banana.