CSS Tricks & Tutorials

Working with CSS Stylesheets

The CSS tricks and tutorials section provides info on CSS stylesheets, including the answer to what is CSS and how to use CSS.

If you're not familiar with CSS, or cascading style sheets, you are in for a treat! There is no better way to format your website content, images and even your layout. Even if you're an SBI blockbuilder, you can benefit from a few CSS tips and tricks.

There are so many ways you can use CSS... a little or just in certain spots or whole hog, controlling every aspect of your site. I prefer the "whole hog" approach myself, but everyone's need and preferences may vary.

But what I love most about CSS is the ability to make changes throughout your site without having to touch every page. How many hours I spent in the past opening up every single page in block builder and making some small change! Once I learned a few CSS tricks and started using CSS stylesheets, I saved myself so much work.

What Is CSS?

You might be wondering what the heck IS CSS? It's an acronmym that stands for Cascading Style Sheets. And that basically means that you have a bunch of interlocking and often nested style rules that control a website's appearance.

There are different types of CSS:

• In-line. This type of styling is applied only to a specific HTML tag, for example one particular paragraph tag on a web page.
• Embedded. Embedded styles are inserted in the head section of the HTML on a web page. They will control the entire page, but only that one page they appear on, not the whole site. This type of CSS stylesheet cannot be used on an SBI block by block built site because you don't have access to that head area.
• External. An external CSS stylesheet is the idea, because it will control styles, formatting and layout throughout a whole site.

To display your web pages, browsers look at external CSS stylesheets first, and then they check for embedded stylesheets, which will override external CSS code. Next, the browser looks for any in-line CSS commands, which will override both embedded and external CSS.

So, for example, while you might want a level 1 headline to be bold and blue overall on your site, on a particular page you might prefer to have it red and italicized. You can use in-line code to achieve that, no matter what your external stylesheet says.

Don't worry... this will begin to make more sense as you move through the various tutorials in this section!

CSS Tricks & Tutorials List

There are just SO many things you can do with CSS, I cannot possibly cover them all. Still, I will work to include as many basic styling tasks as I can in this section of the site. Keep checking back for new CSS tips, though. I will be adding to the list on a regular basis.

• Using style sheets for layout
• Using style sheets for global control
• Inserting style codes into a web page
• How to add on an external style sheet to use with the block builder

In Summary...

There are many so-called CSS tricks even a tech-aversive webmaster can use to control styling and formatting on a website. The CSS tutorials here will help you master those tricks!