HTML & CSS Flashcards
Block vs Inline Elements
HTML tags fall into one of these two categories. Block elements fill the entire width of the page. Inline elements sit next to one another and always go inside block elements.
!doctype html (in open & closed brackets)
First line of HTML document.. Tells computer you are looking at a Hyper Text Markup Language page. MUST HAVE. Don’t forget to close at the very end of doc.
meta charset=”utf-8” (in open & closed brackets)
Tells the computer what character set you are using. Goes inside the Head tag.
title (in open & closed brackets)
Site’s name. Goes inside Head tag. MUST HAVE.
script (in open & closed brackets)
Links to external JavaScript files vis the src attribute.
link (in open & closed brackets)
Links to external stylesheets via the href attribute.
head (in open & closed brackets)
The area where your meta tags go. Includes charset & title. Content not visible to website viewer. MUST HAVE.
body (in open & closed brackets)
Content for your website. Everything visible to website viewer. MUST HAVE.
div (in open & closed brackets)
Use divs for different site sections, sidebars, footers, etc. All about organization. Can use divs within divs as nested elements and should be indented within your code. STRUCTURAL TAG.
header (in open & closed brackets)
Site headers and headers for sections/articles. STRUCTURAL TAG.
nav (in open & closed brackets)
Site navigation. STRUCTURAL TAG.
section (in open & closed brackets)
Denote major sections of website. NOT allowed to put sections inside one another. STRUCTURAL TAG.
article (in open & closed brackets)
Use for individual pieces of content on a site such as news articles, blog posts, or comments. STRUCTURAL TAG.
aside (in open & closed brackets)
Use to add secondary type of content such as sidebars. STRUCTURAL TAG.
footer (in open & closed brackets)
These tags are used for footers for your site or major pieces of content like articles or sections. STRUCTURAL TAG.
Structural Tags
Header, Nav, Main, Aside, Section, Article, Footer - can all be used to organize elements in place of Div tags.
Inline Tags
Bold, Italic, Line Breaks, Links to external sites using the href attribute.
img (self closing bracket)
Adds images. Be sure to put image link in src attribute and add a name in the alt attribute. SELF CLOSING.
<img></img>
a (in open & closed brackets)
Adds links to external sites via the href attribute. INLINE ELE TAG. <a>…</a>
span (in open & closed brackets)
Span tags allow you to add style to portions of inline text. You will add style with CSS. INLINE TAG. Example: <p>This text is plain <span>and this will be fancy!</span></p>
CSS Definition
Cascading Style Sheet. The design of the content on your website.
font-family
Sets the font for the text in CSS. Will accept any web safe font.
Example:
font-family: Helvetica;
text-align
Sets the alignment of the text in CSS. Options are left, right, center or justify.
Example:
text-align:center;
font-style
In case you want to italicize text in CSS rather than using HTML tags. Options are normal, italic, and oblique.
Example:
font-style:italic;
font-weight
Stying text in CSS in different weights without using bold HTML tags. Options are normal, bold, bolder, lighter or a number from 100 to 900.
Example:
font-weight:bold;
text-transform
CSS. Allows you to make all text uppercase or lowercase. Options are capitalize, uppercase and lowercase.
Example:
text-transform:uppercase;
font-variant
CSS. This is a fun one - you can actually make your text small caps by giving this attribute the descriptor: small-caps.
Example:
font-variant: small-caps;
text-decoration
CSS. Underline, overline, line-through, none. This can be used to remove the default underline on elements.
Example:
text-decoration: none;
line-height
CSS. The default is for the line-height to be equivalent to the font-size. If you want to make it smaller or bigger, you set it with the line-height property. Accepts pixels, em, numbers, and percentages.
Example:
line-height: 150%;
text-indent
CSS. Sets the width of the tab indent - takes pixels, ems, or percentages.
Example:
Text-indent: 3em;
word-spacing & letter-spacing
CSS. Sets the space between words or letters. Accepts pixels or ems, also accepts negative values.
Example:
letter-spacing:-2px;
word-spacing: 3px;
Classes - CSS
A group of elements that are the same or similar. Can have as many elements as you want in a class. Each element can be the member of multiple classes.
Add to HTML:
<div>
~~~
Add to CSS:
.bio {
width: 100px;
height: 300px;
background: purple;
}</div>
~~~
IDs - CSS
Singular identifier of ONE html tag.
Add to HTML:
<div>
~~~
Add to CSS:
#main {
width: 200px;
height: 200px;
}</div>
~~~
Class & ID naming
Can’t start a name with a number and use a name that relates to what the element is, but not how it looks.
CSS Text Styles
color, font-family, text-align, font-style, font-weight, text-transform, font-variant, text-decoration, line-height, text-indent, word-spacing, letter-spacing.
Box Model
Every element in an HTML document can be considered a box. Each box has characteristics like width, height, border, margin and padding. The values of these characteristics can all be altered with CSS.
Height & Width - Box Model
my-box {
These set the height and width of an element, and they accept either pixel dimensions or percentages. Percentages set the height and width relative to its parent element.
width:200px;
height:200px;
}
width:100%;
height:20%;
}
Margin - Box Model
margin sets the distance between one element and the adjacent element, as if it’s pushing elements away from one another. margin accepts pixels or percentages.
Padding - Box Model
is for inside the element. makes the element itself bigger. It also accepts pixels or percentages.
Floating - CSS
Allows you to float elements alongside one another which is key to creating multi-column web layouts. You can float elements using values: left, right or none.
WARNING: floating an element removes it from the document flow. Be sure to use the clear or overflow properties to fix these issues.
Clear - CSS
Tells your element to stay clear of floated elements using the values: none, both, left or right.
Example:
.clear-fix {
clear:both;
width:100%;
}
Overflow - CSS
Useful for telling an element what to do with its child elements that may overflow their container. overflow: auto; tells a parent element to automatically increase to the size big enough to encapsulate all of the floated elements within it. Overflow uses the values: auto, scroll or hidden.
Example:
.parent-div {
overflow: auto;
}
Position - CSS
The position property sets the position of the element relative to its parent, the website, or the browser window. The default position for all elements is static. Relative sets the position relative to its parent element, absolute sets the position relative to the website, and fixed sets it relative to the browser window.
In order to then set the element’s position, you need to use the top, left, bottom & right properties. They each accept pixels or percentages.
Example:
#my-modal {
position: fixed;
top: 10px;
left: 500px;
}
Shortening a CSS Declaration
Condensing CSS code into a single line where each number represents top, right, bottom and left (clockwise).
Example:
.sidebar {
margin: 0 10px 20px 30px;
}
Add Comments for Organization - CSS
Examples: /* Hello there! I am a comment. */
or
/* Hello there!
I am a comment with many lines.
So there. */
Or calling attention to sections like a header: /****** HEADER AREA ******/
Add Comments to HTML
Example:
Or
Image Link
This is for using an image as a clickable link. Not just inserting an image!
<a><img></img></a>
Internal Link
If you need an internal link, instead of the url, you will link to the file location.
Example: <a>About Me</a>
Anchor Link
<a>Text!</a>
**If you want to have the link pop up in a new window, add target=”_BLANK” example below.
<a>Text!</a>
Inserting an Image
Self-closing tag. src = URL for the image. alt = alternative attribute. Images should be smaller than 1mb for fast load times.
<img></img>
Example:
<img></img>
ampersand (&) code
&
