KandZ – Tuts

We like to help…!

CSS 58 💻 Cheatsheet






58 – Cheatsheet





Basic Selectors





    

  • Element Selector: Targets elements by tag name.
    p { color: blue; }
    • 




  • Class Selector: Targets elements with a specific class.
    .highlight { background-color: yellow; }
    • 




  • ID Selector: Targets an element with a specific ID (unique).
    #main-title { font-size: 36px; }
    • 




  • Universal Selector: Applies to all elements.
    * { margin: 0; padding: 0; }
    • 




  • Attribute Selector: Targets elements with specific attributes or attribute values.
    [type="text"] { border: 1px solid black; }
    • 






Combinators





    

  • Descendant Combinator (Space): Selects elements that are descendants of another element.
    div p { color: red; }
    • 




  • Child Combinator (>): Selects direct children of an element.
    ul > li { font-weight: bold; }
    • 




  • Adjacent Sibling Combinator (+): Selects the element immediately following another element.
    h1 + p { margin-top: 20px; }
    • 




  • General Sibling Combinator (~): Selects all siblings that follow another element.
    h2 ~ p { font-style: italic; }
    • 






Box Model





    

  • Margin: The space outside the border.
    • 






margin: 10px;
margin-top: 20px;
margin-left: 30px;
margin-right: 40px;
margin-bottom: 50px;





    

  • Padding: The space inside the border.
    • 






padding: 10px;
padding-top: 20px;
padding-left: 30px;
padding-right: 40px;
padding-bottom: 50px;





    

  • Border: The line around an element.
    • 






border: 1px solid black;
border-width: 2px;
border-style: dashed;
border-color: red;





    

  • Width/Height: Sets the width and height of an element.
    • 






width: 300px;
height: 200px;





Typography





    

  • Font Family: Specifies the font family for text.
    font-family: Arial, sans-serif;
    • 




  • Font Size: Sets the size of the font.
    font-size: 16px;
    • 




  • Font Weight: Controls the boldness of the font.
    font-weight: bold;
    • 




  • Text Align: Aligns text within an element.
    text-align: center;
    • 






Background





    

  • Background Color: Sets the background color of an element.
    background-color: #f0f0f0;
    • 




  • Background Image: Sets a background image for an element.
    background-image: url('image.jpg');
    • 




  • Background Repeat: Controls how the background image is repeated.
    background-repeat: no-repeat;
    • 




  • Background Position: Positions the background image within an element.
    background-position: center;
    • 






Display





    

  • Display Block: Makes an element take up the full width available and start on a new line.
    display: block;
    • 




  • Display Inline: Allows elements to sit next to each other horizontally.
    display: inline;
    • 




  • Display Inline-Block: Combines both inline and block properties.
    display: inline-block;
    • 




  • Display Flex: Creates a flex container for child elements.
    display: flex;
    • 




  • Display Grid: Creates a grid container for child elements.
    display: grid;
    • 






Positioning





    

  • Position Static: Default value. Elements are positioned according to the normal flow of the document.
    position: static;
    • 




  • Position Relative: Moves an element relative to its normal position.
    • 






position: relative;
top: 20px;
left: 30px;





    

  • Position Absolute: Positions an element relative to the nearest positioned ancestor (not static).
    • 






position: absolute;
top: 50px;
right: 100px;





    

  • Position Fixed: Keeps an element in a fixed position even when scrolling.
    • 






position: fixed;
bottom: 20px;
left: 30px;





Flexbox





    

  • Flex Direction: Defines the direction of the main axis (row or column).
    • 






flex-direction: row; /* Default */
flex-direction: column;





    

  • Justify Content: Aligns items along the main axis.
    • 






justify-content: flex-start; /* Default */
justify-content: center;
justify-content: flex-end;
justify-content: space-between;
justify-content: space-around;





    

  • Align Items: Aligns items along the cross axis.
    • 






align-items: stretch; /* Default */
align-items: flex-start;
align-items: center;
align-items: flex-end;





Grid





    

  • Grid Template Columns: Defines the number and size of columns in a grid container.
    grid-template-columns: repeat(3, 1fr);
    • 




  • Grid Template Rows: Defines the number and size of rows in a grid container.
    grid-template-rows: auto;
    • 




  • Justify Items: Aligns items along the row axis within their grid area.
    • 






justify-items: start; /* Default */
justify-items: center;
justify-items: end;
justify-items: stretch;





    

  • Align Items: Aligns items along the column axis within their grid area.
    • 






align-items: start; /* Default */
align-items: center;
align-items: end;
align-items: stretch;





Other Useful Properties





    

  • Color: Sets the color of text.
    color: #333333;
    • 




  • Opacity: Sets the opacity level of an element.
    opacity: 0.5;
    • 




  • Margin/Padding: Controls the space around or inside an element.
    • 






margin: 10px;
padding: 20px;





    

  • Box Shadow: Adds a shadow effect to an element.
    box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.5);
    • 




  • Transform: Applies 2D or 3D transformations to an element.
    transform: rotate(90deg);
    • 






THE END

	








		

		
Leave a Reply