-as of [3 MARCH 2026]-
.
-a [wordpress panel] that lets you add [CSS code] which will override the [current theme]-
.
.
.
.
-THIS SCREEN ALWAYS LOADS WITH “THEME OPTIONS” AS “ACTIVE TAB”-
(YOU CANNOT LINK DIRECTLY TO THE “ADDITIONAL CSS” TAB)
.
-HIT [TAB] x 12-
.
.
-HIT [RETURN] TO OPEN THE SELECTED “ADDITIONAL CSS” TAB-
.
.
.
.
*HITTING [ESCAPE] TAKES YOU TO [PREVIOUS SCREEN]* —>
.
*HIT [RETURN] TO RETURN TO “ADDITIONAL CSS” SCREEN* —>
.
-YOU CAN ACTUALLY JUST USE [RETURN] TO TOGGLE BETWEEN THESE SCREENS-
.
*HIGHLIGHTED LINE* —>
.site-title { text-align: center; }
.
-A [CSS RULE] HAS 2 BASIC “ELEMENTS”-
.
-IT BEGINS WITH A “SELECTOR”-
.site-title
-the starting [period] indicates a “class selector”-
(you can use different “starting characters” to specify “selector type”)
-this is followed by a “declaration block” bounded by “curly braces”-
.
*each “declaration” in the “declaration block” uses this format* —>
property: value;
.
-each “declaration” is considered a “CSS element”-
.
-if a [CSS rule] has 1 “declaration”, it will be contained in a “numbered row”-
(since our first rule only has 1 “declaration”, it occupies “line 1”)
.
*if a [CSS rule] has multiple “declarations”, the “selector” is assigned its own line (followed by the “left curly brace”* —>
.
-each “declaration” is assigned its own line-
-the [right curly brace] appears solo on the final “line” of the “rule”-
.
-you can hit [return] to create “blank lines” to space out your rules-
.
*”selector” text color* —>
.
*”property” text color* —>
.
*”value” text color* —>
.
*you can add “important” tags to “declarations”* —>
.
*”url” text color* —>
.
-[CSS comments] can be added independent of rules-
(they do not affect your site)
(use them as a visual reference while inserting code)
-they are assigned their own line/color-
.
*bounding tags* —>
/* … */
.
.
-WHEN YOU OPEN “ADDITIONAL CSS” TAB, THE [FIRST (EARLIEST) “CSS ELEMENT”] IS AUTOMATICALLY HIGHLIGHTED* —>
.
-THIS “HIGHLIGHT” IS JUST A [VISUAL AID]-
(YOU CAN’T PERFORM “BULK ACTONS” LIKE DELETING THE ENTIRE “ROW” BY PRESSING [DELETE])
(YOU CANNOT “SELECT” MULTIPLE LINES)
.
-TREAT THE [CSS INPUT BOX] AS A [SINGLE DOCUMENT] RATHER THAN A “COLUMN OF ROWS”-
-THE “BLUE BACKDROP” JUST TRANSFERS TO THE “CURRENT LINE” AS A [VISUAL AID]-
-ALTHOUGH YOU CAN [TRIPLE-CLICK] A [ROW] TO SELECT ALL [TEXT] IN THE [ROW]-
(THE SAME WAY YOU CAN [DOUBLE-CLICK] A [WORD] TO SELECT IT)
(A “LINE” IS DEFINED BY THE LENGTH OF THE “ELEMENT” + CAN HAVE MULTIPLE PHYSICAL “ROWS” DEPENDING ON YOUR COLUMN WIDTH)
.
*YOU CAN “LASSO” TEXT BY DRAGGING YOUR [POINTER]* —>
.
*YOU CAN ALSO HOLD DOWN [SHIFT] WHILE PRESSING [UP/DOWN ARROW KEYS] TO SELECT THE [PREVIOUS/NEXT] “ROW” (NOT “LINE”)* —>
.
-HOLD DOWN THE [UP/DOWN ARROW KEY] FOR [CONTINUOUS APPLICATION]–
.
*YOU CAN ALSO HORiZONTALLY SELECT “WORDS” INCREMENTALLY IN A “ROW”* —>
-[SHIFT] + [OPTION] + [LEFT/RIGHT ARROWS]-
.
.
-“PUNCTUATION MARKS” ARE CONSIDERED SEPARATE “WORDS”-
(EVEN IF THERE IS NO SPACE BETWEEN “PUNCTUATION MARK” + “LETTER”)
.
*TO MOVE [CURSOR] TO [PREVIOUS/NEXT] WORD WITHOUT SELECTING THEM* —>
-[OPTION] + [LEFT/RIGHT ARROW KEY]-
.
*TO [SELECT ALL]* —>
-[COMMAND] + [ a ]-
.
*TO MOVE CURSOR TO [START/END] OF [INPUT BOX]* —>
-[COMMAND] + [UP/DOWN ARROW KEY]-
.
*TO MOVE CURSOR TO [START/END] OF [ELEMENT]* —>
-[OPTION] + [UP/DOWN ARROW KEY]-
.
*TO MOVE CURSOR [ABOVE/BELOW] VISIBLE SCREEN* —>
-[fn] + [UP/DOWN ARROW KEY]-
.
*TO SEARCH FOR TEXT WITHIN THE [CSS INPUT BOX]* —>
-[COMMAND] + [ f ]-
.
*WHEN CLICKED INTO A [CSS LINE], HITTING [TAB KEY] INSERTS A [FIXED SPACE]* —>
.
-HITTING [ESCAPE KEY] SHOULD MOVE [CURSOR] OUT OF [INPUT BOX]-
-IF THAT DOESN’T WORK, JUST CLICK ANY SPACE OUTSIDE THE [CSS INPUT BOX]-
.
*TO MOVE CURSOR TO PREVIOUS [SPACE] IN A [LINE]* —>
-[LEFT ARROW] KEY-
.
-HOLD DOWN THE [LEFT ARROW KEY] FOR [CONTINUOUS APPLICATION]–
.
-WHEN YOU REACH THE [BEGINNING] OF A [LINE], PRESSING [LEFT ARROW] MOVES CURSOR TO THE [END] OF “PREVIOUS” (/ “TOP”) LINE-
-WHEN YOU REACH THE “BEGINNING” OF THE “1ST LINE” (IN [TOP LEFT CORNER]), THE [LEFT/UP ARROW KEYS] STOP WORKING-
.
*TO MOVE [CURSOR] TO NEXT [SPACE] IN A [LINE]* —>
-[RIGHT ARROW] KEY-
.
-HOLD DOWN THE [KEY] FOR [CONTINUOUS APPLICATION]–
.
-WHEN YOU REACH THE [END] OF A [LINE], PRESSING [RIGHT ARROW] MOVES CURSOR TO THE [BEGINNING] OF “NEXT” (/ “BOTTOM”) LINE-
-WHEN YOU REACH THE “END” OF THE “LAST LINE” (IN [BOTTOM RIGHT CORNER]), THE [RIGHT/DOWN ARROW KEYS] STOP WORKING-
.
-USE [UP/DOWN ARROW KEYS] TO NAVIGATE [ROWS]-
(WHICH ARE DEFINED BY THE CONSTRAINTS OF THE [COLUMN WIDTH] RATHER THAN THE “CONCLUSION” OF A “CSS ELEMENT”)
(AS EACH “LINE” CONTAINS A “CSS ELEMENT”)
(A “LINE” CAN CONTAIN MULTIPLE “ROWS”)
(WHEN YOU NAVIGATE TO A NEW LINE, IT IS HIGHLIGHTED WITH THE “BLUE BACKDROP”)
.
(WHEN THE CURSOR MOVES TO A SPACE [BEFORE/AFTER] A “CURLY BRACE”, THAT “CURLY BRACE” ALONG WITH ITS PARTNER, IS HIGHLIGHTED)
.
-AS YOU MOVE VERTICALLY WITH [UP/DOWN] ARROWS, THE CURSOR MAINTAINS ITS HORIZONTAL POSITION-
-IF THE [LINE] ENDS BEFORE THAT “HORIZONTAL POSITION”, THE CURSOR MOVES TO THE SPACE AFTER THE LAST [CHARACTER] IN THE [LINE]-
.
-TO PREVENT “CSS ELEMENTS” FROM “TEXT WRAPPING”, YOU WILL NEED TO INCREASE [COLUMN WIDTH]-
(YOU DO NOT NEED TO “CLICK INTO” THE COLUMN FIRST)
.
-AT “MAX ZOOM” (500%), THE [CSS CHARACTERS] BECOME TOO [TALL] + THE [TEXT CONTAINER] DOES NOT ADJUST SIZE-
(SO YOU CAN’T SEE THE FULL CHARACTERS)
.
*[400%] IS THE “SWEET SPOT”* —>
.
*ALTHOUGH SOME “TEXT WRAPPING” MAY PERSIST FOR “LONG ELEMENTS”* —>
(ESPECIALLY IF THEY CONTAIN “LONG WORDS”)
.
-add your own [CSS code] here to customize the [appearance/layout] of your [site]-
.
When using a keyboard to navigate:
In the editing area, the Tab key enters a tab character.
To move away from this area, press the Esc key followed by the Tab key.
Screen reader users: when in forms mode, you may need to press the Esc key twice.
The edit field automatically highlights code syntax. You can disable this in your user profile(opens in a new tab) to work in plain text mode.
.
*USE [GOOGLE SEARCH] “GENERATIVE AI” TO SEARCH FOR “CSS CODE”* —>
.
.
.
*CLICK THIS BUTTON IN [TOP RIGHT CORNER] TO COPY THE “CSS CODE”* —>
.
-NAVIGATE BACK TO “ADDITIONAL CSS” + CLICK AT THE END OF THE LAST “CSS ENTRY” IN THE LIST* —>
.
(your cursor will be blinking at the end of the “code”)
.
-HIT [RETURN] TO START A NEW “CSS ROW”* —>
.
*PASTE THE COPIED “CSS CODE”* —>
[COMMAND] + [ v ]
.
.
(your cursor will be blinking at the end of the “code”)
.
.
developer.wordpress.org
/advanced-administration/wordpress/css/
CSS – Advanced Administration Handbook | Developer.WordPress.org
7-9 minutes
WordPress relies heavily on the presentation styles within CSS.
With the use of Themes, you have an almost infinite choice of layout options.
WordPress Themes make it easy to change your website’s appearance, and open up the field to help you create your own Theme and page layout.
CSS stands for Cascading Style Sheets.
It allows you to store style presentation information (like colors and layout) separate from your HTML structure.
This allows precision control of your website layout and makes your pages faster and easier to update.
This article briefly describes the use of CSS in WordPress, and lists some references for further information.
For information on CSS itself, see Resources for Building on WordPress#CSS
.
WordPress and CSS
WordPress Themes use a combination of
template files,
template tags,
and CSS files to generate your WordPress site’s look.
.
Template Files
Template files are the building blocks which come together to create your site.
In the WordPress Theme structure, the header, sidebar, content, and footer are all contained within individual files.
They join together to create your page.
This allows you to customize the building blocks.
For example, in the default WordPress Theme, the multi-post view found on the front page, category, archives, and search web pages on your site, the sidebar is present.
Click on any post, you will be taken to the single post view and the sidebar will now be gone.
You can choose which parts and pieces appear on your page, and customize them individually, allowing for a different header or sidebar to appear on all pages within a specific category.
And more.
For a more extensive introduction to Templates, see Stepping Into Templates.
.
Template Tags
Template tags are the bits of code which provide instructions and requests for information stored within the WordPress database.
Some of these are highly configurable, allowing you to customize the date, time, lists, and other elements displayed on your website.
You can learn more about template tags in Stepping Into Template Tags
.
Stylesheet
The CSS file is where it all comes together.
On every template file within your site there are HTML elements wrapped around your template tags and content.
In the stylesheet within each Theme are rules to control the design and layout of each HTML element.
Without these instructions, your page would simply look like a long typed page.
With these instructions, you can move the building block structures around, making your header very long and filled with graphics or photographs, or simple and narrow.
Your site can “float” in the middle of the viewer’s screen with space on the left and right, or stretch across the screen, filling the whole page.
Your sidebar can be on the right or left, or even start midway down the page.
How you style your page is up to you.
But the instructions for styling are found in the style.css file within each Theme folder
.
Custom CSS in WordPress
Starting with WordPress 4.7, you can now add custom CSS to your own theme from the Appearance Customize Screen, without the need for additional plugins or directly editing themes and child themes.
Just choose the Additional CSS tab when customizing your current theme to get started!
Any CSS changes you make will appear in the preview, just like other changes made in the customizer,
this means you have time to tweak and perfect the look of your site, without actually changing anything until you are happy with it all!
Keep in mind that the CSS changes are tied in with your theme.
This means that if you change to a new theme, your custom CSS styles will no longer be active
(of course, if you change back to your previous theme, they will once again be there)
.
Why use Custom CSS?
There are a few reasons why:
If you modify a theme directly and it is updated, then your modifications may be lost.
By using Custom CSS you will ensure that your modifications are preserved.
Using Custom CSS can speed up development time.
Custom CSS is loaded after the theme’s original CSS and thus allows overriding specific CSS statements, without having to write an entire CSS set from scratch.
WordPress Generated Classes
Several classes for aligning images and block elements (div, p, table etc.) were introduced in WordPress 2.5: aligncenter, alignleft and alignright.
In addition the class alignnone is added to images that are not aligned, so they can be styled differently if needed.
The same classes are used to align images that have a caption (as of WordPress 2.6).
Three additional CSS classes are needed for the captions, and one more for accessibility.
Together, the classes are:
/* WordPress Core
————————————————————– */
.alignnone {
margin: 5px 20px 20px 0;
}
.aligncenter,
div.aligncenter {
display: block;
margin: 5px auto 5px auto;
}
.alignright {
float:right;
margin: 5px 0 20px 20px;
}
.alignleft {
float: left;
margin: 5px 20px 20px 0;
}
a img.alignright {
float: right;
margin: 5px 0 20px 20px;
}
a img.alignnone {
margin: 5px 20px 20px 0;
}
a img.alignleft {
float: left;
margin: 5px 20px 20px 0;
}
a img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.wp-caption {
background: #fff;
border: 1px solid #f0f0f0;
max-width: 96%; /* Image does not overflow the content area */
padding: 5px 3px 10px;
text-align: center;
}
.wp-caption.alignnone {
margin: 5px 20px 20px 0;
}
.wp-caption.alignleft {
margin: 5px 20px 20px 0;
}
.wp-caption.alignright {
margin: 5px 0 20px 20px;
}
.wp-caption img {
border: 0 none;
height: auto;
margin: 0;
max-width: 98.5%;
padding: 0;
width: auto;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
margin: 0;
padding: 0 4px 5px;
}
/* Text meant only for screen readers. / .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 !important; width: 1px; word-wrap: normal !important; / Many screen reader and browser combinations announce broken words as they would appear visually. */
}
.screen-reader-text:focus {
background-color: #eee;
clip: auto !important;
clip-path: none;
color: #444;
display: block;
font-size: 1em;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000;
/* Above WP toolbar. */
}
Each Theme should have these or similar styles in its style.css file to be able to display images and captions properly.
The exact HTML elements and class and ID values will depend on the structure of the Theme you are using
.
Templates and CSS
To help you understand more about how CSS works in relationship to your web page, you may wish to read some of the articles cited in these lists:
Using Themes –
There are also many advanced articles in this list
.
Templates –
Comprehensive list of WordPress Theme and Template articles
.
Theme Development –
WordPress Theme Development guide and code standards
.
WordPress Layout Help
If you are having some problems or questions about your WordPress Theme or layout, begin by checking the website of the Theme author to see if there is an upgrade or whether there are answers to your questions
,
Here are some other resources:
Lessons on Designing Your WordPress Site
Site Design and Layout – Comprehensive list of resources related to site design in WordPress.
FAQ Layout and Design
CSS Resources
Finding Your CSS Styles
CSS Troubleshooting
CSS Fixing Browser Bugs
CSS Coding Standards
CSS Shorthand
Resources for Building on WordPress#CSS
Conditional Comment CSS
Validating a Website
Previous Chapter
Next Chapter
.
-as of [3 MARCH 2026]-
.
.
*👨🔬🕵️♀️🙇♀️*SKETCHES*🙇♂️👩🔬🕵️♂️*
.
.
👈👈👈☜*-CUSTOMIZE [WORDPRESS SITE APPEARANCE]-* ☞ 👉👉👉
.
.
💕💝💖💓🖤💙🖤💙🖤💙🖤❤️💚💛🧡❣️💞💔💘❣️🧡💛💚❤️🖤💜🖤💙🖤💙🖤💗💖💝💘
.
.
*🌈✨ *TABLE OF CONTENTS* ✨🌷*
.
.
🔥🔥🔥🔥🔥🔥*we won the war* 🔥🔥🔥🔥🔥🔥