WordPress adds a set of classes to content, images and editor blocks. A good theme styles them, otherwise alignment, captions and accessibility features can break.

Image alignment classes

.alignleft {
    float: left;
    margin: 0 20px 20px 0;
}

.alignright {
    float: right;
    margin: 0 0 20px 20px;
}

.aligncenter {
    display: block;
    margin: 0 auto 20px;
}

Wide and full width blocks

These classes are used by the block editor when the theme supports align-wide.

.alignwide {
    max-width: 1200px;
    margin-inline: auto;
}

.alignfull {
    width: 100vw;
    margin-left: calc( 50% - 50vw );
}

Captions

.wp-caption {
    max-width: 100%;
}

.wp-caption-text,
.wp-element-caption {
    font-size: 0.875rem;
    color: #666;
    text-align: center;
}

Screen reader text

Hides content visually but keeps it available to screen readers. WordPress and many plugins rely on this class.

.screen-reader-text {
    border: 0;
    clip: rect( 1px, 1px, 1px, 1px );
    clip-path: inset( 50% );
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal;
}

.screen-reader-text:focus {
    background: #fff;
    clip: auto;
    clip-path: none;
    height: auto;
    width: auto;
    padding: 10px 16px;
    z-index: 100000;
}

Other classes WordPress generates

• .sticky: posts marked as sticky.
• .bypostauthor: comments written by the post author.
• .gallery-caption: captions inside classic galleries.
• .current-menu-item: the active item of a navigation menu.
• .current-menu-ancestor: parent items of the active menu item.
• .admin-bar: added to the body when the admin bar is visible.
• .wp-block-image, .wp-block-button, .wp-block-group: wrappers of core blocks.

Style the active menu item

.menu .current-menu-item > a {
    color: orangered;
    font-weight: bold;
}