HTML CSS SQL Meta tag Generator ScrollBar design Generator Encode Decode images

CSS Basics

Introduction Syntax Selectors Attribute Selectors Specificity Combinators !important Comments Colors

CSS Need to Know

Box Model Pseudo-class Pseudo-element Inline-block Math Functions Max and Min Opacity Outline Overflow Z-index Float

Most used

Align Backgrounds Borders Text Units Padding Margins Position Tables Display Fonts Lists Height and Width

CSS Reference

CSS Properties reference

CSS Properties

@charset @font-face @import @keyframes @media accent-color align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function aspect-ratio backdrop-filter backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position-x background-position-y background-position background-repeat background-size block-size border border-block-color border-block-end-color border-block-end-style border-block-end-width border-block-end border-block-start-color border-block-start-style border-block-start-width border-block-start border-block-style border-block-width border-block border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-bottom border-collapse border-color border-end-end-radius border-end-start-radius border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-image border-inline-color border-inline-end-color border-inline-end-style border-inline-end-width border-inline-end border-inline-start-color border-inline-start-style border-inline-start-width border-inline-start border-inline-style border-inline-width border-inline border-left-color border-left-style border-left-width border-left border-radius border-right-color border-right-style border-right-width border-right border-spacing border-start-end-radius border-start-start-radius border-style border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-top border-width bottom box-decoration-break box-reflect box-shadow box-sizing break-after break-before break-inside caption-side caret-color clear clip-path clip color color-scheme columns column-count column-fill column-gap column-rule-color column-rule-style column-rule-width column-rule column-span column-width content counter-increment counter-reset counter-set cursor direction display empty-cells filter flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap flex float font font-family font-feature-settings font-kerning font-size-adjust font-size font-stretch font-style font-variant-caps font-variant font-weight gap grid grid-area grid-auto-columns grid-auto-flow grid-auto-rows grid-column-end grid-column-start grid-column grid-row-end grid-row-start grid-row grid-template-areas grid-template-columns grid-template-rows grid-template hanging-punctuation height hyphenate-character hyphens image-rendering initial-letter inline-size inset inset-block-end inset-block-start inset-block inset-inline-end inset-inline-start inset-inline isolation justify-content justify-items justify-self left letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-block-end margin-block-start margin-block margin-bottom margin-inline-end margin-inline-start margin-inline margin-left margin-right margin-top marker marker-end marker-mid marker-start mask mask-clip mask-composite mask-image mask-mode mask-origin mask-position mask-repeat mask-size mask-type max-block-size max-height max-inline-size max-width min-block-size min-height min-inline-size min-width mix-blend-mode object-fit object-position offset offset-anchor offset-distance offset-path offset-position offset-rotate opacity order orphans outline outline-color outline-offset outline-style outline-width overflow overflow-anchor overflow-wrap overflow-x overflow-y overscroll-behavior overscroll-behavior-block overscroll-behavior-inline overscroll-behavior-x overscroll-behavior-y padding-block padding-block-end padding-block-start padding-bottom padding-inline-end padding-inline-start padding-inline padding-left padding-right padding-top padding page-break-after page-break-before page-break-inside paint-order perspective-origin perspective place-content place-items place-self pointer-events position Properties_introduction quotes resize right rotate row-gap scale scroll-behavior scroll-margin scroll-margin-block-end scroll-margin-block-start scroll-margin-block scroll-margin-bottom scroll-margin-inline-end scroll-margin-inline-start scroll-margin-inline scroll-margin-left scroll-margin-right scroll-margin-top scroll-padding scroll-padding-block-end scroll-padding-block-start scroll-padding-block scroll-padding-bottom scroll-padding-inline-end scroll-padding-inline-start scroll-padding-inline scroll-padding-left scroll-padding-right scroll-padding-top scroll-snap-align scroll-snap-stop scroll-snap-type scrollbar-color tab-size table-layout text-align text-align-last text-decoration text-decoration-color text-decoration-line text-decoration-style text-decoration-thickness text-emphasis-color text-emphasis-position text-emphasis-style text-emphasis text-indent text-justify text-orientation text-overflow text-shadow text-transform text-underline-offset text-underline-position top transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function translate unicode-bidi user-select vertical-align visibility white-space widows width word-break word-spacing word-wrap writing-mode z-index zoom
CSS Pseudo-Classes reference CSS Pseudo-Elements reference CSS Selector reference

Pseudo Classes

active any-link autofill blank_ checked current default defined dir disabled empty enabled first-child first-of-type focus-visible focus-within focus fullscreen future has host-context host hover in-range indeterminate invalid is lang last-child last-of-type left link local-link modal not nth-child nth-last-child nth-last-of-type nth-of-type only-child only-of-type optional out-of-range paused picture-in-picture placeholder-shown playing read-only read-write required root scope target-within target user-invalid valid visited where

Pseudo-Element

after before first-letter first-line

CSS column-count

The column-count property in CSS is used to specify the number of columns an element should be divided into. This can be useful for creating newspaper-style layouts or multi-column text content.

Let's take a look at how the column-count property works with some examples:

Result: 

    /* CSS */
    .columns {
      column-count: 3;
    }

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras gravida ultrices justo, at eleifend mauris convallis vel. Sed et dolor metus. Aliquam sagittis, urna quis convallis bibendum, turpis quam scelerisque ligula, at tristique lorem diam in leo. Nullam rutrum urna quis scelerisque hendrerit. Integer pretium justo dolor, sit amet hendrerit purus condimentum sed. In hac habitasse platea dictumst.

In the example above, we have created a div element with the class "columns" and set the column-count property to 3. This will divide the content within the div into 3 columns.

Here is another example with a larger number of columns:

Result: 

    /* CSS */
    .more-columns {
      column-count: 5;
    }

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

With the column-count property set to 5 in this example, the content within the div with the class "more-columns" will be divided into 5 columns.

Experiment with different values for the column-count property to achieve the desired layout for your content.

.bambis-mom {
   cursor: crosshair;
   orphans: 1;
}