Custom CSS for Text – WordPress Snippet Generator

This Custom CSS code snippet generator is intended to provide a fast, easy way to create customized CSS snippets for your WordPress website.

  • Selector/s
  • Text Options
  • Text Shadow
  • Code

Preview Window

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Selector/s

Item
Input

Text Options

Item
Input
















Text Shadow

Item
Input

Copy Code

Your customized code snippet is below. Be sure to fully read the instructions that follow before adding this code to your WordPress theme.

Your Custom CSS

Add this code to your style.css file. Scroll down to learn more.

       
{{cssSelector || '.class'}}{
        font-size:{{fontSize || '12'}}px;
        color:#{{fontColor || '555555'}};
        line-height:{{lineHeight || '1.5'}};
        letter-spacing:{{letterSpacing}}px;
        text-indent:{{textIndent}}px;
        word-spacing:{{wordSpacing}}px;
        text-align:{{textAlign}};
        text-decoration:{{textDecoration}};
        text-transform:{{textTransform}};
        white-space:{{whiteSpace}};
        word-break:{{wordBreak}};
        word-break:{{wordWrap}};
        text-shadow: {{textShadowHorizontalPosition}}px {{textShadowVerticalPosition}}px {{textShadowBlurRadius}}px #{{textShadowColor}};
}

    

CSS (Cascading Style Sheets) is a markup language that controls how HTML elements appear on a web page. One of the core WordPress theme files, style.css, contains comprehensive stylistic instructions that tells your WordPress theme how to present the content you publish on your site.

We’ve put together this code snippet generator tool to help developers speed up custom CSS styling for text elements. All you need to get started is the name of the selector you want to target. Read on to learn how to identify a CSS selector and how to use this snippet generator tool.

How Do You Add Custom CSS to WordPress?

Additional CSS section

WordPress 4.7 introduced a new section in the core customizer labeled Additional CSS that allows users to add custom CSS code directly into the theme that’s activated. But before you can start styling text, you’ll need to determine which part of your theme you’d like to alter and identify its class or ID using Chrome’s Inspect tool.

Inspect element window

Start off by right-clicking the page element you wish to inspect and clicking the Inspect menu item (in case of the Chrome browser). You’ll see that the CSS styles for each element are shown in a separate preview pane on the right side of the browser window. The most dominant selector (.class or #id) will be shown first in the list.

How Do I Use This WordPress Custom CSS for Text Snippet Generator Tool?

This custom CSS for text code snippet generator is designed to help developers speed up the process of styling text in their WordPress themes. To use the tool, all you have to do is enter the selector you’re targeting and configure its options and the tool will generate a code snippet for you to use in your WordPress theme’s style.css file.

Let’s go over the individual fields one by one:

  • Selector/s Tab

    • Selector: Enter the selector you want to target here. It should be in all lowercase letters and hyphens e.g. .class-name. We outlined how to find a CSS selector in your WordPress theme in the previous section. The WordPress Codex also has a detailed guide that you can read for additional information.
  • Text Options Tab

    • Font Size: This property is used to set the size of the text. You can enter an absolute size (in px) or a relative size (in em). By default, the value is set to 12 px.
    • Color: The color property is used to set the color of the text. Enter the color value by specifying either the color name, a HEX value, or an RGB value.
    • Letter Spacing: Used to specify the spacing between the individual letters/characters in text. Enter the value in pixels.
    • Line Height: Used to specify the space between lines in pixels.
    • Text Align: This CSS property allows users to set the horizontal alignment of the selected text. Select one of the four options – left, center, right, or justify.
    • Text Decoration: Select from one of the four given text decoration options i.e. none, underline, overline, or line-through.
    • Text Indent: Allows developers to specify how much the first line of text should be indented (in pixels).
    • Text Transform: This property can be used to turn the text into all lowercase, all uppercase, capitalize, or none.
    • White Space: Specifies how the white space inside an element should be handled. Choose from one of the following options – normal, no wrap, pre, pre line, or pre wrap.
    • Word Break: Used to specify the line breaking rules. You can choose from one of the following options – normal, break all, keep all.
    • Word Spacing: This property is used to specify the space between words in a text. Enter this value in pixels.
    • Word Wrap: Specify whether long, unbreakable words should be broken (break word) or to only break them at allowed break points (normal).
  • Text Shadow Tab

    • Color: Define the color of the text shadow by specifying either the color name, a HEX value, or an RGB value.
    • Horizontal Position: Set the horizontal position of the shadow in pixels. Negative values are also allowed.
    • Vertical Position: Set the vertical position of the shadow in pixels. Negative values are also allowed.
    • Blur Radius: Enter the value of the blur radius in pixels. By default, the blur radius is set to 0 px.
  • Code Tab

    • Once you’ve entered all of the required fields, head over to the Code tab. You’ll see that the Your Custom CSS area is populated with a custom code snippet for styling text with CSS in your WordPress theme.

How Do I Add the Code Snippet to My Website?

The quickest way to add the generated code snippet to your site is by pasting it directly into your current theme’s style.css file. You can edit it directly by navigating to Appearance > Editor from the WordPress admin panel.

Alternatively, you can download the theme’s style.css file to your desktop via an FTP client. Next, open it up in a text editor and paste the generated custom code snippet at the bottom of the file. Hit the Save button and re-upload it to your theme’s directory when you’re done.

Conclusion

Writing CSS code to style text in your WordPress themes can become mundane very fast. Hopefully, this custom CSS for text code snippet generator tool will allow you to style text in your WordPress themes all the while saving you some time from having to write code by hand.

Do you have any questions about how to use the Custom CSS for Text code snippet generator tool? Let us know in the comments section below!


Written exclusively for

Nimbus Themes Publishing Logo

About the Author

Evan Scoboria is the co-founder, and developer at Shea Media LLC, the team behind Nimbus Themes, this magazine, and a bunch of very happy clients. He co-founded Shea Media with his wife Kendall in 2009. Evan enjoys hunting, fishing, code, cycling, and most of all WordPress!

Read all posts

Post a Comment

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