WP Theme Lesson #9: Style.css and CSS Intro
- Filed under: Tutorials
The best way to learn CSS is to dive right in. Unlike XHTML and PHP, you don’t need to touch the core files of your template. You also don’t need to understand any basic concept. Just dive in. Trial and error is the way to go.
Before we start, you should already have some information in the style.css file. Let’s find out what that block of information means right now.
- First line is the theme’s name, which is self-explanatory.
- Second is the location of where your theme is available. If you’re creating a theme for yourself, not for public use, don’t worry about it.
- Third line is theme’s description.
- Fourth is version number, which is important, especially when you release updated versions of your theme for public use.
- Fifth and sixth is your name and home page.
The /* and */ signs wrapping around your theme’s information is for preventing the theme’s information from affecting the rest of the page. It’s CSS commenting. While typing CSS codes to style your web page, you might want to add comments here and there to keep track of things. But, you don’t want your comments to affect the codes so you use the /* and */ signs to make your comments invisible.
Here’s the processed theme information:
Step 1:
- Open Xampp Control, theme folder, a Firefox browser, an Internet Explorer browser, and the style.css.
- Point both browsers to http://localhost/wordpress
Here’s where you really need both Firefox and Internet Explorer to test your theme. Different systems interpret CSS codes differently. It’s best to test your theme in as many browsers and in as many operating systems as possible (Safari, Opera, Linux, Netscape, etc). If you’re lazy like me, test your themes in only Firefox and Internet Explorer.
(Notice: You don’t need to open index.php in Notepad, in this lesson. If you can’t already open the style.css with Notepad, right click on your file, select Properties, click Change, and select Notepad.)
Step 2:
Type the follow codes in the style.css file:
body{
margin: 0;
font-family: Arial, Helvetica, Georgia, Sans-serif;
font-size: 12px;
text-align: left;
vertical-align: top;
background: #ffffff;
color: #000000;
}
Just like working with XHTML or PHP, add tab spacing for organization:
Save your style.css file, refresh both Firefox and Internet Explorer browsers to see the change. (You’ll be working with two browsers from now on.)
Treat body{ } as a tag and everything in between as attributes and values, just like you did with XHTML. { is open. } is close. Within the { and }, the colon means start and semicolon means stop. (I use the terms tags, attributes, and values when referring to XHTML, PHP, and CSS to keep it simple. In reality, PHP and CSS have different terms for their codes. For example: parameters, selector, and property.)
Before we move on, there’s a reason why you used the body{ } (CSS selector) and that’s because you’re working on styling the most basic (or overall) part of the web page, the <body> tag. You don’t style the <header> tag because there’s nothing to style. Everything that shows up on your web page sits in within the <body> and </body> tags.
However, later on, you will style the DIV box with the ID named header.
Further explanations:
margin: 0; gets rid of the default margin spacing of the body tag. If you wanted a margin or bigger margin, change the 0 to 10px, 20px, or etcetera. PX means pixels. Each pixel is a dot on your computer screen. When your margin is a 0, there’s no need to follow it with px.
In the image below, the red highlighted space is the default margin spacing applied to the body tag.
After styling it margin: 0;, here’s the same page without the margins:
font-family: Arial, Helvetica, Georgia, Sans-serif; selects which font to use for your web page or website. The fonts following the first one, which is Arial in this case, are alternates. If your users don’t have the Arial font installed on their computers, the style.css file looks for Helvetica, then Georgia, and then Sans-serif. You can find your list of fonts in the Fonts folder under My Computer > Hard Disk > Windows
font-size: 12px; is self-explanatory. Change it to a smaller or bigger number to see the change.
text-align: left; aligns your text to the left. Change it to text-align: right; to see the difference.
vertical-align: top; makes sure everything starts from the top. If you middle or bottom align the body tag, everything will be pushed down.
background: #ffffff; means white background. #ffffff is the hex code for white. #000000 is the hex codes for black.
color: #000000; means your text color will be black.
If you want to move ahead or learn CSS on your own, the best place to start at is w3schools.com
Follow this WordPress Theme Tutorial Series from the beginning.
Small typo - “text-align: left; aligns your text to the right.” You meant left.
Gotcha, fixed it. Thanks.
(Thank you for your extremely fast reply to my question in the earlier part of this tute, re: 2-column category. Apparently, there’s a handy plug-in for that).
When I started this tutorial. I already have my index and styles ready (so all I need to do was to place the necessary tags on the selectors and elements I want them to appear). Initially, the weird part was the whole “theme” was not part of the option (because my CSS file was not named “style.css” and it resided in a folder named “CSS” - but still in the same directory as the index). I moved the CSS file to where the index is, renamed it to “style.css” and it finally displayed in the selectable themes in WordPress.
BUT the styles is not taking effect in my index.php file. I have inserted this code (take note that I have already moved styles.css in the same level as the index). Here’s the code:
” type=”text/css” media=”screen” />
What could be the problem? Thanks!
Arthur, please don’t post codes in the comments.
You moved the style.css file, which means you need to change the url to reflect the new location of that file.
My style.css is also not affecting my site…… ;/
You haven’t validated your codes yet. Don’t move onto this lesson.
There’s a typo in your body style for font family. It should be
sans-serif with one “f” not two.
Also, just a question about something I’ve noticed in a lot of WordPress theme stylesheets: generally the body font-family is listed as “sans-serif”, however, people often put in a serif font in the list, as you have above. Georgia is a serif font, not a sans-serif. Is there a reason for Georgia in that list, or is it something people are picking up from default WordPress files, or …?
Thanks for the tutorial; I’ve worked with WordPress a lot, but have not made a theme on my own yet. Now I am!
Sorry, just to clarify: the typo is in the image, not the text itself. It might confuse someone to see both spellings.
Thanks becky. The tutorial and screenshots are different now because I’ve fixed several mistakes.
As for the font question, the use of multiple serif fonts or multiple fonts for that matter is purely the designer’s choice, but it’s good to have sans-serif in there, just in case a user doesn’t have a certain font and have to resort to using alternative.
In font-family: Georgia, sans-serif. Georgia would be the default and sans-serif would be the alternative.
Hi, SmallPotato, Thanks for the quick reply.
About the font-family:
I think I wasn’t clear… I know what font-family is. What I meant was that “sans-serif” means without serifs… and Georgia is a serif font. So in the stylesheet example, which again, I’ve seen many times in WP theme stylesheets, it lists arial, helvetica — both sans-serif fonts, and then georgia, which is a serif font. So the font-families are, in fact, mixed. It just seems odd that so many WP stylesheets would mix them up; it’s contrary to what the generic fault-family is about.
I don’t really about those stuff, but here’s why I used them.
Arial or Verdana - This is what I want the default font to be.
Helvetica - If I were using Arial, I would also use Helvetica, just so Mac could use a font similar to Arial.
Georgia - If absolutely no one is using Arial, Verdana, and
Helvetica, then make them use Georgia, which looks a little better than sans-serif and Times New Roman.
Thank you for this excellent tutorial =)
Im having a problem because I cannot make the CSS file modify my site. I dont know what I am doing wrong.
Here are the links to the CSS and index.PHP file. Hope you can help me out.
http://www.files.famguevara.com/…
http://www.files.famguevara.com/…
Thanks!!!
I already resolved it. It was a validation issue, I forgot to debug some stuff. But thank you anyway
This tutorial is truly fantastic, everything is so clearly explained! This is how tutorials SHOULD be written.
My only hiccup so far is that Firefox and IE5 (i’m on a mac) won’t access http://localhost/wordpress
Safari is finding it with no problem and thats what I’ve been using for the previous parts of the tut, but i get a “The requested URL /wordpress was not found on this server.” message when I try in either Firefox or IE. Any idea how I could solve this?
Excellent basic explanation of CSS. My only suggestion for improvement: encourage people to choose usability friendly font-sizes. 12px is a fixed size. Small or .9em allows folks with different visual needs to size the fonts the way that best suits them.
Thank you again for the excellent tutorial series!
You say is the most elemental html element. I say it is and actually you can set CSS styles to the html tag.
Yust wanted to clear that out because it sometimes is usefull to adjust the height of the html tag, for instance, but many people do not know you can do that.
congratulations on the easy tutorial.
to correcto my post above, the first line should read:
You say BODY is the most elemental html element. I say it is HTML and actually…
didn’t think the blog would not block the html code.
alert(’Sorry, to easy to hack. Should try to avoid XSS’);
ok this is the last comment. HAHA id DID block the javascript. thank god! see ya.
[…] WPDesigner » WP Theme Lesson #9: Style.css and CSS Intro WP Theme Lesson #9: Style.css and CSS Intro […]
Just to say thanks a million for this tutorial. It really is brilliant and this php and wordpress noobie really appreciates it.
One thing though, I think that it would be helpful if you had a copy of the code for the index.php up to this point.
One thing that I’v noticed while using php is that one error can result in a blank page being shown on the browser and this makes it hard to find the problem. I’m finding that with my index.php at the moment.
Thanks again for everything!
Hey small goota a Question that’s confusing me since a long time ago…
There’s got to be an “Structure” in .CSS code. First goes the tipography, then links, then structure, and something like that. Can you help me with that?
Thanks!
You make up your own structure.
Please help me with the vertical-align tag, it isn’t changing if I change it to bottom or middle. Other attributes display changes. And yes, my code is now validated with your help.
Addies - I’ve already asked you once to get help at the forums if you need it.
thanks na pod…small potato