What Does CSS on Tumblr Mean?


Tumblr offers several methods for customization, 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 recognize 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 customized in two locations on Tumblr: under the "Advanced" menu on the Tumblr customization 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, color 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 recognizes 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, "color: #FF00FF;" changes the color 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; color: #FF00FF;}". For more examples of CSS, look into W3School's write-up of CSS examples at w3schools.com/css/css_examples.asp.

Related Searches


  • Photo Credit Comstock/Comstock/Getty Images
Promoted By Zergnet


Related Searches

Is DIY in your DNA? Become part of our maker community.
Submit Your Work!