The most effective way to learn CSS is through hands-on practice. Unlike XHTML and PHP, which involve working with core template files and grasping fundamental concepts, CSS allows you to dive right in and experiment. With a style.css file at your disposal, let’s explore its contents.
The first line serves as the title. The second line indicates the theme’s location, which isn’t a concern if it’s for personal use and not intended for public release. The third line is a description, followed by the version number, crucial especially when updating the theme for public distribution. The fifth and sixth lines represent the author’s name and homepage, respectively.
The /* and */ symbols enclosing these detAIls denote a CSS comment, protecting the theme information from affecting the rest of the file. Comments are useful for adding notes to your code, ensuring that they won’t interfere with the actual styling. To create a non-executable comment, enclose it with /* and */.
Now, let’s proceed with theme testing:
1. Open the style.css file, access it through Xampp, the theme folder, and have FireFox and Internet Explorer browsers open. Load http://localhost/WordPress in both browsers.
2. test your theme simultaneously on both browsers, as different browsers interpret CSS differently. While it’s ideal to test across multiple browsers and operating systems (Safari, Opera, Linux, Netscape, etc.), Testing on Firefox and IE suffices for a quick check.
For step 2, add the following CSS code to 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;
}
“`
Similar to XHTML and PHP, indentation is used to orGANize the code. Save the style.css file, then refresh both browsers to view the changes.
Think of `body{}` as a tag, with everything inside serving as attributes and their corresponding values, just like in XHTML. The opening curly brace `{` signifies the start, and the closing one `}` denotes the end. Within these braces, colons introduce attributes, while semicolons terminate them.
Before moving forward, understand why we use `body{}` (a CSS selector) since you’re styling the most fundamental part of a Web page, the “ tag. Later, you’ll style `div` tags using ID header styles.
Here’s an explanation of each attribute:
– `margin: 0;` rEMOves the default margin A-Round the `body` tag. You can replace 0 with values like 10px or 20px for margins.
– `font-family: Arial, Helvetica, Georgia, sans-serif;` specifies the desired font, with Arial as the primary choice. If Arial isn’t available, the browser will fallback to the next listed font.
– `font-size: 12px;` sets the font size, which can be adjusted for comparison.
– `text-align: left;` aligns the text to the left. Change it to `text-align: right;` to see the difference.
– `vertical-align: top;` ensures content starts from the top. If set to middle or bottom, elements will be pushed down.
– `background: #ffffff;` sets a white background. The hexadecimal code #ffffff represents white, while #000000 represents black.
– `color: #000000;` makes the text black.
To further enhance your CSS knowledge, visit w3schools.com, an excellent resource for learning and practicing CSS.
相关文章
