1. Selectors:

   • Element Selector: Selects all elements of a specific tag name. Example: h1 { color: blue; } will set the color of all <h1> headings to blue.

   • Class Selector: Selects elements with a specific class attribute. Example: .my-class { font-size: 16px; } will set the font size of all elements with the class "my-class" to 16 pixels.

   • ID Selector: Selects a specific element with a unique ID attribute. Example: #my-id { background-color: yellow; } will set the background color of the element with the ID "my-id" to yellow.

   • Descendant Selector: Selects elements that are descendants of another element. Example: div p { margin: 10px; } will set a 10-pixel margin for all <p> elements that are descendants of a <div>.

   • Child Selector: Selects elements that are direct children of another element. Example: ul > li { list-style-type: circle; } will set the list-style-type of all <li> elements that are direct children of a <ul> to a circle.

   • Adjacent Sibling Selector: Selects an element that immediately follows another element. Example: h1 + p { font-weight: bold; } will set the font weight of the <p> element immediately following an <h1> to bold.

   • Attribute Selector: Selects elements based on their attribute values. Example: input[type="text"] { border: 1px solid black; } will set a border of 1 pixel solid black for all <input> elements with the attribute type set to "text".

2. Box Model:

   • Width: Sets the width of an element. Example: width: 200px; will set the width of the element to 200 pixels.

   • Height: Sets the height of an element. Example: height: 150px; will set the height of the element to 150 pixels.

   • Margin: Sets the margin around an element. Example: margin: 10px; will set a 10-pixel margin on all sides of the element.

   • Padding: Sets the padding inside an element. Example: padding: 5px; will set a 5-pixel padding inside the element.

   • Border: Sets the properties of the border around an element. Example: border: 1px solid black; will set a 1-pixel solid black border around the element.

   • Box-sizing: Specifies how the total width and height of an element are calculated. Example: box-sizing: border-box; will include the padding and border within the specified width and height of the element.

3. Typography:

   • Font-family: Sets the font family for text. Example: font-family: Arial, sans-serif; will set the font family of the text to Arial or any sans-serif font if Arial is not available.

   • Font-size: Sets the size of the font. Example: font-size: 14px; will set the font size to 14 pixels.

   • Font-weight: Sets the weight (boldness) of the font. Example: font-weight: bold; will set the font weight to bold.

   • Color: Sets the color of text. Example: color: #333333; will set the color of the text to a dark gray (#333333).

4. Backgrounds and Borders:

   • Background-color: Sets the background color of an element. Example: background-color: #f5f5f5; will set the background color to a light gray (#f5f5f5).

   • Background-image: Sets an image as the background of an element. Example: background-image: url("image.jpg"); will set the image "image.jpg" as the background of the element.

   • Background-size: Sets the size of the background image. Example: background-size: cover; will scale the background image to cover the entire element.

   • Border-radius: Sets the rounded corners of an element. Example: border-radius: 5px; will make the corners of the element appear rounded with a 5-pixel radius.

   • Border-color: Sets the color of the border. Example: border-color: red; will set the border color to red.

   • Border-width: Sets the width of the border. Example: border-width: 2px; will set the border width to 2 pixels.

5. Layout and Positioning:

   • Display: Specifies the display behavior of an element. Example: display: block; will make the element a block-level element, taking up the entire width of the parent container.

   • Position: Specifies the positioning method of an element. Example: position: relative; will position the element relative to its normal position.

   • Float: Positions an element to the left or right of its container. Example: float: left; will float the element to the left of its container.

   • Clear: Clears the float property. Example: clear: both; will ensure that no element floats on either side of the cleared element.

6. Box Shadow and Text Shadow:

   • Box Shadow: Adds a shadow effect to an element. Example: box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); will add a box shadow with a horizontal offset of 2 pixels, a vertical offset of 2 pixels, a blur radius of 4 pixels, and a color of black with 50% opacity.

   • Text Shadow: Adds a shadow effect to text. Example: text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); will add a text shadow with a horizontal offset of 1 pixel, a vertical offset of 1 pixel, a blur radius of 2 pixels, and a color of black with 30% opacity.

7. Transitions and Animations:

   • Transition: Applies a smooth transition effect to an element. Example: transition: width 0.3s ease-in-out; will apply a transition effect to the width property of the element, with a duration of 0.3 seconds and an easing function of ease-in-out.

   • Animation: Specifies a keyframe-based animation for an element. Example: animation: myAnimation 2s linear infinite; will apply the animation named "myAnimation" to the element, with a duration of 2 seconds, a linear timing function, and an infinite repetition.

8. Pseudo-Classes and Pseudo-Elements:

   • Pseudo-Classes: Selects elements based on a specific state or condition. Example: a:hover { color: red; } will change the color of a link when the user hovers over it.

   • Pseudo-Elements: Selects a specific part of an element. Example: p::first-line { font-weight: bold; } will make the first line of a paragraph bold.

9. Flexbox:

   • Display: Flex: Creates a flexible container for arranging elements in a row or column. Example: display: flex; will enable flexbox layout for the container element.

   • Flex-direction: Specifies the direction of flex items. Example: flex-direction: row; will arrange the flex items horizontally in a row.

   • Justify-content: Aligns flex items along the main axis. Example: justify-content: center; will horizontally center the flex items within the container.

   • Align-items: Aligns flex items along the cross axis. Example: align-items: center; will vertically center the flex items within the container.

Learn more CSS skills on Coursera.

CSS Courses | HTML Courses | JavaScript Courses | Web Design Courses | Web Development Courses | Front End Web Development Courses | Bootstrap Courses | PHP Courses