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; }
- element:
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; }