CSS basics
Overview
CSS - Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language such as HTML.
Syntax:
CSS consists of a selector and a declaration block.
1selector {
2 property: value;
3}
Selectors:
CSS selector - selects the HTML element(s) you want to style.
- html element - selects HTML elements based on the element name.
- class - selects HTML elements with a specific class attribute, uses a period (.) character, followed by the class name.
- id - uses the id attribute of an HTML element to select a specific element. The id of an element is unique within a page. Uses a hash (#) character, followed by the id of the element.
- universal selector * - selects all HTML elements on the page.
Selectors Cheat Sheet: https://www.freecodecamp.org/news/css-selectors-cheat-sheet/
Load CSS
- External CSS -
<link rel="stylesheet" href="mystyle.css">in the <head> section of an HTML page - Internal CSS - defined within the
<style>element, inside the <head> section of an HTML page - Inline CSS -
<p style="color:red;">This is a paragraph.</p>
Specificity
If there are two or more conflicting CSS rules that point to the same element, the browser follows some rules to determine which one is most specific and therefore wins out. Every selector has its place in the specificity hierarchy. There are four categories which define the specificity level of a selector:
- Inline styles - An inline style is attached directly to the element to be styled.
Example:<h1 style="color: #ffffff;"> - IDs - An ID is a unique identifier for the page elements, such as #navbar.
- Classes, attributes and pseudo-classes - This category includes .classes, [attributes] and pseudo-classes such as :hover, :focus etc.
- Elements and pseudo-elements - This category includes element names and pseudo-elements, such as h1, div, :before and :after.
Colors
- HEX Colors - hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color, from 0 to 15(FF).
#rrggbb#ff0000 - RGB Colors - RGB color value represents RED, GREEN, and BLUE light sources.
rgb(red, green, blue)
rgb(180, 180, 180) - RGBA allow to specify transparity
rgba(red, green, blue, alpha)
rgba(255, 99, 71, 0) - HSL Colors - HSL stands for hue, saturation, and lightness.
hsl(hue, saturation, lightness)
hsl(0, 100%, 50%) - HSLA Value - HSL + option for transparity(from 0 to 1)
hsla(hue, saturation, lightness, alpha)
hsla(9, 100%, 64%, 0.2)
Box Model
All HTML elements can be considered as boxes. The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.
- Content - The content of the box, where text and images appear
- Padding - Clears an area around the content. The padding is transparent
- Border - A border that goes around the padding and content
- Margin - Clears an area outside the border. The margin is transparent
Units (absolute and relative):
- px - pixels (1px = 1/96th of 1in)
- % - Relative to the parent element
- em - Relative to the font-size of the element (2em means 2 times the size of the current font)
- rem - Relative to font-size of the root element