Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

What is: CSS

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

CSS or Cascading Style Sheets is a style sheet language used to define visual appearance and formatting of HTML documents. WordPress themes use CSS and HTML to output the data generated by WordPress. Every WordPress theme contains a style.css file which has style rules to define the formatting of pages generated by WordPress.

CSS is very simple to use and easy to learn. There are many websites publishing CSS tutorials for beginners that can help a new WordPress user get started. However, since it is very simple to use, a lot of WordPress users can understand the basics by simply looking at their WordPress theme’s style.css file.

Example:

body { 
font-size:14px;
color: #444;
background-color:#FFFFFF; 
} 

h1 { 
font-size:18px;
text-transform:uppercase;
}

.post-title { 
font-size: 16px; 
color: #4C0000;
font-weight:normal;
} 

HTML elements can be styled directly in CSS. Designers also use identifiers and classes to define different sections that can be styled in CSS. This helps them use different styles for same HTML elements on a web page but in different sections. For example, an h1 element for the blog title in the header section of a page can be styled differently than another h1 element in the post area of the same page.

Example:


<div id="header">

<h1 class="blog-title">
<a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a>
</h1>

</div>

The HTML shown above contains an identifier named ‘header’ and a class called ‘blog-title’. These sections can be styled in CSS.

Example:

#header { 
background-color:#4C0000;
height:120px;
width:100%;
padding:20px; 
} 

h1.blog-title a { 
font-color:#FFFFFF; 
font-size:16px;
font-family: Georgia, "Times New Roman", serif; 
text-decoration:none;
} 

Additional Reading

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!