Basics of CSS

CSS makes the web a prettier place.

Here is a comprehensive guide that will help you to understand the basics of CSS.

We will do our best to cut learning fluff, and update the guide based on your input.

Etymology

CSS stands for Cascading Style Sheets and is a style sheet language. A style sheet is a document that contains information displayed on a webpage.

Usage

You can summon CSS files on different sections of your webpage to customize its look and feel. Most web developers use CSS in their projects. UI/UX designers use CSS to tailor the appearance of their webpage.

Syntax

Photo Credit: W3Schools

CSS writes using selectors and declarations.

Selectors select properties of one or more objects in a webpage.

Declarations dictate how information will renders on the object selected by the selector.

Declarations contain properties and values.

Properties are configurable aspects of a web object.

Values are the configurations of a web object, and separated from a property via a colon.

Declaration blocks are many declarations strung together by a semi-colon.

Tip: Go through the above syntax to make sure you understand the structure of CSS statements.

Selectors: Elements, IDs, and Classes

The following are the most used types of selectors:

CSS Elements = Elements of the DOM in a webpage. You can use this to apply CSS to HTML DOM elements. For example, using a CSS element selector you can style all HTML <p> elements to turn green.

Tip: Think about the tags used in HTML to get a better understanding of what an element is. HTML tags often correspond to elements styled with CSS.

CSS IDs = Elements with a particular ID associated with them. Using these IDs help you to customize groups of elements.

The CSS Box Model

The CSS Box Model . Every DOM element has a box model associated with it. The Box Model is useful to determine spacing between elements. There are 4 components of the CSS Box Model:

Margin = Outermost layer of the box model. Useful for spacing between different elements. Also great for customized spacing between different pictures in a group of pictures.

Border = The 2nd outermost layer of the box model. You can customize an element’s border using this. For example, you can change the border color of an element to blue, green, etc.

Padding = The 2nd innermost layer of the box model. You can use this to create a space between your content and its border. This is helpful when you want to create a framing effect for your content.

Content = The innermost layer of the box model. This contains the main content of your element. It is what users will see on their screens.

Colors

There are three main ways to use colors in CSS.

1) You can use the default CSS colors using:

color: <PREDEFINED CSS COLOR>

2) You can use the RGBA color scheme. You write RGBA colors using:

color: rgba(#, #, #, #)

The first three numbers you select will provide shades of red, green, and blue. The last number you select will determine how transparent your element is.

3) You can use the hex-color scheme using:

color: #ffffff

A particular combination of letters and numbers will correspond to a color.

Tip: We recommend using a pre-defined color palette for your web application. A future post will cover the basics of Material UI.

The !important Tag

Use the !important tag only when needed.

It is an inline tag that declares the selected line is more important all the lines that came before it.

When you add this tag it will overwrite conflicting CSS code above it.

What is CSS3?

At the time of writing this article, CSS3 is the latest version of CSS. Modern browsers will refer to CSS3 by default unless otherwise specified.

What is Sass?

Sass is a style sheet language that processes into CSS. Saas gives you enhanced customizability options. We recommend you learn Sass if you are a web designer or developer.

Avanka IT Tips on CSS

1. Do not use the !important tag unless it necessary. This will prevent conflicts within your application.
2. If an element repeats always use classes instead of incline CSS.
3. Check to make sure your code is cross-browser compatible.

Conclusion

CSS is a fun and easy language to learn. Make sure you know what your basic selectors and declarations. Also ensure you know The CSS Box Model to prevent confusion when writing your code.

A Quick Request

Please share this article on your social media feeds if you found it useful.

Contact us anytime if you would like us to write about a particular topic or want to improve your coding skills.

References

• CSS Introduction. (2018). Retrieved September 20, 2018, from https://www.w3schools.com/css/css_intro.asp
• Borgen, P. H. (2018, May 02). Learn the basics of CSS in 5 minutes – freeCodeCamp.org. Retrieved September 20, 2018, from https://medium.freecodecamp.org/get-started-with-css-in-5-minutes-e0804813fc3e
• CSS basics. (2018). Retrieved September 20, 2018, from https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics
• CSS tutorial starting with HTML + CSS. (2018). Retrieved September 20, 2018, from https://www.w3.org/Style/Examples/011/firstcss.en.html
• Graham, G. (2018, February 21). CSS Basics: The Second “S” in CSS. Retrieved September 20, 2018, from https://css-tricks.com/css-basics-second-s-css/