Custom CSS in WordPress: How to Add, Edit and Customize CSS Styles

What is CSS? Can you use CSS in WordPress? What is the best way to add custom CSS in WordPress? And how can you learn CSS if you have never used it before?

These are all questions I will answer in this article, so stick around to find out everything you need to know about using CSS in WordPress.

What is CSS?

CSS stands for Cascading Style Sheets. If you’ve never come across those words before, they might not mean much to you. Let’s take a step back for a moment and briefly talk about HTML.

So, HTML stands for Hypertext Markup Language and is the primary language used to create all websites. HTML code tells your web browser about the content in a webpage, such as the text, headings, images, and links.

You can view the HTML code of any webpage by right-clicking it and selecting View page source.

view page source

If you want to edit some HTML code on your WordPress website, open up a page or post in the Gutenberg editor, and click the Text tab.

enable code mode in gutenberg editor

You can add some styling directly to the HTML code. For example, you can center a heading, make it bold and give it a different font. However, this is an inefficient way to style webpages as it means you have to manually edit the HTML code for all pages you want to have that style.

This is where Cascading Style Sheets (CSS) save the day. Adding CSS code for any styles you want to apply to your pages can save you a lot of time. For example, you can have CSS code that determines how all headings appear on all pages without adding that styling code to all pages separately.

You can do this for any aspect of the appearance of your website. And the great thing is, if you later want to change the appearance of your whole website dramatically, you can do it all within the CSS code without editing the HTML code of all the different web pages.

Do I Need to Use CSS in WordPress?

One of the greatest things about WordPress is that it’s possible to have an awesome-looking website up and running without touching any code. There are so many great-looking WordPress themes available these days that look amazing with little work from you. And these themes often come with customization options you can change without modifying any code.

That being said, it’s still worth understanding CSS in case you ever want to customize the appearance of your site beyond the standard customization options.

How to Add Custom CSS in WordPress

It is possible to edit your WordPress site’s CSS file directly. However, I would strongly advise against this for two reasons:

  1. If you make a mistake, you could mess up the appearance of your website.
  2. When you later update your WordPress theme, you will lose your custom CSS code.

There is an easy way around this, though: install a plugin called Simple Custom CSS and JS. To install this, go to Plugins > Add New and search for “Simple Custom CSS and JS.” Next, click Install and then Activate.

simple custom css wordpress plugin

Once you have installed the plugin, you will see a menu in your WordPress dashboard called Custom CSS & JS. Select that menu and then click Add CSS Code.

add css code with the plugin

The brown text you see here is a comment for your information. In CSS code, comments start with /* and end with */.

You can put your custom CSS code beneath that comment, then click Publish when you have finished.

To find CSS code you can use, go to the CSS section of There, you can find some example code to copy and then modify.

For example, here is some code that makes the background light blue. The CSS code is just the bit that I have highlighted. The rest of the code is HTML.

lightblue css example in the w3school editor

You might also be interested in our CSS Hero WordPress Plugin Review. 👍

Adding Custom CSS in WordPress: a Demonstration

Here is an example blog post displayed using our Kava theme:

blog post example in kava theme

I am now going to put in the following custom CSS code:

  color: purple;

This makes the heading purple:

This code will make all h2 headings purple across the whole website. But if I wanted to be more specific with the color, I could use a hex code instead of the word purple. For example, if I use code #9C33FF, you can see how it has changed slightly different shades of purple.

Let’s say I want to change the main text’s font. I could use CSS code like this:

  font-family: Georgia;
  font-size: 20px;

The p here stands for paragraph, and it means that all paragraph text will have the font Georgia at size 20. Here it is:

css code in heading example

Okay, so I admit it’s not the most wonderful-looking website you’ve ever seen. But this demonstrates the basics of how CSS code can change the appearance of different website elements.

How to Learn CSS Code

HTML and CSS go together, so if you want to learn CSS, it’s worth learning HTML as well. If you like to learn by video, the YouTube channel Programming with Mosh has a 1-hour video introducing you to HTML and CSS. You can follow along with him and try out the code for yourself along the way.

If you want step-by-step written lessons, it’s worth checking out freeCodeCamp. As the name suggests, all the courses on their site are completely free. But that doesn’t mean they are not excellent quality.

Their Responsive Web Design Certification contains a whole series of courses from complete beginner to advanced. You don’t necessarily have to do all of them. You could start by going through the first few courses and see how you get on. Then you can stop once you feel like you have enough of a grasp of the basics to get by.

I have completed the first four courses, which are:

  • Learn HTML by building a Cat Photo App
  • Learn Basic CSS by Building a Cafe Menu
  • Learn CSS Color by Building a Set of Colored Markers
  • Learn HTML Forms by Building a Registration Form

What I like about freeCodeCamp is how step-by-step it is. Each course is broken down into tiny steps with short written instructions. You can edit your code within the lesson area and see the results on the preview pane on the right. And if your code is wrong, it tells you and will only let you move on to the next lesson once your code is correct.

However, if you prefer video lessons and don’t mind paying a small fee, it’s worth looking at Udemy. They have courses on all topics, including coding, and you can see each course’s average rating.

udemy courses

For example, take a look at the course CSS – The Complete Guide 2023 (incl. Flexbox, Grid & Sass):

  • It has an average rating of 4.7 out of 5 stars from over 15,000 ratings.
  • Over 85,000 students have done the course.
  • It has over 22 hours of video lessons, 303 downloadable resources, and 31 articles.
  • It contains assignments, and you get a certificate upon completion.

But if you want a video course nearly as thorough as that for free, freeCodeCamp has an 11-hour CSS course on YouTube:

So, there you go. I’ve given you four ways to learn CSS code, three of which are free. 😀

➡You might also want to look at our Top 23 Online Tools to Learn Coding and Improve Programming Skills. 👍


In this article, I have given an overview of CSS in WordPress. Here is a summary of the main points I have covered:

  • CSS stands for Custom Style Sheets and determines the appearance and layout of your website.
  • If you use WordPress, it’s not essential to know CSS code. However, it’s still worth learning CSS, just in case.
  • The easiest way to add custom CSS code to your WordPress website is with the Simple Custom CSS and JS plugin.
  • If you want to find some CSS code for your WordPress site quickly, go to the CSS section of
  • If you want to learn CSS code, there are various places to learn it, both free and paid. I recommend starting with the video from Programming with Mosh and then looking at

58 thoughts on “Custom CSS in WordPress: How to Add, Edit and Customize CSS Styles

  • JoeMaf

    [url=]voltaren gel purchase canada[/url] [url=]cymbalta mexico[/url] [url=]canadianpharmacymeds com[/url] [url=]propecia usa buy[/url]

  • DarrylNar

    [url=]bactrim 160[/url] [url=]buy fluoxetine online mexico[/url] [url=]diclofenac gel costs[/url] [url=]paxil for menopause[/url] [url=]mexican pharmacy[/url] [url=]viagra 100 price india[/url] [url=]levitra in usa[/url]

  • Mounc

    Отправить сообщениеОбратный звонок Масло усьмы можно применять для любой, даже чувствительной кожи. В его состав входят природные консерванты и гипоаллергены, что делает средство безопасным практически для всех людей. Непереносимость компонентов встречается крайне редко. На просторах сети множество положительных отзывов о свойствах масла усьмы для ухода за бровями. Больше всего женщинам нравится быстрое укрепление волосяных луковиц — волоски становятся толще от самых корней по всей длине в среднем за 2 недели. Кроме того, отмечают постепенное увеличение густоты бровей, что очень радует тех, кто задался целью отрастить их.
    Что такое химическая завивка волос. Понимание процесса химической завивки даст в руки козыри и позволит не бояться за свою шевелюру. Служба доставки Как и другие части лица и тела, брови требуют ежедневного ухода. Важным элементом является расчесывание бровей, причем делать эту процедуру нужно каждый день, лучше щеточкой, смазанной в специальном средстве для бровей или любом масле: оливковом, касторовом, или в глицерине. Щеточку можно выбрать любую, или купить карандаш со щеточкой на конце.

  • Vacnesadave

    Широкоформатная печать баннеров баннер-москва.рф

    Первый печатный дискаунтер LowCostPrint промышляет широкоформатной и интерьерной печатью в Москве по самым низким ценам. Если Вам нужен рекламный баннер, постпечатная обработка, интерьерная печать, то Вы пришли по нужному адресу. Обращайтесь к нашим специалистам за помощью и мы обязательно подскажем, что Вам лучше приобрести, рассчитаем стоимость, сделаем доставку на самых лучших условиях и в быстрые сроки.

    По вопросу [url=https://xn—-7sbbbhq0bpgaovq.xn--p1ai/mobilnye-stendy/pop-up]поп ап купить в москве[/url] переходите на данный веб портал баннер-москва.рф уже сейчас. Мы обладаем собственным оборудованием для вполне любой печати высшего качества. Также имеем вероятность сотрудничества с зарубежными поставщиками и производителями. Осуществляем работу на самых новых инновационных принтерах, которые могут выполнить печать любых габаритов и любого разрешения. Все плюсы прилагают низкие расценки, которых Вы не сможете найти нигде.

    Дата изготовления напрямую зависит от Вашего заказа – размера печати, формата, постпечатной обработки и других. Но в среднем сроки не превышают пару дней на изготовление, что является просто мгновенным. Многие выполняют свои работы недели или даже месяцы, а мы осилим в разы быстрее.

    Наши выполненные изделия можно увидеть в альбоме на интернет ресурсе баннер-москва.рф или на улицах города Москва. Некоторые, смотря наши баннеры удивляются сочетанию отличного качества и невысокой цены, считая это невозможным. Яркие профессиональные краски, отсутствие полос и других дефектов, всё это про наши работы. Звоните, заказывайте и удостоверьтесь в этом самостоятельно.

    Узнать про [url=https://xn—-7sbbbhq0bpgaovq.xn--p1ai/pechat-bannerov]цена баннер[/url] можно различными способами. Изначально, на данном сайте мы выложили много важной информации о нашей компании. Позвоните по контактному телефону +7(499)390-19-73 и мы дадим ответы на все Ваши вопросы. Также можно заказать обратный звонок и мы сами Вам наберем. Компания находится по адресу: г. Москва, Нагорный проезд, д. 7, стр. 1. График работы с понедельника по пятницу с 10:00 до 18:00.

    Оформить заказ очень легко. Можно прямо на сайте, по контактному телефону или написать нам на электронную почту. Специалист Вам расскажет все, что необходимо, посчитает цену и можно переходить к оплате. Оплата может быть различными, удобными Вам способами – расчетный счет, яндекс деньги или электронный кошелек. Далее необходимо прислать Ваш макет для печати, либо наш дизайнер его создаст лично. Заказ идет на производство, проходит постпечатную обработку и пробитие люверсов. И финал, можно приехать и забирать, либо оформить доставку до квартиры. Быстро, профессионально, недорого – мы ждем конкретно Ваш заказ.

  • RicPhard

    [url=]acyclovir discount coupon[/url] [url=]furosemide tab 40mg[/url] [url=]kamagra oral jelly price in bangkok[/url] [url=]your pharmacy online[/url] [url=]zestril 10 mg in india[/url]

  • Alicejem

    Согласен, эта блестящая мысль придется как раз кстати
    [url=]виртуальный номер для вк[/url] телефакс.

  • EyeMaf

    [url=]voltaren gel india buy online[/url] [url=]best price cafergot[/url] [url=]can you buy strattera online[/url] [url=]finasteride tablet online[/url] [url=]medication gabapentin 600 mg[/url] [url=]acyclovir online uk[/url]

  • vegas238

    I’ve been surfing online more than 2 hours today, yet I
    never found any interesting article like yours.

    It’s pretty worth enough for me. Personally, if all web
    owners and bloggers made good content as you did, the web will be a lot more useful than ever before.

  • JamesKig

    Everything about medicine. Some trends of drugs.
    [url=]zithromax 500[/url]
    Best and news about drug. Get information now.

  • DennisWal

    Top 100 Searched Drugs. Some are medicines that help people when doctors prescribe.
    [url=]where to buy clomid no prescription[/url]
    Read now. Comprehensive side effect and adverse reaction information.

  • Gerbikaadave

    Рекламный баннер Москва баннер-москва.рф

    Организация LowCostPrint занимается широкоформатной и интерьерной печатью в Москве по самым низким ценам. Если Вам требуется мобильный стенд, фальшфасад, печать на самоклейке, то Вы пришли по нужному адресу. Обращайтесь к нашим специалистам за помощью и мы непременно подскажем, что Вам лучше заказать, рассчитаем стоимость, сделаем доставку на самых выгодных условиях и в сжатые сроки.

    По запросу [url=https://xn—-7sbbbhq0bpgaovq.xn--p1ai/mobilnye-stendy/pop-up]поп ап 3х3[/url] заходите на следующий веб ресурс баннер-москва.рф уже сегодня. Мы имеем собственное оборудование для вполне любой печати высшего качества. Также имеем вероятность сотрудничества с зарубежными поставщиками и компаниями производствами напрямую. Проделываем работу на самых новых современных принтерах, которые могут сделать печать любых габаритов и любого формата. Все плюсы дополняют низкие расценки, которых Вы не сможете найти нигде.

    Дата печати напрямую зависит от Вашего заказа – объема печати, разрешения, постпечатной обработки и других. Но в среднем сроки не превышают пару дней на изготовление, что является просто скоростным. Многие выполняют свои работы недели или даже месяцы, а мы осилим в разы скорее.

    Наши выполненные изделия можно посмотреть в альбоме на веб портале баннер-москва.рф или на просторах города Москва. Некоторые, видя наши работы удивляются соединению высшего качества и маленькой цены, считая это невозможным. Яркие качественные краски, отсутствие размытости и других недостатков, всё это про наши заказы. Звоните, заказывайте и удостоверьтесь в этом самостоятельно.

    Узнать про [url=https://xn—-7sbbbhq0bpgaovq.xn--p1ai/mobilnye-stendy]мобильные стенды москва[/url] возможно разными способами. Для начала, на указанном сайте мы разместили много важной информации о нашей фирме. Позвоните по телефону +7(499)390-19-73 и мы дадим ответы на любые Ваши вопросы. Ещё можно оформить обратный звонок и мы сами Вам перезвоним. Компания находится по адресу: г. Москва, Нагорный проезд, д. 7, стр. 1. Режим работы понедельник – пятница с 10:00 до 18:00.

    Оформить заказ очень легко. Можно прямо на сайте, по номеру или написать нам на электронный адрес. Специалист Вам расскажет все, что понадобится, посчитает цену и можно переходить к оплате. Оплата может быть различными, удобными Вам способами – Сбербанк карта, яндекс деньги или Киви кошелек. Далее необходимо отправить Ваш макет для печати, либо наш дизайнер его создаст самостоятельно. Заказ идет на производство, проходит постпечатную обработку и пробитие люверсов. И финал, можно приехать и забирать, либо доставка до Вашей двери уже спешит к Вам. Быстро, качественно, недорого – мы ждем именно Ваш заказ.

  • Stephanieduh

    какоето оно
    regarding [url=]fake new citizenship papers[/url] I implore you to visit the

  • Scottsmefe

    good worth.|Married [url=][/url] With two kids. Married with two kids. Married with one child.

  • Andreasews

    Доброго времени суток друзья!
    Предлагаем Вашему вниманию интересный сайт для заказа бурения скважин на воду. Бурение скважин в Минске – полный комплекс качественных и разумных по цене услуг. Мы бурим любые виды скважин.У нас доступная ценовая политика, рассрочка на услуги и оборудование.Заказывайте скважину для воды – получите доступ к экологически чистой природной воде по самым выгодным в Минске ценам! Наша сфера деятельности — проектирование и бурение скважин на воду, установка любого насосного оборудования, монтаж систем канализации всех видов, дренажей, ливневых систем и др.Миссия компании: мы добываем чистую воду – источник всего живого на Земле, и делаем ее доступной людям. Самый короткий срок, за который мы пробурили и обустроили скважину, — 1 час 36 минут. Мы ценим время своих клиентов и гордимся, что оперативность — отличительное свойство наших услуг. Мы показываем, насколько быстро и качественно может происходить бурение скважины.
    От всей души Вам всех благ!

  • AlanMaf

    [url=]furosemide 200 mg[/url] [url=]how to order misoprostol online[/url] [url=]generic vardenafil uk[/url] [url=]terramycin for humans[/url] [url=]wellbutrin 37.5 mg[/url] [url=]neurontin rx[/url] [url=]finasteride 5mg price[/url]

  • KathrynHaime

    Приглашаем Ваше предприятие к взаимовыгодному сотрудничеству в сфере производства и поставки [url=] 47РќРљ [/url] и изделий из него.

    – Поставка порошков, и оксидов
    – Поставка изделий производственно-технического назначения (блины).
    – Любые типоразмеры, изготовление по чертежам и спецификациям заказчика.

    [url= ][img][/img][/url]


  • Davidliamn

    Medscape Drugs & Diseases. Get here. [url=]amoxicillin 500mg price canada[/url]
    Read information now. Get information now.

  • Anacew

    Хорошее дело!
    pled {guilty|responsible} and was sentenced to {around|round} 14 years in custody, {[url=]fake residence permit[/url]|[url=]buy fake residence permit[/url]|[url=]fake residence permit card[/url]|[url=]passport scam[/url]|[url=]how to buy fake citizenship[/url]|[url=]fake second citizenship[/url]|[url=]buy fake passports[/url]|[url=]fake immigration citizenship lawyer[/url]|[url=]buy fake passport online[/url]|[url=]buy driver license[/url]} {Five|5} years of supervised {release|launch} and {financial|monetary} restitution. Kornegay {previously|pled {guilty|responsible} and was

  • AndyMig

    Извиняюсь, есть предложение пойти по другому пути.
    [url=]работа в такси[/url].

  • slot gacor

    This is really attention-grabbing, You are a very skilled
    blogger. I have joined your feed and look forward to looking for extra
    of your great post. Additionally, I have shared your website in my social networks

  • situs slot gacor tanpa potongan pulsa

    Hey just wanted to give you a quick heads up and let you know
    a few of the images aren’t loading correctly.
    I’m not sure why but I think its a linking issue. I’ve tried it in two different web browsers and both show the same outcome.

  • porno izləmək

    You’re so interesting! I don’t suppose I’ve truly read a single thing like that before.
    So wonderful to find somebody with unique thoughts on this topic.
    Really.. many thanks for starting this up. This
    web site is something that is required on the internet, someone with
    a bit of originality!

  • twels

    MENГњ SCHLIESSEN Superzahl: 6 Je nach richtig getippten Zahlen beziehungsweise korrekter Superzahl ergeben sich insgesamt neun Gewinnklassen. FГјr einen Gewinn mГјssen mindestens zwei Nummern richtig getippt sowie die Superzahl korrekt sein. Weitere Informationen zur Ziehung und zu den Gewinnerinnen und Gewinnern findest du auf Hier bekommen Sie jede Woche nicht nur die Lottozahlen vom Mittwoch, sondern auch die Zahlen der Zusatzlotterien Spiel 77 und Super 6. Die Gewinnzahlen beim Lotto am Mittwoch werden immer gegen 18.30 Uhr gezogen. Lottozahlen: 1 / 2 / 10 / 32 / 42 / 43 Die EuroJackpot Zahlen werden immer dienstags und freitags gegen 20:30 Uhr verГ¶ffentlicht. Die Gewinnquoten werden am selben Abend bekannt gegeben. Auch hier auf unserer Seite findest du dann immer die aktuellen Eurolottozahlen.
    Das Willkommenspaket wird auf Ihre ersten drei Einzahlungen aufgeteilt. Das Casino mit dem besten Ersteinzahlungsbonusbietet Ihnen einen Bonus von 200% bis zu 200€. Außerdem erhalten Sie fünfzig Freispiele. Ihre zweite Einzahlung wird mit 50% bis zu einem Höchstbetrag von 200 € verdoppelt. Der letzte Teil des Willkommenspakets bietet Ihnen einen 125%igen Bonus bis zu unglaublichen 500 € und fünfzig Freispiele. Das Online Casino bietet den treuesten Mitgliedern einen exklusiven VIP-Pass. Dieser gibt dem 888 VIP Casino Club Mitglied, Zugriff auf alle drei Seiten der 888-Marken. Also nicht nur auf 888casino, sondern auch auf 888games und auf 777. Mit der einzigartigen Mitgliedschaft kommt man in den Genuss von aufregenden Gastfreundschaftsevents. Auch spezielle Aktionen, die auf den Spieler zugeschnitten sind, werden geboten. Es gibt Гјppigen Preise, Geld-Boni und FreePay Gutscheine zu gewinnen.

  • gesee

    Please Choose an amount (78+3, 148+3) when purchasing a Gift Certificate for Promo Price From refreshing facials treatments to full body waxing, our services will leave you feeling invigorated. Our licensed independent professionals will listen and customize your service to meet your needs. We understand that each individual has a complex set of needs. Thus, each session is customized to enhance your experience and optimize every aspect of your wellness – mind, body and spirit! Every member of our staff is trained to connect your wellness goals with your services. We provide you with an arsenal of self-care strategies to ensure that your Zama experience doesn’t end when you walk out of our door. Our services include day spa, Korean spa, couple massages, and the best facials in Houston. Our luxury spa in Houston is one of a kind, with a myriad of services ranging from dining to play areas for children and more.
    This Limitless lash lengthening mascara belongs to the award-winning clean curation brands on Sephora. It is made with beeswax and shea butter which accounts for its flexibility and hold. Marc Jacobs Beauty’s At Lash’d Lifting & Volumizing Mascara delivers instant length and curl, plus ultra-defined volume with lash conditioners Biotin Peptide and Provitamin B5. The vegan smudge-resistant formula is lightweight and buildable without making lashes look crunchy or clumpy. The wavy-bristled wand was designed to evenly coat every lash for flawless application. Today, we are looking at the best mascaras you can get from the Sephora store right now without getting disappointed. These are the ones that we have used and keep going back for some more. Check out the recommendations below.

  • acige

    Dazn in una nota esprime il rammarico per quanto accaduto durante la fruizione delle partite spiegando che \\\”è avvenuto un disservizio tecnico causato da un partner esterno globale, incaricato di gestire la distribuzione del traffico sui server (CDN) utilizzati da Dazn. Riteniamo innanzitutto doveroso – prosegue l’azienda – scusarci con i clienti impattati che provvederemo a rimborsare proattivamente in conformità alla regolamentazione vigente\\\”.  Domenica 8 12.30 Salernitana-Torino 1-1 15.00 Lazio-Empoli 2-2 Spezia-Lecce 0-0 18.00 Sampdoria-Napoli 0-2 20.45 Milan-Roma 2-2 SABATO 14 MAGGIO Vi autorizzo alla lettura dei miei dat idi navigazioneper effetuare attività di analisi e profilazione per migliorare l’offerta e i servizi del sito in linea con le mie preferenze e i miei interessi.
    SEGUI PAOLINI-COCCIARETTO SU DIRETTA ITF Women In chiusura il doppio misto. Le dichiarazioni del centrocampista bianconero In chiusura il doppio misto. Incertezza sul destino dell’azzurro, anche Mourinho dice la sua PAOLINI-COCCIARETTO STREAMING GRATIS- L’incontro tra Jasmine Paolini ed Elisabetta Cocciaretto, valido per gli ottavi di finale del WTA di Hobart, si disputerà mercoledì 11 gennaio non prima delle ore 01:00 italiane. Il match sarà trasmesso in diretta tv su SuperTennis (canale 64 del digitale terrestre e 212 di Sky), inoltre sarà possibile seguirlo in streaming sul sito della medesima emittente, sulla piattaforma SuperTennix – abbonamento gratuito se tesserati FIT – e sull’app Sky Go. In chiusura il doppio misto. Tra il 20enne di Carrara ed il 18enne di Atene non c’erano precedenti. Il greco ha iniziato piuttosto baldanzoso, procurandosi subito una palla-break nel game d’avvio: è stato però solo un momento di gloria per Skellaridis – ma in campo in carriera nemmeno a livello Challenger – perché Lorenzo si è tolto d’impaccio ed ha infilato cinque giochi consecutivi volando sul 5-0, assicurandosi poi il primo set per 6-1.

Leave a Reply

Your email address will not be published. Required fields are marked *