Love a particular website with gorgeous colors and a spectacular layout? More than likely what you are admiring is their use of CSS! CSS produces the presentation of a website and is the home for colors and layout. Without CSS and the design it produces, most sites would be a boring document with a lot of text but little style.
What exactly is CSS?
CSS stands for cascading style sheet. A style sheet is a document on your website that your browser appends to the page when you add it to your markup. Every web browser supports CSS. Here’s a list of some of the items on a webpage that the style sheet can control:
- Font
- Color
- Size
- Spacing
Cascading refers to the ability of CSS to have many instances of a style and call them in an hierarchical order. It is a best practice to create external styles sheets and include them in your HTML document. But, you can style out an individual element. If you declare the same style at the level of the individual element, that will override what is in the style sheet. It may sound convoluted, but in practice, cascading styles is elegant and easy. Understanding when a browser will apply a style to your document and when you can override it may be the best part of CSS.
CSS vs HTML
CSS is a style sheet language that controls the presentation of a webpage. HTML is a markup language that contains the actual contents of the document. For instance, if you include a div element on a page, the div is in HTML. The CSS file controls how the the div looks.
Separating the presentation layer from the markup layer allows the ability for more precise control of the appearance of the webpage. Many websites are now responsive. This means that the appearance of the page changes depending on the size of the browser. CSS gives the style sheet the ability to change how the page looks without changing the HTML.
CSS can also change how a page looks for different media types. If you want to include a print style sheet, you can drop out other elements that aren’t necessary for printing. You can include the print style sheet on a page. It will also have a style sheet for all media types. As long as you declare them in the right order, when the page prints, it will use the print styles over the other styles.
Why is CSS important?
The world of web development and design changes often. CSS gives the web designer the ability to adapt to changing technologies and standards. CSS is more than simple colors and layout. It’s advanced techniques are what make modern webpages possible. Before CSS, web developers built most pages in rigid tables. If you resized your browser or looked at the page on your phone, you would have to do a lot of scrolling to see everything. Take a look at some of the more advanced techniques that most browsers support:
- Animations
- Hovers
- Layers
- Media queries
- Positioning
In fact, CSS continues to evolve and add in even more functionality. Start with the basics and experiment with controlling the HTML elements in your page.
Tools and Resources
As you learn CSS, having good tools that let you see what the styles are doing is important. Also, install the most popular browsers so you can compare what your webpage looks like in each of them. There are some cross-browser testing websites available as well.
- Install Firefox and then install the add-on Firebug. Firebug will let you inspect elements of your page. Google Chrome has a similar tool, but Firebug’s interface is a little easier to read. Both will get you similar results.
- If you found a really great technique but you’re not sure if all the browsers will support it, take a look at the Can I Use website. It will give a breakdown of how well each CSS element is supported on different browsers.
- Make sure you have content in your page when you are working on the styling. If you haven’t already starting using lorem ipsum generators in your web design, consider using them. This will help you judge how your CSS layout is working and let you see if you have any issues.
You now understand what CSS is and have found some tools that will help you with your web design journey. You are ready to dive in and learn how to code it! As you learn CSS, look back to that favorite website and use your tools and new knowledge to see how they built it.