CSS

1. Color & Background

  • color
    • Usage: Sets the text color.
    • Example: color: #ff5733; (Sets the text color to a reddish hue)
  • background-color
    • Usage: Sets the background color of an element.
    • Example: background-color: rgba(255, 255, 255, 0.8); (Sets a semi-transparent white background)
  • background-image
    • Usage: Sets an image as the background.
    • Example: background-image: url('image.jpg'); (Adds an image as background)
  • background-size
    • Usage: Defines the size of the background image.
    • Example: background-size: cover; (Scales the image to cover the element fully)
  • background-repeat
    • Usage: Controls how the background image repeats.
    • Example: background-repeat: no-repeat; (Prevents the image from repeating)

2. Text Properties

  • font-family
    • Usage: Specifies the font type.
    • Example: font-family: 'Arial', sans-serif; (Sets Arial as the font with a fallback to sans-serif)
  • font-size
    • Usage: Sets the size of the font.
    • Example: font-size: 16px; (Sets font size to 16 pixels)
  • font-weight
    • Usage: Specifies the thickness of the font.
    • Example: font-weight: bold; (Makes the text bold)
  • line-height
    • Usage: Controls the space between lines.
    • Example: line-height: 1.5; (Sets the line height to 1.5 times the font size)
  • text-align
    • Usage: Aligns the text within its container.
    • Example: text-align: center; (Centers the text horizontally)
  • text-decoration
    • Usage: Adds decorations like underline or strikethrough.
    • Example: text-decoration: underline; (Underlines the text)
  • text-transform
    • Usage: Controls the capitalization of text.
    • Example: text-transform: uppercase; (Transforms all text to uppercase)

3. Box Model

  • width & height
    • Usage: Sets the dimensions of an element.
    • Example: width: 300px; height: 200px; (Sets the element to 300px wide and 200px tall)
  • padding
    • Usage: Controls the inner space between content and the border.
    • Example: padding: 10px; (Adds 10 pixels of padding on all sides)
  • margin
    • Usage: Sets the outer space around an element.
    • Example: margin: 20px auto; (Adds 20 pixels margin vertically and auto margin horizontally for centering)
  • border
    • Usage: Defines the border around an element.
    • Example: border: 2px solid #000; (Creates a 2-pixel solid black border)
  • box-shadow
    • Usage: Adds shadow effects around an element.
    • Example: box-shadow: 0 4px 8px rgba(0,0,0,0.2); (Creates a subtle shadow effect)

4. Positioning

  • position
    • Usage: Defines how an element is positioned.
    • Example: position: relative; (Positions the element relative to its normal position)
  • top, right, bottom, left
    • Usage: Sets the offsets for positioned elements.
    • Example: top: 10px; left: 20px; (Moves the element down 10px and right 20px)
  • z-index
    • Usage: Controls the stack order of overlapping elements.
    • Example: z-index: 10; (Sets the stacking order, with higher values on top)

5. Display & Visibility

  • display
    • Usage: Specifies how an element is displayed.
    • Example: display: flex; (Enables flexbox layout for the element)
  • visibility
    • Usage: Controls whether an element is visible or hidden.
    • Example: visibility: hidden; (Hides the element but maintains its space)
  • overflow
    • Usage: Controls the overflow of content within an element.
    • Example: overflow: auto; (Adds scrollbars if the content overflows)

6. Flexbox

  • display: flex
    • Usage: Activates flexbox layout.
    • Example:
      .flex-container {
      display: flex;
      flex-direction: row; /* or column */
      }
  • justify-content
    • Usage: Aligns flex items along the main axis.
    • Example: justify-content: space-between; (Distributes space between items)
  • align-items
    • Usage: Aligns flex items along the cross axis.
    • Example: align-items: center; (Centers items vertically)

7. Grid Layout

  • display: grid
    • Usage: Activates grid layout.
    • Example:
      .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr); /* Three equal columns */
      }
  • grid-template-rows
    • Usage: Defines the number and size of rows.
    • Example: grid-template-rows: auto 100px; (First row auto height, second row 100px)
  • grid-gap
    • Usage: Sets the spacing between grid items.
    • Example: grid-gap: 10px; (Adds 10 pixels of space between items)

8. Transitions & Animations

  • transition
    • Usage: Specifies the transition effect for properties when they change.
    • Example:
      .box {
      transition: background-color 0.5s ease;
      }
  • animation
    • Usage: Defines an animation effect.
    • Example:
      @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
      }

      .fade {
      animation: fadeIn 2s;
      }

9. Miscellaneous

  • opacity
    • Usage: Sets the transparency level of an element.
    • Example: opacity: 0.5; (Makes the element semi-transparent)
  • cursor
    • Usage: Specifies the type of cursor to be displayed.
    • Example: cursor: pointer; (Displays a pointer cursor on hover)
  • filter
    • Usage: Applies visual effects (e.g., blur, brightness).
    • Example: filter: grayscale(100%); (Makes the image grayscale)

 

Practical Example:

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Sample Web Page</title>
<link rel=”stylesheet” href=”styles.css”> <!– Link to the CSS file –>
<style>
/* CSS Styles from the practical example */
body {
background-color: #eaeaea; /* Light grey background */
font-family: ‘Arial’, sans-serif; /* Font family */
}

.header {
background-color: #4CAF50; /* Green header */
color: white; /* White text */
text-align: center; /* Centered text */
padding: 15px; /* Inner spacing */
margin-bottom: 20px; /* Space below the header */
}

.container {
display: flex; /* Use flexbox layout */
justify-content: space-between; /* Space between items */
padding: 20px; /* Inner spacing */
margin: 0 auto; /* Center container */
width: 80%; /* Width of container */
background-color: white; /* White background */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow effect */
}

.item {
flex: 1; /* Equal size for flex items */
padding: 10px; /* Inner spacing */
margin: 10px; /* Outer spacing */
background-color: #f1f1f1; /* Light grey box */
border: 2px solid #ccc; /* Border around items */
transition: background-color 0.3s; /* Transition on background color */
}

.item:hover {
background-color: #ddd; /* Change color on hover */
}

.footer {
text-align: center; /* Centered footer text */
padding: 10px; /* Inner spacing */
background-color: #333; /* Dark background */
color: white; /* White text */
}
</style>
</head>
<body>

<div class=”header”>
<h1>Welcome to My Sample Web Page</h1>
</div>

<div class=”container”>
<div class=”item”>
<h2>Item 1</h2>
<p>This is the first item in the flexbox container.</p>
</div>
<div class=”item”>
<h2>Item 2</h2>
<p>This is the second item in the flexbox container.</p>
</div>
<div class=”item”>
<h2>Item 3</h2>
<p>This is the third item in the flexbox container.</p>
</div>
</div>

<div class=”footer”>
<p>&copy; 2024 My Sample Web Page</p>
</div>

</body>
</html>