CSS and How it Works
With a lot of social media followers and email subscribers, I get a lot of designer questions. One of my biggest ones is how to get started in web design. People want to know the 2 most important things to get started in web design and what they should be focusing on. Without a doubt, the 2 most important things to learn are HTML and CSS. CSS is what I will be focusing on in this guide.
What is CSS?
CSS, or cascading style sheets, are what styles the html, or elements on a page. CSS can style any element with a set of rules that are completely controlled by you. When you design a website, you determine the style of it. You can make it so that every image has a border, or that every title is underlined. With CSS, you can control how things look. In the past few years, CSS has evolved into controlling how things react when you hover over them, and you can even distort or animation elements with CSS. CSS is essentially a set of rules for how a site is displayed, and you tell the browser what they are.
Why is CSS so Important?
One of the most sought after results of good CSS is to make a website look as consistent across all browsers as possible. You want the experience to be the same, whether your viewer is browsing your site on Chrome, Safari, Firefox, Internet Explorer, or Opera.
What Do You Mean “As Consistent As Possible?”
Unfortunately, the creators of all browsers haven’t always been on the same page. Some newer features that work in Mozilla Firefox, doesn’t look the same, or even work at all in Chrome or Internet Explorer. This has been a pain in the past, because web designers would have to come up with work arounds or scripts to get something to work in an older or a different browser.
Fortunately, in recent years, developers of these browsers have come to realize that their mutual cooperation for a more streamlined and consistent web experience is essential to the evolution of web design. Websites such as Can I Use? Are necessary for determining if a feature works in one browser, all of them, or only one. It also tells you where it doesn’t work.
So How Do You Get Started Learning CSS?
You can Learn CSS is a number of ways. The way I learned it was to pick up a book. I learn better by reading than I do audibly. Also, you need to learn the syntax of how CSS is structured. Once you get the hang of it, you can really dive into how it works. If you aren’t code minded, it can be tough to learn where colons, parenthesis, semi-colons, and quotation marks go. It sounds more complicated than it is.
Once you understand the syntax, it can be easy to learn by doing. A great place to try it out is W3Schools, where you can see examples and edit existing CSS to see how the look of an element changes when you alter it. If you learn by doing, you’ll pick it up in no time.
Learning by video is another option. However, this was more difficult for me, because video instructors always zipped through the actual CSS part of it, because they could type 503830430 words per minute. I had trouble keeping up, and when they spoke the syntax, I would get easily confused. “Wait, was that a colon, or a semi-colon? Do I need quotes there? Wait!” I would end up having to go back and rewind the video a dozen times. I would avoid video until you get into the intermediate level of CSS. Otherwise you’ll get overwhelmed and you’ll be too tempted to throw in the towel.
Here are a link to a list of cheat sheets and lists, which include html and CSS cheat sheets.
Why Is It So Important to Learn CSS?
Html and CSS go hand in hand. You can’t have one without the other. They are the building blocks of how your site looks and how it is structured. Also, you need a working knowledge of CSS to be able to learn other web design languages, such as javascript and PHP. You can manipulation both html and CSS with javascript and PHP. In order to know what to do with them, you have to know those 2 first. PHP outputs to HTML in the browser, and javascript tells html elements what to do and how to behave. It also controls CSS, too.
The Parts of CSS
CSS is made up of 3 main parts. Here they are and what they do.
The CSS Selector
The selector is the part of the html that you want to style. This can be anything. Examples are the h1 heading tag, the body of your document, the footer, and anything else.
The CSS Property
The CSS property is the attribute of the element that you selected in which you want to style. Let’s use the H1 header tag as an example. That is usually the title of the page and it is text, so you’ve selected the heading text and now the property of it you want to style could be the color, or the background behind the text. You could also say that it has a border property and specify that it is underneath your text.
The CSS Value
The CSS value is the actual style of the property, or the item you selected. In our heading example, we specified that it had a border property, and that is was on the bottom, the value could be 1 pixel thick, and that its color is red. The CSS for all of this would look like this:
H1 {color:blue; border-bottom:1px solid red;}
If an element can have a property, you can style it using CSS! Other examples of CSS styles are background color, background image, border, box-shadow, text shadow, width, height, font size, which font to use, and so much more. It would be great to keep a CSS reference handy, so you can refer to all of the things that you can do to style a website using CSS. This will make it easy while you are learning. There is a lot to keep up with, so take a deep breath and refer to the guide if you need to.
Other Aspects of CSS
IDs & Classes
IDs
These items are noted with a “#” symbol in CSS. They are main elements that you give a specific name, and you only use one time in your CSS. They are dominant, and are used for specific, stand alone elements.
Classes
Classes are extremely handy. They can be used alone, or they can be applied to elements with and ID. You can have multiple classes applied to one element. Just make sure they don’t override one another. You can use them over and over again, as many times as you want.
Classes can also be applied to active elements, like links and images, which gives you a lot of flexibility on how your site is styled. There’s also no limit to what properties of an element you can style with CSS, whether you’re using IDs or classes.
Active Elements and Hover States
You can add a lot of style and interactivity to a site by adding a hover state to an element. These are typically applied to links and active elements on your site, but you can apply a hover style over elements that aren’t active.
For active elements like links, your cursor will change from an arrow to a hand, which lets the user know that this element is active and leads somewhere when it is clicked. It is a fundamental element to an interactive website. You can add a hover state to that element by adding :hover after the selector. You’ll want to do something that adds a great deal of contrast, such as changing a background color, or text color, or both.
You can get really creating with a hover style. For example, when someone hovers over an image that links to an article on your website, you can make it so that the title of the article and a brief descript pops up over a darkened version of the image. This is usually referred to as an overlay.
CSS and Typography
Since your website is likely to have a lot of text in some areas, it is important that your typography is stylish, matching your brand, while having a distinct hierarchy. You can style your text using CSS, which is essential to adding an element of consistency to your site.
Headings
In html, you have 6 levels of headings, with H1 being the largest and typically used for page titles, all the way through H6, which is the smallest. Think of these headings as different parts of an outline from your schools days in English class. They are a great way of breaking your text and information down in levels of importance.
Body Text
Body text can be styled, but it is important above all that it is readable. You don’t want to use a quirky or hard to read font. You want to stick to simple, straightforward fonts that work with your brand, not against it. When you are working with body text, the main CSS properties you want to focus on are color, line-height, and font-size. You want your body text to be large enough to be easy to read. You want the line-height to be large enough to give each line plenty of breathing room, without being too far apart. The color should contrast well with the background. People should never squint to read your web page.
Custom Fonts
Custom fonts are controlled with CSS. You can import them with CSS, or you can embed them using Google Fonts. Some designers still use Cufon. More and more designers are using icon fonts in their websites, too. All of these are done using CSS, but can require uploading files of adding a script to make it work. I’ll create mini guides to show you how to add those to your sites.
CSS and Responsive Design
Responsive Design is an industry standard. It evolved from having a million different devices and screen sizes, and the need to streamline websites to work with all of them. You’re site won’t look exactly the same on all devices, but it should be very close.
CSS and Media Queries
Media queries are a way of building a responsive site using CSS to control how elements look at specific sizes and size ranges. With Media queries, you have 2 methods of handling it with CSS.
Width
Width is the width of the rendering surface that your design is being viewed on.
Device Width
Device with refers to the entire screen or page, not the actual area your website is being viewed on.
CSS and Viewport
The viewport is simply the meta tag that tells the browsers to render your content to scale properly.
CSS and Pixel Ratios
Pixel ratios enable you to control how your site is viewed on Retina, 4k, and now 5K devices (Thanks Apple).
So How Do CSS and Media Queries Work?
If you’re going to learn CSS and web design, you might as well start think in terms of flexible designs for every device. Media queries are pretty simple. They are essentially blocks of CSS that are dedicated to different screen size ranges. People are going to have to scroll your website up and down, which means that most of the time you aren’t worried about height. You’re simply worried about content that needs to change from being a 4th of the page wide on a desktop screen, to being half the width of the screen on a tablet, and to take up the full width on a smart phone. Could you imagine reading a paragraph that was only as wide as ¼ of your smart phone screen? The text would be unpleasantly stacked vertically, making your content unbearable to read.
Media Queries solve this problem by enabling you to specify:
- For desktop computers and everything larger than a tablet, do this.
- For everything from the largest tablet size, to the smallest tablet size, do this.
- Then, for everything from the largest smart phone screen, down to the smallest one, do this.
It allows you to carefully craft and control how elements of your site display on certain devices.
Tips For Writing Good CSS
Use the DRY method, which stands for Don’t Repeat Yourself. This means that you don’t repeat the same style multiple times throughout your CSS. This makes it more efficient.
Write CSS Efficiently. When you can combine properties into less CSS, it’s cleaner and easier to understand. It’s okay to be inefficient while you’re just learning, but eventually you’ll learn to combine CSS when you can.
Use Firebug or something similar. I’ll save you hours of frustration right now. Use the Firebug addon or the built-in CSS inspector for Chrome to troubleshoot CSS problems. If Your site doesn’t look how you expected, inspect the element and you can see the CSS styles that are applied to it, as well as which ones dominate others, if there are multiple styles applied to it.
Use Comments! Please, for the sake of all web designers that come behind you, please comment your CSS! If something is special, or you have a special styling for a certain section, comment it! Label it, or tell us why or what section a block of CSS is for.
Use CSS Reset. This enables you to start out with a clean slate for your CSS. Otherwise, you’ll be fighting browser-specific defaults.
Don’t use Inline Styles. This means that you shouldn’t be placing CSS in your html or at the top of an html page. Place your CSS in a specific stylesheet called style.css. From there, you can link every page to it.
Make CSS classes semantic. In other words, describe what you are styling, so that it makes sense to anyone coming in behind you. I hate editing existing sites for this very reason. Naming a CSS class “bluebird” doesn’t tell me anything, especially when it doesn’t apply to a bird at all.
Use shorthand CSS where possible. This means that you use the shorter version of CSS , making your life easier. For example, color is CSS has a hexadecimal value, meaning 6 numbers. Black is #000000, but you don’t need all six for when the values of the 1st and last 3 numbers are the same. You can just use #000. You can use this in other places, too. For padding, you have a value for all directions. Instead of writing out padding-left, padding-top, etc., just say padding: 2px 3px 5px 8px;
The values start at padding top and work clock-wise around the element. This works for margin, too.
Start with a good framework. This means you can already build on CSS best practices. All you have to do is add to it. See this list of CSS Frameworks to help you get started.
Conclusion
I will be expanding on CSS in the future, with mini guides that go further in-depth into different aspects of CSS and how to get the most of it. If you want to get an idea of what you can build with good CSS, check out these CSS sites. If you have questions about CSS and would like to learn more, leave your questions in the comments section below.
