css notes
css notes
Introduction to CSS
What is CSS?
CSS (Cascading Style Sheets) is used to style and layout web pages. It describes how HTML
elements should be displayed on screen, paper, or other media.
CSS is responsible for the visual design of web pages, including color, font, spacing, layout,
and even animations.
Inline CSS: You can add CSS directly to an HTML element using the style attribute.
Internal CSS: You can include CSS within the HTML document using the <style> tag inside the
<head> section.
External CSS: The best practice is to link an external CSS file to the HTML using the <link> tag
inside the <head>.
CSS Syntax: A CSS rule consists of a selector and a declaration block. The selector points to
the HTML element(s), and the declaration block contains one or more declarations separated
by semicolons.
2. Selectors
Basic Selectors:
Class Selector: Targets elements with a specific class. Classes are reusable.
css
html
ID Selector: Targets a unique element with a specific ID. IDs should be unique on a page.
css
html
3. Box Model
The box model is crucial to understanding how elements are laid out on a webpage.
2. Padding: The space between the content and the border. It makes the content area larger.
3. Border: The edge surrounding the padding (or the content if no padding is specified).
4. Margin: The space outside the border. It separates the element from its neighbors.
The width and height properties affect the content area only (excluding padding, border, and
margin).
Overflow:
Defines what happens if the content inside an element overflows its set dimensions.
4. Layout Basics
Display Property:
block: The element takes up the full width of its container and starts on a new line.
inline: The element takes up only as much width as needed and does not start on a new line.
inline-block: Like inline, but you can set width and height.
none: The element is hidden and does not take up any space in the layout.
Positioning:
static: The default position, where elements follow the normal document flow.
sticky: The element toggles between relative and fixed based on the user's scroll position.
float: Elements float to the left or right of their container, allowing text and other elements
to wrap around them.
5. Styling Text
Typography:
Text Alignment:
Text Colors:
Colors: Set using different formats like hex (#ff0000), RGB (rgb(255,0,0)), or named colors
(red).
background-color: lightblue;
Google Fonts:
Links:
Lists: