Here is a basic CSS cheat sheet that you can use as a reference:
1. CSS stands for Cascading Style Sheets
2. CSS is used to style and layout web pages
3. CSS styles are applied to HTML elements
4. CSS styles are specified in rules, which consist of a selector and a declaration block
Selectors
Selectors are used to specify which elements a set of styles should be applied to.
There are several different types of selectors:
Type selectors: Select elements based on the element type (e.g., p for paragraphs)
Class selectors: Select elements with a specific class attribute (e.g., .my-class)
ID selectors: Select elements with a specific ID attribute (e.g., #my-id)
Attribute selectors: Select elements with a specific attribute or attribute value (e.g., [href] or [type="button"])
Declaration block
A declaration block consists of a set of declarations, each of which has a property and a value. The property is the styling attribute that you want to set (e.g., color, font-size), and the value is the style that you want to apply (e.g., red, 16px).
Declarations are separated by semicolons and written inside curly braces:
selector {
property: value;
property: value;
}
Comments
You can add comments to your CSS code to explain what the code does or to make it easier to read. Comments are ignored by the browser and start with /* and end with */.
/* This is a comment */
Inheritance
In CSS, inheritance refers to the way in which styles are passed from parent elements to child elements. If a parent element has a certain style applied to it, that style will be inherited by its child elements unless it is overridden by a more specific rule.
Specificity
Specificity refers to the weight of a CSS rule. If multiple rules could apply to an element, the browser will use the one with the highest specificity. Specificity is calculated based on the number of each type of selector in the rule.
Box model
In CSS, every element is considered a box, and the box model is used to specify the layout and size of these boxes. The box model consists of the following elements:
Margin: The space outside of the border
Border: The line around the edge of the element
Padding: The space inside the border
Content: The actual content of the element
The width and height of an element can be set using the width and height properties. By default, the width and height of an element are determined by the content inside it.
Units of measurement
CSS supports several different units of measurement, including: px: Pixels (fixed-size units)
em: Ems (relative to the font-size of the element)
%: Percent (relative to the size of the parent element)
rem: Root ems (relative to the font-size of the root element)
Some Commonly used CSS properties
font-size: Sets the size of the font.
font-family: Sets the font family.
color: Sets the color of the text.
background-color: Sets the background color of an element.
text-align: Aligns the text within an element.
line-height: Sets the space between lines of text.
margin: Sets the space around an element.
padding: Sets the space within an element.
width: Sets the width of an element.
height: Sets the height of an element.
border: Sets the border around an element.
border-radius: Rounds the corners of the border around an element.
box-shadow: Adds a shadow effect to an element.
opacity: Sets the transparency of an element.
overflow: Controls how overflow is handled when the content of an element is too large to fit within its boundaries.
position: Controls the position of an element relative to its parent element or the viewport.
float: Floats an element to the left or right of its parent element, allowing other elements to wrap around it.
clear: Clears floated elements, forcing an element to start below any floated elements that precede it.
Here are some sources you can use to learn CSS:
W3Schools: A popular online tutorial and reference site that provides a wide range of CSS tutorials and examples.
MDN Web Docs: The official documentation for web technologies, including CSS. This is a comprehensive resource that covers all aspects of CSS in detail.
CSS Tricks: A blog and reference site that provides tips, tricks, and tutorials on all aspects of CSS.
Codecademy: An online platform that offers interactive courses on a variety of topics, including CSS.
Udemy: An online platform that offers a wide range of paid and free courses on a variety of topics, including CSS.
FreeCodeCamp: A non-profit organization that provides a comprehensive curriculum of interactive coding challenges and projects, including lessons on CSS.
Top comments (0)