Skip to content

Instantly share code, notes, and snippets.

@dannyradden
Last active March 14, 2017 02:24
Show Gist options
  • Save dannyradden/283c2d07be3ee3d6b38b57d51c5ab75a to your computer and use it in GitHub Desktop.
Save dannyradden/283c2d07be3ee3d6b38b57d51c5ab75a to your computer and use it in GitHub Desktop.
HTML and CSS Basics

HTML


HTML Skeleton

The basic HTML skeleton is the set of tags required of every HTML web page you build.


Includes information about the document such as the name of the file and other technical information like meat tags and style tag


Where you place all the information that will actually show up on the web page once it is online and opened in a browser.


Semantic Tags

Tags that define the contents of the element.


Non-Semantic Tags

Tags that do not define the contents of the element.


CSS


Selectors

Selectors are patterns used to select the element(s) you want to style


Class Selectors

Selects all elements with a specified class


ID Selectors

Selects the element with specific ID.


Box Model

A box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.


Display Property

  • An inline element has no line break before or after it, and it tolerates HTML elements next to it.
  • A block element has some whitespace above and below it and does not tolerate any HTML elements next to it.
  • An inline-block element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element.

Floats

The float property specifies whether or not an element should float.


Clearfix

Floating an element takes it out of the normal document flow, which sometimes causes a parent element to collapse. Clearfix prevents elements containing floats from collapsing.


Detour: Lorem Ipsum

huh?


Wireframing

Making an outline of your CSS layout


Other CSS Wizardry


Pseudo-Classes

A pseudo-class is used to define a special state of an element such as hover, click, or specific children.


Spaces, Commas, and Dots

  • Period With No Space: Apply to elements that have both selectors.
  • Comma: Apply elements that have either selector.
  • Space: Child elements.
  • >: Direct children.
@Carmer
Copy link

Carmer commented Mar 14, 2017

Get a little more specific with the semantic tags section.

Flesh out the box model more.

What does float actually mean?

Look into lorem ipsum. Even just google "what is lorem ipsum"

Going through the spaces commas and dots section and making some examples would be very helpful for yourself.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment