What Does CSS on Tumblr Mean?

Updated April 17, 2017

Tumblr offers several methods for customisation, the most prominent being the Cascading Style Sheet, or CSS feature. By adding custom CSS, you can change certain elements of your Tumblr page. Before modifying or adding CSS, learn about HTML elements and how they're modified.

Understanding CSS

CSS stands for Cascading Style Sheet, a tool to contain the formatting of HTML elements: Instead of adding the same code to every element that you want to modify, you can add a couple of lines to your stylesheet that change every element the same way. Many websites create a single stylesheet and link it to every page it modifies, so that when an element is changed, it needs to be changed only in one file. All modern browsers recognise CSS.

Using CSS on Tumblr

Your entire Tumblr uses one stylesheet, with the custom CSS you add affecting every post and page on your blog. CSS can be customised in two locations on Tumblr: under the "Advanced" menu on the Tumblr customisation page or within the Theme stylesheet under "Theme" > "Use Custom HTML." Modifying the theme should be reserved for users who are familiar with theming in Tumblr and have an advanced understanding of CSS and HTML.

Modifying Tumblr in CSS

You can modify almost anything using the custom CSS feature. Most commonly users change their background images, though you can also use it to change the size, colour and font of your Tumblr text, as well as the way that links are displayed. CSS can modify any element on your Tumblr page; your limitations are only related to your proficiency with CSS and Tumblr elements, though not all Tumblr themes will behave uniformly.

Basic Custom CSS

When you add custom CSS to Tumblr, you'll need to add the entire element, body {}, so that Tumblr recognises the CSS. For instance, if you want to add a background image, the CSS is "body {background-image: URL(imageurl);"}" with your background image hosted on a service like Photobucket or Dropbox. You can also modify the font within the body tag: "font-size: 12px;" changes the size in pixels, "colour: #FF00FF;" changes the colour and "font-family: times new roman;" changes the font. The whole element would look like: "body {background-image: URL(); font-size: 12px; font-family: times new roman; colour: #FF00FF;}". For more examples of CSS, look into W3School's write-up of CSS examples at

Cite this Article A tool to create a citation to reference this article Cite this Article

About the Author

Ashley Poland has been writing since 2009. She has worked with local online businesses, supplying print and web content, and pursues an active interest in the computer, technology and gaming industries. In addition to content writing, Poland is also a fiction writer. She studied creative writing at Kansas State University.