CSS Basics

1. Selectors: Used to select the HTML elements you want to style.

 Element Selector: p { ... } (selects all <p> elements)

 Class Selector: .classname { ... } (selects all elements with class classname)

 ID Selector: #idname { ... } (selects the element with ID idname)

 Attribute Selector: [type="text"] { ... } (selects elements with a specific attribute)

 Pseudo-classes: a:hover { ... } (selects elements in a specific state)

 Pseudo-elements: p::first-line { ... } (selects a part of an element)

2. Properties: CSS properties define how elements should be styled. Here are some common
categories and properties:

Layout Properties

 Display: Controls the display behavior of an element.

 block, inline, inline-block, flex, grid, none

 Position: Controls the positioning of an element.

 static, relative, absolute, fixed, sticky

 Float: Allows elements to float to the left or right.

 left, right, none

 Clear: Specifies what elements can float beside the cleared element.

 left, right, both, none

 Overflow: Controls what happens when content overflows an element's box.

 visible, hidden, scroll, auto

Box Model Properties

 Width: Sets the width of an element.

 Height: Sets the height of an element.

 Padding: Space between the content and the border.

 Margin: Space outside the border.

 Border: Defines the border around an element.

 border-width, border-style, border-color

Typography Properties
  Font-family: Specifies the font of the text.

 Font-size: Sets the size of the font.

 Font-weight: Defines the thickness of the font.

 normal, bold, bolder, lighter, or numeric values (100-900)

 Line-height: Sets the height of a line box.

 Text-align: Aligns the text inside an element.

 left, right, center, justify

 Text-decoration: Adds decoration to text.

 none, underline, overline, line-through

 Color: Sets the color of the text.

Background Properties

 Background-color: Sets the background color of an element.

 Background-image: Sets an image as the background.

 Background-repeat: Defines how the background image is repeated.

 repeat, no-repeat, repeat-x, repeat-y

 Background-position: Sets the starting position of a background image.

 Background-size: Specifies the size of the background image.

Flexbox Properties

 Display: flex: Enables flexbox layout.

 Flex-direction: Defines the direction of the flex items.

 row, row-reverse, column, column-reverse

 Justify-content: Aligns flex items along the main axis.

 flex-start, flex-end, center, space-between, space-around

 Align-items: Aligns flex items along the cross axis.

 flex-start, flex-end, center, baseline, stretch

 Flex-wrap: Controls whether flex items should wrap onto multiple lines.

 nowrap, wrap, wrap-reverse

Grid Properties

 Display: grid: Enables grid layout.

  Grid-template-columns: Defines the columns of the grid.

 Grid-template-rows: Defines the rows of the grid.

 Grid-area: Specifies a grid item's size and location.

 Gap: Sets the gaps between rows and columns.

Transition and Animation Properties

 Transition: Allows property changes in CSS values to occur smoothly over a specified duration.

 transition-property, transition-duration, transition-timing-function, transition-delay

 Animation: Allows you to animate transitions from one CSS style to another.

 animation-name, animation-duration, animation -timing-function, animation-

delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-
play-state

Media Queries

 @media: Used to apply styles based on the viewport size or device characteristics.

css

VerifyRunCopy code

1@media (max-width: 600px) {

2 body {

3 background-color: lightblue;

4 }

5}

CSS Variables

 Custom Properties: Allow you to define variables in CSS.

css

VerifyRunCopy code

1:root {

2 --main-color: #3498db;

3}

4.element {

5 color: var(--main-color);
6}

Pseudo-classes and Pseudo-elements

 Pseudo-classes: Styles applied to elements in a specific state.

 :hover, :focus, :nth-child(), :first-child, :last-child

 Pseudo-elements: Styles applied to a specific part of an element.

 ::before, ::after, ::first-letter, ::first-line

Conclusion

CSS is a powerful tool for web design, allowing for extensive customization and control over the
appearance of web pages. Understanding these properties and how to use them effectively can greatly
enhance the user experience and visual appeal of a website.

You

css compelete properties notes and styles with syntax and example

BLACKBOXAI

Certainly! Below is a comprehensive guide to CSS properties, including their syntax, examples, and
common use cases. This guide is organized by categories for easier reference.

1. Text Properties

a. Font Properties

 font-family

 Syntax: font-family: 'Font Name', fallback-font;

 Example:

css

VerifyRunCopy code

1p {

2 font-family: 'Arial', sans-serif;

3}

 font-size

 Syntax: font-size: size;

  Example:

css

VerifyRunCopy code

1h1 {

2 font-size: 24px;

3}

 font-weight

 Syntax: font-weight: normal | bold | bolder | lighter | number;

 Example:

css

VerifyRunCopy code

1strong {

2 font-weight: bold;

3}

 font-style

 Syntax: font-style: normal | italic | oblique;

 Example:

css

VerifyRunCopy code

1em {

2 font-style: italic;

3}

 line-height

 Syntax: line-height: normal | number | length | percentage;

 Example:

css

VerifyRunCopy code

1p {

2 line-height: 1.5;
3}

b. Text Decoration and Alignment

 text-align

 Syntax: text-align: left | right | center | justify;

 Example:

css

VerifyRunCopy code

1h2 {

2 text-align: center;

3}

 text-decoration

 Syntax: text-decoration: none | underline | overline | line-through;

 Example:

css

VerifyRunCopy code

1a {

2 text-decoration: underline;

3}

 text-transform

 Syntax: text-transform: none | capitalize | uppercase | lowercase;

 Example:

css

VerifyRunCopy code

1h3 {

2 text-transform: uppercase;

3}

 color

 Syntax: color: color;

 Example:
css

VerifyRunCopy code

1p {

2 color: #333;

3}

2. Box Model Properties

a. Dimensions

 width

 Syntax: width: length | percentage;

 Example:

css

VerifyRunCopy code

1div {

2 width: 50%;

3}

 height

 Syntax: height: length | percentage;

 Example:

css

VerifyRunCopy code

1div {

2 height: 200px;

3}

b. Padding, Margin, and Border

 padding

 Syntax: padding: top right bottom left;

 Example:

css

VerifyRunCopy code
1div {

2 padding: 10px 15px 10px 15px; /* top right bottom left */

3}

 margin

 Syntax: margin: top right bottom left;

 Example:

css

VerifyRunCopy code

1div {

2 margin: 20px auto; /* top/bottom left/right */

3}

 border

 Syntax: border: width style color;

 Example:

css

VerifyRunCopy code

1div {

2 border: 1px solid #000;

3}

3. Background Properties

 background-color

 Syntax: background-color: color;

 Example:

css

VerifyRunCopy code

1body {

2 background-color: #f0f0f0;

3}

 background-image
  Syntax: background-image: url('image.jpg');

 Example:

css

VerifyRunCopy code

1div {

2 background-image: url('background.jpg');

3}

 background-repeat

 Syntax: background-repeat: repeat | no-repeat | repeat-x | repeat-y;

 Example:

css

VerifyRunCopy code

1div {

2 background-repeat: no-repeat;

3}

 background-position

 Syntax: background-position: x y;

 Example:

css

VerifyRunCopy code

1div {

2 background-position: center top;

3}

 background-size

 Syntax: background-size: cover | contain | length;

 Example:

css

VerifyRunCopy code

1div {
2 background-size: cover;

3}

4. Positioning Properties

 position

 Syntax: position: static | relative | absolute | fixed | sticky;

 Example:

css

VerifyRunCopy code

1div {

2 position: relative;

3 top: 10px;

4 left: 20px;

5}

 top, right, bottom, left

 Syntax: top: length;

 Example:

css

VerifyRunCopy code

1div {

2 position: absolute;

3 top: 50px;

4 left: 100px;

5}

5. Flexbox Properties

 display: flex

 Syntax: display: flex;

 Example:

css

VerifyRunCopy code
1.container {

2 display: flex;

3}

 flex-direction

 Syntax: flex-direction: row | row-reverse | column | column-reverse;

 Example:

css

VerifyRunCopy code

1.container {

2 flex-direction: column;

3}

 justify-content

 Syntax: justify-content: flex-start | flex-end | center | space-between | space-around;

 Example:

css

VerifyRunCopy code

1.container {

2 justify-content: space-between;

3}

 align-items

 Syntax: align-items: flex-start | flex-end | center | baseline | stretch;

 Example:

css

VerifyRunCopy code

1.container {

2 align-items: center;

3}

6. Grid Properties

 display: grid
  Syntax: display: grid;

 Example:

css

VerifyRunCopy code

1.grid-container {

2 display: grid;

3}

 grid-template-columns

 Syntax: grid-template-columns: repeat(n, size);

 Example:

css

VerifyRunCopy code

1.grid-container {

2 grid-template-columns: repeat(3, 1fr);

3}

 grid-template-rows

 Syntax: grid-template-rows: repeat(n, size);

 Example:

css

VerifyRunCopy code

1.grid-container {

2 grid-template-rows: 100px auto;

3}

7. Transition and Animation Properties

 transition

 Syntax: transition: property duration timing-function delay;

 Example:

css

VerifyRunCopy code
1div {

2 transition: background-color 0.5s ease;

3}

 animation

 Syntax: animation: name duration timing-function delay iteration-count direction;

 Example:

css

VerifyRunCopy code

1@keyframes example {

2 from {background-color: red;}

3 to {background-color: yellow;}

4}

5div {

6 animation: example 5s infinite;

7}

8. Media Queries

 @media

 Syntax: @media media-type and (condition) { /* styles */ }

 Example:

css

VerifyRunCopy code

1@media (max-width: 600px) {

2 body {

3 background-color: lightblue;

4 }

5}

9. CSS Variables

 Custom Properties

 Syntax: --variable-name: value;

  Example:

css

VerifyRunCopy code

1:root {

2 --main-color: #3498db;

3}

4.element {

5 color: var(--main-color);

6}

Conclusion

This guide provides a detailed overview of CSS properties, their syntax, and examples. Mastering these
properties will enable you to create visually appealing and responsive web designs. ### 10. List
Properties

 list-style

 Syntax: list-style: type position image;

 Example:

css

VerifyRunCopy code

1ul {

2 list-style: disc inside url('bullet.png');

3}

 list-style-type

 Syntax: list-style-type: none | disc | circle | square;

 Example:

css

VerifyRunCopy code

1ol {

2 list-style-type: decimal;

3}
  list-style-position

 Syntax: list-style-position: inside | outside;

 Example:

css

VerifyRunCopy code

1ul {

2 list-style-position: outside;

3}

11. Table Properties

 border-collapse

 Syntax: border-collapse: collapse | separate;

 Example:

css

VerifyRunCopy code

1table {

2 border-collapse: collapse;

3}

 border-spacing

 Syntax: border-spacing: length;

 Example:

css

VerifyRunCopy code

1table {

2 border-spacing: 10px;

3}

 table-layout

 Syntax: table-layout: auto | fixed;

 Example:

css
VerifyRunCopy code

1table {

2 table-layout: fixed;

3}

12. Overflow Properties

 overflow

 Syntax: overflow: visible | hidden | scroll | auto;

 Example:

css

VerifyRunCopy code

1div {

2 overflow: hidden;

3}

 overflow-x

 Syntax: overflow-x: visible | hidden | scroll | auto;

 Example:

css

VerifyRunCopy code

1div {

2 overflow-x: scroll;

3}

 overflow-y

 Syntax: overflow-y: visible | hidden | scroll | auto;

 Example:

css

VerifyRunCopy code

1div {

2 overflow-y: auto;

3}
13. Cursor Properties

 cursor

 Syntax: cursor: auto | crosshair | pointer | move | text | wait | help;

 Example:

css

VerifyRunCopy code

1button {

2 cursor: pointer;

3}

14. Visibility Properties

 visibility

 Syntax: visibility: visible | hidden | collapse;

 Example:

css

VerifyRunCopy code

1.hidden {

2 visibility: hidden;

3}

15. Filter Properties

 filter

 Syntax: filter: none | blur(px) | brightness(%) | contrast(%) | drop-shadow(px px px

color);

 Example:

css

VerifyRunCopy code

1img {

2 filter: grayscale(100%);

3}

16. Shape Properties

  border-radius

 Syntax: border-radius: length | percentage;

 Example:

css

VerifyRunCopy code

1div {

2 border-radius: 10px;

3}

 clip-path

 Syntax: clip-path: shape;

 Example:

css

VerifyRunCopy code

1div {

2 clip-path: circle(50%);

3}

17. Transition Timing Functions

 transition-timing-function

 Syntax: transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out;

 Example:

css

VerifyRunCopy code

1div {

2 transition: all 0.3s ease-in-out;

3}

18. Z-Index Property

 z-index

 Syntax: z-index: number;

 Example:
css

VerifyRunCopy code

1.overlay {

2 position: absolute;

3 z-index: 10;

4}

Conclusion

This extended guide covers additional CSS properties, providing syntax and examples for each.
Understanding these properties will further enhance your ability to create sophisticated and responsive
web designs. ### 19. Animation Keyframes

 @keyframes

 Syntax: @keyframes name { from { /* styles */ } to { /* styles */ } }

 Example:

css

VerifyRunCopy code

1@keyframes fadeIn {

2 from { opacity: 0; }

3 to { opacity: 1; }

4}

5div {

6 animation: fadeIn 2s ease-in;

7}

20. Object Fit Properties

 object-fit

 Syntax: object-fit: fill | contain | cover | none | scale-down;

 Example:

css

VerifyRunCopy code

1img {
2 object-fit: cover;

3 width: 100%;

4 height: 200px;

5}

21. Text Shadow Property

 text-shadow

 Syntax: text-shadow: h-shadow v-shadow blur-radius color;

 Example:

css

VerifyRunCopy code

1h1 {

2 text-shadow: 2px 2px 4px #000000;

3}

22. Box Shadow Property

 box-shadow

 Syntax: box-shadow: h-shadow v-shadow blur-radius spread-radius color;

 Example:

css

VerifyRunCopy code

1div {

2 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

3}

23. Grid Gap Property

 gap

 Syntax: gap: length;

 Example:

css

VerifyRunCopy code

1.grid-container {
2 display: grid;

3 gap: 20px;

4}

24. Column Properties

 column-count

 Syntax: column-count: number;

 Example:

css

VerifyRunCopy code

1.multi-column {

2 column-count: 3;

3}

 column-gap

 Syntax: column-gap: length;

 Example:

css

VerifyRunCopy code

1.multi-column {

2 column-gap: 15px;

3}

25. Writing Mode Properties

 writing-mode

 Syntax: writing-mode: horizontal-tb | vertical-rl | vertical-lr;

 Example:

css

VerifyRunCopy code

1p {

2 writing-mode: vertical-rl;

3}
26. Text Overflow Properties

 text-overflow

 Syntax: text-overflow: clip | ellipsis;

 Example:

css

VerifyRunCopy code

1.truncate {

2 white-space: nowrap;

3 overflow: hidden;

4 text-overflow: ellipsis;

5}

27. Appearance Property

 appearance

 Syntax: appearance: auto | none;

 Example:

css

VerifyRunCopy code

1button {

2 appearance: none;

3}

28. Filter Effects

 filter

 Syntax: filter: none | blur(px) | brightness(%) | contrast(%) | drop-shadow(px px px

color);

 Example:

css

VerifyRunCopy code

1img {

2 filter: brightness(80%);
3}

29. Scroll Snap Properties

 scroll-snap-type

 Syntax: scroll-snap-type: x | y | block | inline | both;

 Example:

css

VerifyRunCopy code

1.scroll-container {

2 scroll-snap-type: x mandatory;

3}

 scroll-snap-align

 Syntax: scroll-snap-align: start | end | center;

 Example:

css

VerifyRunCopy code

1.scroll-item {

2 scroll-snap-align: start;

3}

30. Shape Outside Property

 shape-outside

 Syntax: shape-outside: shape;

 Example:

css

VerifyRunCopy code

1img {

2 float: left;

3 shape-outside: circle(50%);

4}

Conclusion
This comprehensive guide includes additional CSS properties, their syntax, and examples, further
enhancing your understanding of CSS. Mastery of these properties will allow you to create more dynamic
and visually appealing web designs. ### 31. Grid Auto Flow Property

 grid-auto-flow

 Syntax: grid-auto-flow: row | column | dense;

 Example:

css

VerifyRunCopy code

1.grid-container {

2 grid-auto-flow: dense;

3}

32. Resize Property

 resize

 Syntax: resize: none | both | horizontal | vertical;

 Example:

css

VerifyRunCopy code

1textarea {

2 resize: both;

3}

33. Align Content Property

 align-content

 Syntax: align-content: flex-start | flex-end | center | space-between | space-around |

stretch;

 Example:

css

VerifyRunCopy code

1.flex-container {

2 align-content: space-between;

3}
34. Align Self Property

 align-self

 Syntax: align-self: auto | flex-start | flex-end | center | baseline | stretch;

 Example:

css

VerifyRunCopy code

1.item {

2 align-self: center;

3}

35. Object Position Property

 object-position

 Syntax: object-position: x y;

 Example:

css

VerifyRunCopy code

1img {

2 object-position: top right;

3}

36. Text Justify Property

 text-justify

 Syntax: text-justify: auto | inter-word | inter-character;

 Example:

css

VerifyRunCopy code

1p {

2 text-justify: inter-word;

3}

37. Break Properties

 word-break
  Syntax: word-break: normal | break-all | keep-all;

 Example:

css

VerifyRunCopy code

1p {

2 word-break: break-all;

3}

 overflow-wrap

 Syntax: overflow-wrap: normal | break-word;

 Example:

css

VerifyRunCopy code

1p {

2 overflow-wrap: break-word;

3}

38. Column Rule Properties

 column-rule

 Syntax: column-rule: width style color;

 Example:

css

VerifyRunCopy code

1.multi-column {

2 column-rule: 1px solid #ccc;

3}

39. Text Emphasis Properties

 text-emphasis

 Syntax: text-emphasis: style color;

 Example:

css
VerifyRunCopy code

1.emphasized {

2 text-emphasis: dot #f00;

3}

40. Grid Template Areas

 grid-template-areas

 Syntax: grid-template-areas: "area1 area2" "area3 area4";

 Example:

css

VerifyRunCopy code

1.grid-container {

2 grid-template-areas:

3 "header header"

4 "sidebar content";

5}

41. Backdrop Filter Property

 backdrop-filter

 Syntax: backdrop-filter: none | blur(px) | brightness(%) | contrast(%) | grayscale(%) |

sepia(%) | saturate(%) | invert(%) | drop-shadow(px px px color);

 Example:

css

VerifyRunCopy code

1.overlay {

2 backdrop-filter: blur(5px);

3}

42. Scroll Behavior Property

 scroll-behavior

 Syntax: scroll-behavior: auto | smooth;

 Example:
css

VerifyRunCopy code

1html {

2 scroll-behavior: smooth;

3}

43. Appearance Property

 appearance

 Syntax: appearance: auto | none;

 Example:

css

VerifyRunCopy code

1input {

2 appearance: none;

3}

44. Text Overflow Property

 text-overflow

 Syntax: text-overflow: clip | ellipsis;

 Example:

css

VerifyRunCopy code

1.truncate {

2 white-space: nowrap;

3 overflow: hidden;

4 text-overflow: ellipsis;

5}

45. Shape Outside Property

 shape-outside

 Syntax: shape-outside: shape;

 Example:
css

VerifyRunCopy code

1img {

2 float: left;

3 shape-outside: circle(50%);

4}

46. Content Property

 content

 Syntax: content: "text" | url('image.png') | attr(attribute);

 Example:

css

VerifyRunCopy code

1.quote::before {

2 content: '"';

3}

47. Grid Column and Row Span

 grid-column

 Syntax: grid-column: start / end;

 Example:

css

VerifyRunCopy code

1.item {

2 grid-column: 1 / 3;

3}

 grid-row

 Syntax: grid-row: start / end;

 Example:

css

VerifyRunCopy code
1.item {

2 grid-row: 2 / 4;

3}

48. Text Orientation Property

 text-orientation

 Syntax: text-orientation: mixed | upright | sideways;

 Example:

css

VerifyRunCopy code

1p {

2 text-orientation: upright;

3}

49. List Style Position

 list-style-position

 Syntax: list-style-position: inside | outside;

 Example:

css

VerifyRunCopy code

1ul {

2 list-style-position: inside;

3}

50. Outline Properties

 outline

 Syntax: outline: width style color;

 Example:

css

VerifyRunCopy code

1div {

2 outline: 2px solid red;

3}

Conclusion

This extensive guide covers a wide range of CSS properties, their syntax, and examples, providing a
thorough understanding of how to utilize CSS effectively in web design. Mastery of these properties will
empower you to create sophisticated, responsive, and visually appealing web pages. ### 51. Filter
Effects

 filter

 Syntax: filter: none | blur(px) | brightness(%) | contrast(%) | drop-shadow(px px px

color);

 Example:

css

VerifyRunCopy code

1img {

2 filter: blur(5px);

3}

52. Text Decoration Properties

 text-decoration-color

 Syntax: text-decoration-color: color;

 Example:

css

VerifyRunCopy code

1a {

2 text-decoration-color: red;

3}

 text-decoration-line

 Syntax: text-decoration-line: none | underline | overline | line-through;

 Example:

css

VerifyRunCopy code

1p {
2 text-decoration-line: underline;

3}

 text-decoration-style

 Syntax: text-decoration-style: solid | double | dotted | dashed | wavy;

 Example:

css

VerifyRunCopy code

1h2 {

2 text-decoration: underline wavy blue;

3}

53. Column Fill Property

 column-fill

 Syntax: column-fill: auto | balance;

 Example:

css

VerifyRunCopy code

1.multi-column {

2 column-fill: balance;

3}

54. Grid Template Rows and Columns

 grid-template-rows

 Syntax: grid-template-rows: size;

 Example:

css

VerifyRunCopy code

1.grid-container {

2 grid-template-rows: 100px auto 100px;

3}

 grid-template-columns
  Syntax: grid-template-columns: size;

 Example:

css

VerifyRunCopy code

1.grid-container {

2 grid-template-columns: 1fr 2fr;

3}

55. Text Stroke Property

 text-stroke

 Syntax: text-stroke: width color;

 Example:

css

VerifyRunCopy code

1h1 {

2 text-stroke: 1px black;

3}

56. Animation Delay Property

 animation-delay

 Syntax: animation-delay: time;

 Example:

css

VerifyRunCopy code

1.fade-in {

2 animation: fadeIn 2s;

3 animation-delay: 1s;

4}

57. Animation Iteration Count Property

 animation-iteration-count

 Syntax: animation-iteration-count: number | infinite;

  Example:

css

VerifyRunCopy code

1.bounce {

2 animation: bounce 1s infinite;

3}

58. Animation Direction Property

 animation-direction

 Syntax: animation-direction: normal | reverse | alternate | alternate-reverse;

 Example:

css

VerifyRunCopy code

1.slide {

2 animation: slide 2s alternate;

3}

59. Animation Fill Mode Property

 animation-fill-mode

 Syntax: animation-fill-mode: none | forwards | backwards | both;

 Example:

css

VerifyRunCopy code

1.fade {

2 animation: fade 2s forwards;

3}

60. Animation Play State Property

 animation-play-state

 Syntax: animation-play-state: running | paused;

 Example:

css
VerifyRunCopy code

1.paused {

2 animation-play-state: paused;

3}

61. Overflow Anchor Property

 overflow-anchor

 Syntax: overflow-anchor: auto | none;

 Example:

css

VerifyRunCopy code

1.container {

2 overflow-anchor: none;

3}

62. Scroll Snap Points

 scroll-snap-align

 Syntax: scroll-snap-align: start | end | center;

 Example:

css

VerifyRunCopy code

1.snap-item {

2 scroll-snap-align: start;

3}

63. Scroll Snap Type

 scroll-snap-type

 Syntax: scroll-snap-type: x | y | block | inline | both;

 Example:

css

VerifyRunCopy code

1.scroll-container {
2 scroll-snap-type: y mandatory;

3}

64. Text Overflow Properties

 **overflow - **Syntax**: overflow: visible | hidden | scroll | auto;`

 Example:

css

VerifyRunCopy code

1.content {

2 overflow: hidden;

3}

65. Text Overflow Properties

 text-overflow

 Syntax: text-overflow: clip | ellipsis;

 Example:

css

VerifyRunCopy code

1.truncate {

2 white-space: nowrap;

3 overflow: hidden;

4 text-overflow: ellipsis;

5}

66. Shape Outside Property

 shape-outside

 Syntax: shape-outside: shape;

 Example:

css

VerifyRunCopy code

1img {

2 float: left;
3 shape-outside: circle(50%);

4}

67. Content Property

 content

 Syntax: content: "text" | url('image.png') | attr(attribute);

 Example:

css

VerifyRunCopy code

1.quote::before {

2 content: '"';

3}

68. Grid Column and Row Span

 grid-column

 Syntax: grid-column: start / end;

 Example:

css

VerifyRunCopy code

1.item {

2 grid-column: 1 / 3;

3}

 grid-row

 Syntax: grid-row: start / end;

 Example:

css

VerifyRunCopy code

1.item {

2 grid-row: 2 / 4;

3}

69. Text Orientation Property

  text-orientation

 Syntax: text-orientation: mixed | upright | sideways;

 Example:

css

VerifyRunCopy code

1p {

2 text-orientation: upright;

3}

70. List Style Position

 list-style-position

 Syntax: list-style-position: inside | outside;

 Example:

css

VerifyRunCopy code

1ul {

2 list-style-position: inside;

3}

71. Outline Properties

 outline

 Syntax: outline: width style color;

 Example:

css

VerifyRunCopy code

1div {

2 outline: 2px solid red;

3}

72. Filter Effects

 filter
  Syntax: filter: none | blur(px) | brightness(%) | contrast(%) | drop-shadow(px px px
color);

 Example:

css

VerifyRunCopy code

1img {

2 filter: blur(5px);

3}

73. Text Decoration Properties

 text-decoration-color

 Syntax: text-decoration-color: color;

 Example:

css

VerifyRunCopy code

1a {

2 text-decoration-color: red;

3}

 text-decoration-line

 Syntax: text-decoration-line: none | underline | overline | line-through;

 Example:

css

VerifyRunCopy code

1p {

2 text-decoration-line: underline;

3}

 text-decoration-style

 Syntax: text-decoration-style: solid | double | dotted | dashed | wavy;

 Example:

css
VerifyRunCopy code

1h2 {

2 text-decoration: underline wavy blue;

3}

74. Column Fill Property

 column-fill

 Syntax: column-fill: auto | balance;

 Example:

css

VerifyRunCopy code

1.multi-column {

2 column-fill: balance;

3}

75. Grid Template Rows and Columns

 grid-template-rows

 Syntax: grid-template-rows: size;

 Example:

css

VerifyRunCopy code

1.grid-container {

2 grid-template-rows: 100px auto 100px;

3}

 grid-template-columns

 Syntax: grid-template-columns: size;

 Example:

css

VerifyRunCopy code

1.grid-container {

2 grid-template-columns: 1fr 2fr;

3}

76. Text Stroke Property

 text-stroke

 Syntax: text-stroke: width color;

 Example:

css

VerifyRunCopy code

1h1 {

2 text-stroke: 1px black;

3}

4`` ### 77. **Animation Delay Property**

 animation-delay

 Syntax: animation-delay: time;

 Example:

css

VerifyRunCopy code

1.fade-in {

2 animation: fadeIn 2s;

3 animation-delay: 1s;

4}

78. Animation Iteration Count Property

 animation-iteration-count

 Syntax: animation-iteration-count: number | infinite;

 Example:

css

VerifyRunCopy code

1.bounce {

2 animation: bounce 1s infinite;

3}

79. Animation Direction Property

 animation-direction

 Syntax: animation-direction: normal | reverse | alternate | alternate-reverse;

 Example:

css

VerifyRunCopy code

1.slide {

2 animation: slide 2s alternate;

3}

80. Animation Fill Mode Property

 animation-fill-mode

 Syntax: animation-fill-mode: none | forwards | backwards | both;

 Example:

css

VerifyRunCopy code

1.fade {

2 animation: fade 2s forwards;

3}

81. Animation Play State Property

 animation-play-state

 Syntax: animation-play-state: running | paused;

 Example:

css

VerifyRunCopy code

1.paused {

2 animation-play-state: paused;

3}

82. Overflow Anchor Property

  overflow-anchor

 Syntax: overflow-anchor: auto | none;

 Example:

css

VerifyRunCopy code

1.container {

2 overflow-anchor: none;

3}

83. Scroll Snap Points

 scroll-snap-align

 Syntax: scroll-snap-align: start | end | center;

 Example:

css

VerifyRunCopy code

1.snap-item {

2 scroll-snap-align: start;

3}

84. Scroll Snap Type

 scroll-snap-type

 Syntax: scroll-snap-type: x | y | block | inline | both;

 Example:

css

VerifyRunCopy code

1.scroll-container {

2 scroll-snap-type: y mandatory;

3}

85. Text Overflow Properties

 overflow

 Syntax: overflow: visible | hidden | scroll | auto;

  Example:

css

VerifyRunCopy code

1.content {

2 overflow: hidden;

3}

86. Text Overflow Properties

 text-overflow

 Syntax: text-overflow: clip | ellipsis;

 Example:

css

VerifyRunCopy code

1.truncate {

2 white-space: nowrap;

3 overflow: hidden;

4 text-overflow: ellipsis;

5}

87. Shape Outside Property

 shape-outside

 Syntax: shape-outside: shape;

 Example:

css

VerifyRunCopy code

1img {

2 float: left;

3 shape-outside: circle(50%);

4}

88. Content Property

 content
  Syntax: content: "text" | url('image.png') | attr(attribute);

 Example:

css

VerifyRunCopy code

1.quote::before {

2 content: '"';

3}

89. Grid Column and Row Span

 grid-column

 Syntax: grid-column: start / end;

 Example:

css

VerifyRunCopy code

1.item {

2 grid-column: 1 / 3;

3}

 grid-row

 Syntax: grid-row: start / end;

 Example:

css

VerifyRunCopy code

1.item {

2 grid-row: 2 / 4;

3}

90. Text Orientation Property

 text-orientation

 Syntax: text-orientation: mixed | upright | sideways;

 Example:

css
VerifyRunCopy code

1p {

2 text-orientation: upright;

3}

91. List Style Position

 list-style-position

 Syntax: list-style-position: inside | outside;

 Example:

css

VerifyRunCopy code

1ul {

2 list-style-position: inside;

3}

92. Outline Properties

 Syntax:

css

VerifyRunCopy code

1outline: [outline-width] [outline-style] [outline-color];

 Example:

css

VerifyRunCopy code

1div {

2 outline: 2px solid red;

3}

2. Outline Width

 Syntax:

css

VerifyRunCopy code

1outline-width: thin | medium | thick | length;

  Example:

css

VerifyRunCopy code

1button {

2 outline-width: 3px;

3}

3. Outline Style

 Syntax:

css

VerifyRunCopy code

1outline-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;

 Example:

css

VerifyRunCopy code

1input {

2 outline-style: dashed;

3}

4. Outline Color

 Syntax:

css

VerifyRunCopy code

1outline-color: color | invert;

 Example:

css

VerifyRunCopy code

1a {

2 outline-color: blue;

3}

5. Outline Offset
  Syntax:

css

VerifyRunCopy code

1outline-offset: length;

 Example:

css

VerifyRunCopy code

1div {

2 outline: 2px solid green;

3 outline-offset: 5px; /* Moves the outline away from the element */

4}

Complete Example

Here’s a complete example that combines all the outline properties:

css

VerifyRunCopy code

1.button {

2 outline: 3px solid blue; /* Outline width, style, and color */

3 outline-offset: 4px; /* Space between the outline and the element */

4}