CSS is All About Style
CSS stands for Cascading Style Sheets and represents the presentation layer of your website or web application. For example, with CSS, you can:
- control the look and feel of your webpage by adding color
- change font size or style
- add texture or control the layout of the content included on your page.
Happily, CSS is also quite easy to code, with simple and easy to understand syntax.
Learn How to Read CSS
A CSS style rule consists of a selector, which targets an element that is included in the HTML portion of your page, and a declaration block. The declaration block contains one or more declarations, which simply consist of the properties you would like to change and the value you would like to change it to. For example, if you would like to make all primary headings on a page orange, the CSS declaration would look like this:
Easy peasy, right? Be warned that it’s not always quite that simple – particularly when you start changing the layout of your page (floats!) or when you wish to target a specific element (say the fourth list item contained in an unordered list). This is a good starting point for you to begin your Cascading Style Sheets adventures.
The Latest CSS Developments
The latest CSS version, CSS3, has some exciting developments in comparison to its predecessor, CSS2. With CSS3, you now have the ability to create rounded borders, transform and animate selected elements, add text shadows, change the opacity of an element and much more.
However, take care when working with these properties if cross-browser compatibility is a concern. Some browsers, such as Internet Explorer, do not support new CSS3 properties. For this reason, it may be a good idea to set a default style for older browsers.
So tonight, why not add a little style to your site? Try it yourself and code a little CSS. You will be a Cascading Style Sheets master in no time!
CSS Coding Tips
- Be efficient when you write your CSS – if you want all text on the page to be a certain font, use one selector to target all the elements rather than targeting every single element.
- Use an external stylesheet – its bad practice to include CSS with your HTML (known as inline style) as your HTML document should only contain the content of your page. Instead, keep it simple and organized and include a separate CSS file. You can link to this page in the head of your HTML document.
- Try and try again – Writing any type of code is a learning process. Experiment with different selectors and see what happens. Did you write a nifty selector and nothing happened? It’s important to note that CSS fails “gracefully” and won’t produce an error if you create an incorrect CSS selector. Keep trying, you will learn from the mistakes you make. There are also a variety of online tools and tutorials available to help you along the way. Check out Code Academy and W3schools for some great resources.
Did I leave anything out? What are some of your CSS3 coding tips? Leave your comments below!