HTML & CSS Notes

HTML

HTML is the way a webpage is STRUCTURED!

It is the markup language that contains all the actual stuff that a web page has. For example, all the text on a page lives inside HTML tags that tell the browser how to order (structure) the content on the page.

Note: you can right-click any element on a web page & choose “Inspect Element” to open up your browsers Developer Tools, & it will show you the structure of the page.

CSS

CSS is the way a webpage LOOKS visually.

CSS tells the browser if you want to display any of those tags a particular way, for example, turning a background blue & pushing it to the left.

• CSS is NOT a programming language.
• It is a STYLING language!
• Used for presentation.
• Creativity focused.

In CSS, there are many ways to do the same thing.

C.S.S. Syntax–straight-forward and easy to understand.

selector { property1: value; property2: value; }

selector–There are many different types & combinations of selectors. A CSS style starts with a SELECTOR to apply the style to. Any HTML element can be used as a selector. The brackets { } contain styles applied to the HTML elements that match the selector.

Inside the curly brackets are one (or more) property-value pairs. Each pair contains a property (color, font-size, width, etc.), and a value for that property.

• Types of selectors:
  • Simple Selectors (select elements based on name, class, & id)
  • Combinator Selectors (select elements based on a specific relationship)
  • Pseudo-Class Selectors (select elements based on a certain state)
  • Pseudo-Element Selectors (select & style part of an element).
  • Attribute Selectors (select elements based on an attribute or attribute style)

• Selectors—
  • element:
    • ex: p { color: red; }
  • class:
    • ex: .aclass { color: blue; }
  • id:
    • ex: #sometext { color: orange; }

Universal: * { color:blue; }

The universal selector (*) selects all HTML elements on the page.

CSS can be inserted externally (through a .css file), internally (through the head), or by inline CSS.

Pseudo-Selectors commonly used for interactivity in websites; Usually visible only when something is done on a website, like hovering over a link button and having it change color; Pseudo-Selectors are used a lot in animations & transitions. Ex: h2:hover { color: red; }