Ever visit an older website and just cringe?
These days, almost all websites are sleek and intuitively usable. As visitors, we take for granted that the sites we peruse feature pleasant color palettes, consistent fonts and reasonable text sizes. We’re so accustomed to elegant designs that when we see a bare-bones site with flat colors or clashing fonts, we reflexively click away.
Aesthetics are essential — which is why, to become a web developer or even manage a website, you need to know how to use CSS. CSS is a fundamental tool that empowers site designers to create a cohesive, appealing design that maintains its consistency across pages.
In this article, we’ll explain what you need to know before you learn CSS, provide a few tutorials to help you grasp the basics and give you a few insights into the professional value the skill offers.
What Is CSS?
CSS, or Cascading Style Sheets, is a tool that allows web developers to define layouts, adjust fonts and colors, add effects and thoroughly customize the appearance of HTML-constructed websites. Before CSS, web developers had to rely on HTML alone to determine visual aspects — and even then, the results weren’t great. But today, HTML usually only provides the underlying structure of a site, whereas CSS now gives developers control over their site’s design choices.
Cascading Style Sheets (CSS) was first proposed in October 1994 by Håkon Wium Lie, a Norwegian web pioneer who was frustrated by the lack of styling options available in web development. Lie’s original concept was well-received for its simplicity and ability to “cascade” formatting decisions out over several pages.
However, it would take another two years for Lie and his design partner, Gijsbert (Bert) Bos, to create a functional version of CSS. But even then, the technology wasn’t complete — another decade would pass before the language evolved into the iteration we use today. Since then, CSS has become a standard means of determining a website’s appearance and design elements.
Why learn CSS?
It doesn’t matter if you want to be a professional web developer, marketer, business owner or tech-savvy intern — if you deal with websites, you need to know CSS. Being able to manage the appearance of a website can provide tremendous professional value; if you know CSS, you’ll be better equipped to achieve at work and command a higher market value for your skill set.
Not sure where to start? A CSS tutorial or coding bootcamp can provide you with the job-ready skills you need to begin building and designing sites independently.
Skills covered in these tutorials:
- Selectors & Colors
- Display & Positioning
- Shadows & Transitions
- Visualization Rules
Introduction to CSS
Cascading Style Sheets, or CSS, is frequently used in tandem with HyperText Markup Language (HTML) to define page layouts and appearance. CSS defines nearly every aspect of formatting you could think of, from determining fonts to setting table sizes and default text size.
That said, CSS’s main draw isn’t its ability to define basic formatting — after all, modern HTML can do that. Instead, developers use CSS because it can extrapolate a specific style choice across multiple pages. Once a style is defined in a Cascading Style Sheet, it can be applied to any page that references that CSS file.
This capability saves developers the trouble of defining every detail of each page manually and facilitates a more even, cohesive design. It also allows for quick changes; if a web designer needs to increase a site’s default text size, for example, they could enact the change in a matter of moments by editing a style sheet.
Let’s review some basics you’ll need to cover as you learn CSS.
CSS syntax encompasses two primary components. The first is property, which identifies the website feature under consideration. The second is value, which describes how a browser’s CSS engine should depict the property on a webpage. There are well over 100 different property types in CSS and an infinite number of possible values.
Each value-and-property pair constitutes a declaration. Here’s some basic CSS for beginners:
CSS groups instructions into declaration blocks that are enclosed by opening and closing braces. These, as you’ll see below, use semicolons to isolate each directive.
It is worth noting that while you technically don’t need the final semicolon for the code to work, including it is widely considered to be good form.
CSS Rule Sets
The term “rule sets” refers to a selector group and its associated declarations block. A selector group defines which elements of a page a given declaration block affects. Here’s a quick CSS tutorial on what this looks like in practice:
In this case, the declaration block would apply only to the header. However, you could extend the formatting to other elements by adding them in a comma-separated list in the selector group. But be careful — if one of your selectors is invalid, the entire rule set will be ignored as such.
You could also use a primary HTML tag as a selector, such as <p> for a paragraph or <ul> for a bulleted list. By applying values to that selector, you can determine how every paragraph or bulleted list on your website will appear.
You can also use the classes defined in your HTML attributes to select certain instances of a particular HTML tag. For example, you might define all of the paragraphs on your site within team bios with the HTML class:
You could then use CSS to define the appearance of all of the team biographies by referencing this class as a selector in your rule set.
Because CSS is a cascading styling language, later declarations can replace or add onto earlier ones. For example, you might initially define the appearance of all paragraphs and then create another CSS selector with declarations that apply to only a specific class or category of paragraphs. CSS has a standard cascade algorithm to determine which instructions take precedence.
Fonts and Text
One of the most important functions of CSS is to change the appearance of the text and typography on a website.
The CSS properties related to text formatting fall into two buckets: font styles and text layout styles. As you might expect, font styles address text’s font and size, as well as emphasis formatting such as bold, italics and underline.
Text layout addresses text alignment and the spacing between letters and lines. Text styles apply broadly, so any text you want to style differently should be wrapped inside an additional HTML element to differentiate it from the surrounding paragraphs or sections.
You can determine your website’s typography or font choice with the “font-family” CSS property. You may want to use a web-safe font such as Arial, Georgia, Times New Roman or Trebuchet, which are all universally supported on the web.
That said, you can add a custom font to your website by using the @font-face rule. Alternatively, you could use the @import rule to load a font that is hosted on another website. One of the most popular resources for this is Google Fonts, which offers an extensive library of fonts for free usage across the web.
With the “color” property, you can define your text’s color with any hex color code or HTML color name. By using the “font-size” property, you can also determine text size. There are several other properties that you can use in CSS to determine the appearance of text. “Text-transform,” for example, allows you to make particular text snippets all capitals or all lowercase, and “font-weight,” will enable you to use the bold or normal weight of a specific font.
Of course, you can also use CSS to determine other aspects of the appearance of your text. The “text-align” property can align your text to the right, left or center. By using “line-height,” you can expand or decrease the size between lines of text, much like using single-spacing or double-spacing on a word processor. Text properties can further define details like indentation, white space, breaks within words and even whether the text is flowing horizontally or vertically.
Understanding how the CSS box model works is a crucial part of learning how to use CSS.
Essentially, every element on the page, regardless of how it looks to the user, is a rectangular box. This box has properties that define it, including its width, height, padding, borders and margins. Because every element that is part of every HTML page is part of the box model, visualizing your page as a series of rectangles can help you understand how your website’s components come together into a cohesive whole.
Each part of the box model has a CSS property, and the total width and height of an element are determined by adding together the item’s actual size along with the borders, margins and padding. The top, bottom, right and left values for these properties can be set separately.
The margin is the amount of space surrounding an element outside its border. Developers can use margins to position an element in a particular area of a page or provide white space and separation.
Padding, on the other hand, exists inside the border of an element and provides internal spacing. For example, coders might use padding to create more space around text or photos inside a display box. A border is just what it sounds like: the edge of an element, which can take on different visual display properties, including the size, color and style.
Inline CSS mixes up the usual, linear arrangements of box-based layouts. It can be used to apply a style to only one element in your HTML document and instruct it to deviate from design norms. For example, inline CSS might allow you to superimpose one element atop another or keep an element in-view as a visitor scrolls.
Changes You Can Make
Developers can use CSS to make an endless number of changes to a website’s appearance. You can change the background color of your page, header or any other internal element. You can even give your boxes and images rounded borders or position them in a fixed location, keeping them continually visible.
CSS is an exemplary mechanism for creativity in web design; once you understand the coding rules and principles, you’ll have an almost unlimited number of styles to explore.
Who Needs to Learn CSS?
It might be more accurate to ask who doesn’t need to learn CSS. Given that CSS is one of the fundamental building blocks of the web, knowing it can provide tremendous professional value to anyone who works in tech, deals with websites or dabbles in design.
Understanding CSS is crucial to creating, maintaining and designing impactful websites. Fortunately, the technology is relatively easy to learn and produces immediate visual results for beginner coders. You’ll certainly gain a professional edge if you take the time to learn HTML and CSS!
Below, we’ve listed a few careers that require CSS skills.
A web designer’s focus is on appearance — in other words, what users see when interacting with a website. The visual appearance of web pages is one of the most important aspects of attracting customers and conveying information effectively.
You don’t have to be a professional web designer or developer to benefit from having CSS skills. If you own a personal or business website, knowing how to update, design or otherwise change a webpage can be crucial. With CSS, you can change the look and feel of your website to suit your vision and portray the brand you want. Knowing basic web design saves you from needing to rely on tired templates or pay for a developer’s help.
Front End Developer
A user interface (UI) designer’s primary goal is functionality. As the job title suggests, UI designers focus on the interfaces, or client-facing pages or screens, that visitors interact with when using a digital product or site. They ensure that the interface is as intuitive, pleasant and usable as possible; their work sets the foundation for a positive user experience.
An art or design director oversees all aspects of design work, including both web and non-web design. Given their role, directors should have knowledge of and familiarity with a range of design tools. Having CSS knowledge can be vital when an art director needs to lead or give direction on a web-based or digitally advertised project.
Full Stack Developer
How Long Does It Take to Learn CSS?
It depends on you! The amount of time it takes you to learn CSS will vary based on how much HTML knowledge you have, your learning method and how often you study.
If you already have a grasp of HTML, you’ll probably pick up the basics faster than someone entirely new to coding. You’ll also learn faster if you make a point to study a little every day or, at the very least, a few times a week. As an independent learner with a reasonable study schedule, you can expect to pick up the CSS basics in a few weeks.
Consider your goals when outlining your learning timetable! If you’re just interested in picking up coding as a hobby, you may not need the quick turnaround and extensive curriculum that come with a bootcamp. However, if you want to upskill into a coding job quickly, a formal educational experience might be your best bet!
What Else Should I Learn to Complement CSS Skills?
Not sure how or where to get started? If you want to become a professional coder quickly, consider enrolling in Berkeley Coding Boot Camp! This intensive, instructor-led program will help you learn full stack fundamentals and build a job-ready skill set in just three to six months. Interested? Contact us today for more information!
FAQs About CSS
Is CSS hard to learn?
CSS, like HTML, is an accessible language. Because it creates immediate visual results and you can test your code right away, you can easily see and learn from your mistakes and successes. Many properties and values are based on standard English, so it is easy to think about what you are learning, even as you become accustomed to CSS’s unique structure and syntax. CSS can serve as a great starting point for those new to coding.
How long does it take to learn HTML and CSS?
Learning timelines vary from person to person! If you’re new to coding and trying to learn HTML and CSS through self-directed online tutorials, your turnaround may be longer than if you opt for a formal course. That said, you can expect to pick up the basics of HTML and CSS in about a month, provided you study regularly.
Navigate CSS Articles
From basic knowledge to more advanced CSS coding techniques.
Get Program Info
Ready to learn more about Berkeley Coding Boot Camp in San Francisco? Contact an admissions advisor at (510) 306-1218.