CSS and CSS3: A Tutorial for Beginners

In this article, people at Designveloper will show you the definition of CSS and CSS3 and step-by-step CSS tutorials for beginners.

Because if you want to become a front-end developer or just simply want to administrate your own website easier but do not know where to start, then HTML, CSS and JavaScript are the complete triads for what you need. However, either your web is simple or complex, the experience on HTML or CSS is indispensable. Even if you are a designer, the basic knowledge of CSS will let you communicate better with developers.

What are CSS and CSS3?

CSS or Cascading Style Sheets is a language that forms style for web pages. It is a style sheet language used to describe the interface and format of elements written in a markup language like HTML.

CSS and CSS3 were developed by W3C (World Wide Web Consortium) in 1996 to make an HTML page more aesthetic. It is a key element of web design with the power to separate the presentation and content including layout, colors, and fonts. With CSS, you can adjust background colors & images, layout design, line spacing, font style, variations in display for different devices and screen sizes as well as effects.

CSS usually works with markup languages like HTML or XHTML. Without CSS, HTML is just a boring document container. However, CSS and HTML are kept entirely separate in two different files so that designers can make changes with the appearance without affecting any of its underlying structure.

CSS3 is the latest version of CSS that has been published since 2005. CSS3 has a bunch of new superiority features like rounded corners, shadows, gradients, transitions or animations, as well as new types of layouts like multi-columns, FLEX box or grid layouts. It contains everything from the previous version (CSS2.1) and also includes new features to help developers solve a number of problems without the need for non-semantic markup, complex scripting, or extra images. These new features are:

  • The incorporation of Modules
  • New Combinatory
  • New CSS Selectors
  • New Pseudo-elements
  • New Style properties

So nowadays, when people talk about CSS, they actually mention CSS3 and not other older versions.

Three reasons why you should learn CSS

There are thousands of free available templates online but it may not fit your needs. By learning CSS and CSS3, you can modify pre-built templates without any effort. In addition, CSS also allows non-coding people like graphic designers to control the look, feel, and consistency of the website’s front-end without diving too much into the code world.

A lot of time is saved while using CSS. For example, your website has 40 pages and due to some reasons, you need to change all the text sizes from 14pt to 12pt. It may take you days to implement the whole thing by hand. However, with CSS, you can define all the changes in just a single CSS file and reference all those 40 pages to that same file to complete your work. Consequently, your entire website will reflect the size changes immediately.

All browsers now support CSS so using CSS helps you build responsive, future-proof, and highly accessible websites. As we mentioned above, it’s a must if you want to modify the look of your website!

CSS and CSS3 tutorials

Follow these steps to clarify your CSS roadmap:

Image for post
Image for post

You should learn the basics of HTML before trying any CSS as HTML is the frame that CSS will add style to.

HTML stands for HyperText Markup Language — a standard markup language for web pages. HTML elements are the building blocks of HTML pages which are represented by <> tags. You can distinguish an HTML web or PHP web through its link. HTML pages usually end with .HTML or .HTM.

HTML is considered as a simple language. All web browsers can render HTML pretty well. Nowadays, the latest version of HTML is HTML5 with quality and good features compare with the older HTML versions.

Some HTML documents:

Image for post
Image for post

So, you knew about HTML or the frame for the website, now it’s time to add some styles to it with CSS. Here are all CSS fundamentals:

  • Selector: selectors are patterns used to select the element(s) you want to style. Two of the most important CSS selector are .class and #id. At first, there are only seven selectors in CSS1 but the number is over 30 selectors now. Using selectors effectively will help us utilize the power of CSS and CSS3 and prevent writing unnecessary JavaScript code.
  • Basic layout: You must have experience on the box model; the difference between block and inline-block; how these affect padding, border, margin, and width. Furthermore, you will have to acquire knowledge about floats, positioning (especially relative, static, and absolute) and the newer flexbox model.
  • Basic rules: Get to know how to style backgrounds, type, shadows, transformations, etc… and how to style elements using the fewest possible images to reduce browser load times
  • Browser differences: Each browser has some different attributes even though all browsers support CSS. Additionally, browsers differ greatly not only in default styles for forms but even in the style rules

Some valuable resources for you:

Once you have covered the basics, we will move to the next step and learn how to use CSS frameworks. There are many CSS frameworks available now such as Materialize CSS, Bulma, and Semantic UI, but in this article, we will discuss Bootstrap — the most famous one. Clearly enough, Bootstrap allows developers to design easier and faster responsive web with HTML templates, CSS templates, and even JavaScript plugins! In fact, its power is used to create typography, forms, buttons, tables, navigation, modals, image carousels and much more.

Start learning Bootstrap with:

CSS Architecture is a set of guidelines and best practices to help developers write maintainable, scalable and more reusable code. By applying a modular approach, enhancing organization and naming code meaningfully, we can build clean CSS code architecture. These three important modular CSS methodologies are:

  • OOCSS or Object-Oriented CSS because it works best in an Object-Oriented environment. OOCSS will separate objects and reuse them in the same structure. OOCSS will lighten your CSS file to save loading time, easy to maintain or add CSS for the same object.
  • SMACSS or Scalable and Modular Architecture for CSS: is more a style guide than a rigid framework. It is the instructions to analyze the design, organize a scalable (Code need to organize in an easy scalability way when websites are getting bigger and Bigger) and modular (separate code into small blocks to reuse when needed) CSS
  • BEM or Block-Element-Modifier: a naming standard for CSS class. BEM provides a modular structure for your CSS project. With its unique naming scheme, we will not run into conflicts with other CSS names and debug code faster.

Know more about CSS architecture through these resources:

A CSS preprocessor is a program that extends the default capabilities of CSS and lets you generate CSS from the preprocessor’s own unique syntax. Writing CSS preprocessors will save time and reduce the number of errors or code bloat. It is flexible, easy to maintain and built. There are a lot of CSS preprocessors but developers usually use SASS, LESS, and Stylus.

You can learn about CSS preprocessor at:

It would be a plus if you know how to use Photoshop and/or are familiar with SEO. So many developers nowadays design web on Photoshop before converting it to HTML and CSS form. Creating a design in Photoshop is quick and easy to change or share for everyone.

Image for post
Image for post

On the other side, SEO or search engine optimization is a standard that helps your website rank on top of Google search results. Knowing its rules will help you optimize your website’s content.

These are all the resources you need to learn about CSS and CSS3. We hope that with this instruction, you can easily take a step in the CSS world to develop and edit your first-ever website.

Don’t forget to follow our Facebook, Twitter, and LinkedIn to read more posts like this! 😉

Written by

Designveloper is leading software development company in Vietnam. We offer Web development, mobile application, UI/UX Design, VOIP. www.designveloper.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store