html and css assignment pdf

32 HTML And CSS Projects For Beginners (With Source Code)

updated Aug 20, 2024

If you want to feel confident in your front-end web developer skills, the easiest solution is to start building your own HTML and CSS projects from scratch.

As with any other skill, practicing on simple, realistic projects helps you build your skills and confidence step-by-step.

But if you are new to HTML and CSS, you may be wondering:

Where can I find ideas for beginner-level HTML and CSS projects?

Even if you are just starting out with HTML and CSS, there are some fun and easy projects you can create.

Whether you are new to learning web development or have some experience under your belt, this guide is the perfect place to start improving your skills.

In this article, I’ll walk you through 32 fun HTML and CSS coding projects that are easy to follow. We will start with beginner-level projects and then move on to more demanding ones.

If you want to become a professional front-end developer, the projects below will help you expand your portfolio.

When it’s time to apply for your first entry-level job, you can showcase your skills to potential employers with a portfolio packed with real-life project examples.

Let’s get started!

Please note: This post contains affiliate links to products I use and recommend. I may receive a small commission if you purchase through one of my links, at no additional cost to you. Thank you for your support!

What are HTML and CSS?

HTML and CSS are the most fundamental languages for front-end web development.

Learning them will allow you to:

• Build stunning websites
• Start a coding blog
• Make money freelancing

Let’s take a quick look at both of them next:

What is HTML?

HTML or HyperText Markup Language is the standard markup language for all web pages worldwide.

It’s not a “typical” programming language like Python or Java since it doesn’t contain any programming logic. HTML can’t perform data manipulations or calculations, for example.

Instead, HTML allows you to create and format the fundamental structure and content of a web page.

You will use HTML to create:

• Page layouts (header, body, footer, sidebar)
• Paragraphs and headings
• Input fields
• Checkboxes and radio buttons
• Embedded media

Thus, HTML only allows you to determine the structure of a web page and place individual content elements within it.

For more details, check out my post on what HTML is and how it works .

You can’t format the look and feel of your web page with HTML, though.

Your HTML web page will look dull and boring. Sort of like this:

The example above is the first web page every built for the WWW , by the way.

This is how websites used to look in the ’90s. But we’ve come a long way since.

To make your HTML content visually appealing and professional-looking, you need another language: CSS. Let’s look at that next.

What is CSS?

CSS or Cascading Style Sheets is a style sheet language that allows you to adjust the design and feel of your HTML content.

Thus, CSS allows you to turn your pure-HTML pages into stunning, modern websites. And it’s easy to learn, too!

CSS allows you to target individual HTML elements and apply different styling rules to them.

For example, here’s a CSS rule that targets H2 headings, their font-size property, and sets it to a value of 24px:

You can use CSS to adjust:

• Page layouts and sections
• Backgrounds
• Fonts and text styling
• Spacings (paddings, margins)
• Borders and shadows
• CSS animations
• Responsiveness (with media queries)

If you want to create stunning websites and become a front-end web developer, CSS is one of the first tools you must learn and master.

For more details, check out my post on what CSS is and how it works .

Why build HTML and CSS projects?

Practicing on realistic, hands-on projects is the best way to learn how to create something useful and meaningful with HTML and CSS.

The more projects you finish, the more confidence you build.

To build a web page from scratch you need a basic understanding of how HTML works. You should be comfortable with writing the necessary HTML code to create a page without copying a boilerplate or following a tutorial.

Thus, if you want to become a front-end web developer , building HTML and CSS projects will teach you how to use these two languages in real life.

Therefore, practising your skills with the projects in this article will give you a competitive edge against anyone who’s simply following tutorials and copy-pasting other people’s code.

Finally, building HTML and CSS projects helps you build a professional portfolio of real-world projects.

When it’s time to start applying for your first job, you will have 10 to 20 cool projects to showcase your skills to potential employers. Not bad!

32 HTML and CSS projects: Table of contents

Here’s an overview of the HTML and CSS projects we’ll go through:

Beginner project: CSS radio buttons

Beginner project: css toggle buttons, beginner project: hamburger menu, beginner project: pure css sidebar toggle menu, beginner project: animated css menu, beginner project: custom checkboxes, beginner project: pure css select dropdown, beginner project: modal/popup without javascript, beginner project: animated gradient ghost button, beginner project: css image slider, basic html & css website layout, tribute page, survey page with html forms, sign-up page / log-in page, job application form page, landing page, product landing page, interactive navigation bar, responsive website header, restaurant menu, restaurant website, parallax website, custom 404 error page, personal portfolio website, blog post layout.

• Photography website

Music store website

Discussion forum website.

• Event or conference website

Technical documentation website

Online recipe book, website clone.

Share this post with others!

This quick project is a great example of what you can do with pure CSS to style radio buttons or checkboxes:

See the Pen CSS radio buttons by Angela Velasquez ( @AngelaVelasquez ) on CodePen .

☝️ back to top ☝️

This HTML and CSS project teaches you how to create custom CSS toggle buttons from scratch:

See the Pen Pure CSS Toggle Buttons | ON-OFF Switches by Himalaya Singh ( @himalayasingh ) on CodePen .

Every website needs a menu, right?

This hamburger menu is beautiful and clean, and you can build it with just HTML and CSS:

See the Pen Pure CSS Hamburger fold-out menu by Erik Terwan ( @erikterwan ) on CodePen .

Placing your website navigation inside a sidebar toggle is an easy way to clean up the overall look and feel of your design.

Here’s a modern-looking solution to a pure-CSS sidebar toggle menu:

See the Pen PURE CSS SIDEBAR TOGGLE MENU by Jelena Jovanovic ( @plavookac ) on CodePen .

If you want to build a more dynamic, interactive website navigation, try this animated CSS menu:

See the Pen Animate menu CSS by Joël Lesenne ( @joellesenne ) on CodePen .

Styling your checkboxes to match the overall design is an easy way to elevate the look and feel of your website.

Here’s an easy HTML and CSS practice project to achieve that:

See the Pen Pure CSS custom checkboxes by Glen Cheney ( @Vestride ) on CodePen .

Standard select dropdowns often look dull and boring. Here’s a quick CSS project to learn how to create beautiful select dropdowns easily:

See the Pen Pure CSS Select by Raúl Barrera ( @raubaca ) on CodePen .

Modals and popups often use JavaScript, but here’s a pure HTML and CSS solution to creating dynamic, interactive modals and popups:

See the Pen Pure css popup box by Prakash ( @imprakash ) on CodePen .

Ghost buttons can look great if they fit the overall look and feel of your website.

Here’s an easy project to practice creating stunning, dynamic ghost buttons for your next website project:

See the Pen Animated Gradient Ghost Button Concept by Arsen Zbidniakov ( @ARS ) on CodePen .

This image slider with navigation buttons and dots is a fantastic HTML and CSS project to practice your front-end web development skills:

See the Pen CSS image slider w/ next/prev btns & nav dots by Avi Kohn ( @AMKohn ) on CodePen .

Now, before you start building full-scale web pages with HTML and CSS, you want to set up your basic HTML and CSS website layout first.

The idea is to divide your page into logical HTML sections. That way, you can start filling those sections with the right elements and content faster.

For example, you can break up the body of your page into multiple parts:

• Header: <header>
• Navigation: <nav>
• Content: <article>
• Sidebar: <aside>
• Footer: <footer>

Depending on your project, you can fill the article area with a blog post, photos, or other content you need to present.

This layout project will serve as a starting point for all your future HTML and CSS projects, so don’t skip it.

Having a template like this will speed up your next projects, because you won’t have to start from scratch.

Here are two tutorials that will walk you through the steps of creating a basic website layout using HTML and CSS:

• https://www.w3schools.com/html/html_layout.asp
• https://www.w3schools.com/css/css_website_layout.asp

Building a tribute page is fantastic HTML and CSS practice for beginners.

What should your tribute page be about?

Anything you like!

Build a tribute page about something you love spending time with.

Here are a few examples:

• a person you like
• your favorite food
• a travel destination
• your home town

My first HTML-only tribute page was for beetroots. Yes, beetroots. I mean, why not?

HTML and CSS concepts you will practice:

• HTML page structure
• basic HTML elements: headings, paragraphs, lists
• embedding images with HTML
• CSS fundamentals: fonts and colors
• CSS paddings, margins, and borders

Here’s a helpful tutorial for building a HTML and CSS tribute page .

Whether you want to become a full-time web developer or a freelance web designer, you will use HTML forms in almost every project.

Forms allow you to build:

• Contact forms
• Login forms
• Sign up forms
• Survey forms

Building a survey page allows you to practice HTML input tags, form layouts, radio buttons, checkboxes, and more.

Pick any topic you like and come up with 10 pieces of information you want to collect from respondents.

Perhaps an employee evaluation form? Or a customer satisfaction form?

• form elements: input fields, dropdowns, radio buttons, labels
• styling for forms and buttons

Here’s an example survey form project for inspiration:

See the Pen Good Vibes Form by Laurence ( @laurencenairne ) on CodePen .

Let’s practice those HTML forms a bit more, shall we?

For this project, you will build a sign-up or log-in page with the necessary input fields for a username and a password.

Because we can create a user profile on almost every website, forms are absolutely essential for allowing people to set their usernames and passwords.

Your forms will collect inputs from users and a separate back-end program will know how to store and process that data.

Creating a clean and clear sign-up page can be surprisingly difficult. The more you learn about HTML and CSS, the more content you want to create to showcase your skills. But the thing is: a sign-up page needs to be as clean and easy-to-use as possible.

Thus, the biggest challenge with this project is to keep it simple, clear, and light.

Here’s an example project to get started with:

See the Pen Learn HTML Forms by Building a Registration Form by Noel ( @WaterNic10 ) on CodePen .

For more inspiration, check out these 50+ sign-up forms built with HTML and CSS .

Using a HTML form is the best way to collect information from job applicants.

You can also generate and format a job description at the top of the page.

Then, create a simple job application form below to collect at least 10 pieces of information.

Use these HTML elements, for example:

• Text fields
• Email fields
• Radio buttons

Here’s an example job application page you can build with HTML and CSS:

See the Pen Simple Job Application Form Example by Getform ( @getform ) on CodePen .

One of your first HTML and CSS projects should be a simple landing page.

Your landing page can focus on a local business, an event, or a product launch, for example.

Landing pages play an important role for new businesses, marketing campaigns, and product launches. As a front-end developer, you will be asked to create them for clients.

For this project, create a simple HTML file and style it with CSS. Be sure to include a headline, some text about the company or its services, and a call-to-action (CTA) button.

Make sure that your landing page is clean and clear and that it’s easy to read.

If you build a landing page for a new product, highlight the product’s key benefits and features.

To get started, follow this freeCodeCamp tutorial to build a simple landing page . You will need JavaScript for a few features. If you are not familiar with JavaScript, leave those features out for now and come back to them later.

For more inspiration, check out these HTML landing page templates .

A product landing page is a page that you build to promote a specific product or service.

For example, if you want to sell your ebook about how to use CSS to build an animated website, then you would create a product landing page for it.

Your product landing page can be very simple to start with. When your skills improve, add some complexity depending on what kind of information you need to present.

One of the most iconic product landing pages is the iPhone product page by Apple, for example:

Of course, the iPhone landing page is technically complex, so you won’t build it as your first project. But still, it’s a good place to find inspiration and new ideas.

The best way to design your first product landing page is to create a simple wireframe first. Sketch your page layout on paper before you start building it.

Wireframes help you maintain a clear overview of your HTML sections and elements.

To get started, browse through these product landing page examples for some inspiration .

Building an interactive navigation bar will teach you how to create an animated menu with dropdowns using HTML and CSS.

This is another great project for beginners, because it will teach you how to create menus using HTML and CSS. You’ll also learn how to style them with different colors, fonts, and effects.

You’ll also learn how to use anchors and pseudo-classes to create the menu navigation, as well as how to create the dropdown menus from scratch.

If you aren’t familiar with CSS media queries yet, building a responsive navigation bar is a smart way to learn and practice them.

CSS media queries allow you to create a responsive navigation menu that changes its size and layout depending on screen width.

To get started, check out this tutorial on how to build an interactive navigation bar with HTML and CSS .

One of the best ways to practice your HTML and CSS skills is to create custom website headers. This is a great project to add to your portfolio website, as it will show off your skills and help you attract new clients.

There are a number of different ways that you can create a stylish and responsive website header. One option is to use a premade CSS framework such as Bootstrap or Foundation. Alternatively, you can create your own custom styles by hand.

No matter which option you choose, be sure to make your header mobile-friendly by using media queries. This will ensure that your header looks great on all devices, regardless of their screen size or resolution.

To get started, check out this simple example for a responsive HTML and CSS header .

If you’re looking to get into web development, one of the best HTML and CSS projects you can build is a simple restaurant menu.

Align the different foods and drinks using a CSS layout grid.

Add prices, images, and other elements you need to give it a professional, clean look and feel.

Choose a suitable color palette, fonts, and stock photos.

You can also add photos or a gallery for individual dishes. If you want to add an image slider, you can create one with HTML and CSS, too.

Here’s an example of a very simple restaurant menu project:

See the Pen Simple CSS restaurant menu by Viszked Tamas Andras ( @ViszkY ) on CodePen .

Once you’ve built your restaurant menu with, it’s time to tackle a more complex HTML and CSS project.

Building a real-life restaurant website is a fun way to practice a ton of HTML and CSS topics.

Not only will you learn the basics of creating a beautiful, professional web page, but you also get a chance to practice responsive web design, too.

And if you’re looking to land your first front-end web developer job, having a well-designed business website in your portfolio will help you stand out from the crowd.

Make sure your website matches the restaurant’s menu and target clientele. A fine-dining place on Manhattan will have a different website than a simple (but delicious!) diner in rural Wisconsin.

Here are a few key details to include on your restaurant website:

• Clear navigation bar
• Restaurant details
• Menu for food and drinks
• Location and directions
• Contact details
• Upcoming events

To get started, check out this free tutorial on how to build a restaurant website with HTML and CSS .

To build a parallax website, you will include fixed background images that stay in place when you scroll down the page.

Although the parallax look isn’t as popular or modern as it was a few years back, web designers still use the effect a lot.

The easiest way to build a parallax HTML and CSS project is to start with a fixed background image for the entire page.

After that, you can experiment with parallax effects for individual sections.

Create 3-5 sections for your page, fill them with content, and set a fixed background image for 1-2 sections of your choice.

Word of warning: Don’t overdo it. Parallax effects can be distracting, so only use them as a subtle accent where suitable.

Here’s an example project with HTML and CSS source code:

See the Pen CSS-Only Parallax Effect by Yago Estévez ( @yagoestevez ) on CodePen .

404 error pages are usually boring and generic, right?

But when a visitor can’t find what they’re searching for, you don’t want them to leave your website.

Instead, you should build a custom 404 error page that’s helpful and valuable, and even fun and entertaining.

A great 404 page can make users smile and – more importantly – help them find what they are looking for. Your visitors will appreciate your effort, trust me.

For some inspiration, check out these custom 404 page examples .

Any web developer will tell you that having a strong portfolio is essential to landing your first job.

Your portfolio is a chance to show off your skills and demonstrate your expertise in front-end web development.

And while there are many ways to create a portfolio website, building one from scratch using HTML and CSS will give you tons of valuable practice.

Your first version can be a single-page portfolio. As your skills improve, continue adding new pages, content, and features. Make this your pet project!

Remember to let your personality shine through, too. It will help you stand out from the crowd of other developers who are vying for the same jobs.

Introduce yourself and share a few details about your experience and future plans.

Employers and clients want to see how you can help them solve problems. Thus, present your services and emphasize the solutions you can deliver with your skills.

Add your CV and share a link to your GitHub account to showcase your most relevant work samples.

Make sure to embed a few key projects directly on your portfolio website, too.

Finally, let your visitors know how to get in touch with you easily. If you want, you can add links to your social media accounts, too.

In this project, you’ll create a simple blog post page using HTML and CSS.

You’ll need to design the layout of the page, add a title, a featured image, and of course add some content to your dummy blog post.

You can also add a sidebar with a few helpful links and widgets, like:

• An author bio with a photo
• Links to social media profiles
• List of most recent blog posts
• List of blog post categories

Once your HTML structure and content are in place, it’s time to style everything with CSS.

Photography website with a gallery

If you’re a photographer or just enjoy taking pictures, then this project is for you.

Build a simple photo gallery website using HTML and CSS to practice your web design skills.

Start with the basic HTML structure of the page, and figure out a cool layout grid for the photos. You will need to embed the photos and style everything beautiful with CSS.

My tip: Use CSS Flexbox and media queries to create a responsive galleries that look great on all devices.

Here’s a full tutorial for building a gallery website with HTML and CSS:

If you love music, why not practice your HTML and CSS skills by building a music store web page?

Before you start, make a thorough plan about your website structure. What’s the purpose of your music store? What genres will you cover?

Pick a suitable color palette, choose your fonts, and any background images you want to use.

My tip: If you feature album cover images, keep your colors and fonts as clean and simple as possible. You don’t want to overpower the album covers with a busy web page with tons of different colors and mismatching fonts.

Create a user-friendly menu and navigation inside the header. Fill the footer with helpful links for your store, career page, contact details, and newsletter form, for example.

Building a music store website with HTML and CSS is a great opportunity to practice your skills while you are still learning.

Start with very basic features, and add new ones as your skills improve. For example, you can add media queries to make your website responsive.

A forum is a great way to create a community around a topic or interest, and it’s also a great way to practice your coding skills.

In this project, you’ll create a simple forum website using HTML and CSS.

You’ll need to design the layout of the site, add categories and forums, and set up some initial content.

Of course, you should start with creating the basic layout and structure with HTML first. You will need a navigation bar, at least one sidebar, and an area for the main content.

To make your discussion forum website more interesting, add new content and remember to interlink related threads to make the site feel more realistic.

Event or conference web page

Creating a web page for an event is a fun HTML and CSS project for beginners.

You can either pick a real event and build a better landing page than the real one, or come up with an imaginary conference, for example.

Make sure to include these elements:

• Register button
• Venue details
• Dates and schedule
• Speakers and key people
• Directions (how to get there)
• Accommodation details

Divide the landing page into sections, and create a header and a footer with menus and quick links.

Come up with a suitable color palette, pick your fonts, and keep your design clean and clear.

Every programming language, software, device and gadget has a technical documentation for helpful information and support.

Creating a technical documentation website with just HTML and CSS allows you to build a multi-page site with hierarchies, links, and breadcrumbs.

The main idea is to create a multi-page website where you have a sidebar menu on the left, and the content on the right.

The left-hand side contains a vertical menu with all the topics your documentation covers.

The right-hand side presents the description and all the details for each individual topic.

For simplicity, start with the homepage and 2–3 subpages first. Come up with a clean layout and make sure your links are working properly.

Then, start expanding the website with additional sub-pages, content, and elements.

• HTML hyperlinks and buttons

Creating an online recipe book as an HTML and CSS project requires a similar setup than the previous project example.

You will need to create a homepage that serves as a directory for all your recipes. Then, create a separate subpage for each recipe.

If you want to challenge yourself, add recipe categories and create separate directory pages for each of them.

• embedding recipe photos

One of the best ways to practice HTML and CSS is to clone an existing web page from scratch.

Use your browser’s inspecting tools to get an idea of how the page is built.

As with any HTML and CSS project, start by creating the basic page template with:

Then, divide your page into sections, rows, and columns.

Finally, fill your page with individual elements like headings, paragraphs, and images.

Once the HTML content is in place, use CSS to style your page.

Start with something simple, like the PayPal login page.

Then move on to more demanding cloning projects, such as a news website. Try the BBC homepage, for example.

Where to learn HTML and CSS?

There are no prerequisites required for you to learn HTML and CSS.

Both languages are easy to learn for beginners, and you can start building real-life projects almost right away.

Here are a few courses to check out if you want to learn HTML and CSS online at your own pace:

1: Build Responsive Real World Websites with HTML5 and CSS3

Build Responsive Real World Websites with HTML5 and CSS3 was my first online web development course focused 100% on HTML and CSS.

You don’t need any coding or web development experience for this course. But if you have watched some online tutorials but you’re not sure how to create a full-scale website by yourself, you are going to love it.

2: The Complete Web Developer Course 2.0

The Complete Web Developer Course 2.0 changed my life back when I started learning web development.

This course takes you from zero to knowing the basics of all fundamental, popular web development tools. You’ll learn:

• HTML and CSS
• JavaScript and jQuery
• and much more

3: Modern HTML & CSS From The Beginning (Including Sass)

I’m a big fan of Brad Traversy, and I really can’t recommend his Modern HTML & CSS From The Beginning course enough.

Even if you have never built a website with HTML and CSS before, this course will teach you all the basics you need to know.

4: The Complete 2024 Web Development Bootcamp

One of my most recent favorites, The Complete 2024 Web Development Bootcamp by Dr. Angela Yu is one of the best web development courses for beginners I’ve come across.

If you’re not quite sure what area or language to specialize in, this course is the perfect place to try a handful of tools and programming languages on a budget.

5: Learn HTML (Codecademy)

Learn HTML is a free beginner-level course that walks you through the fundamentals with interactive online lessons.

Codecademy also offers a plethora of other web development courses. Check out their full course catalog here .

6: Responsive Web Design (freeCodeCamp)

The Responsive Web Design certification on FreeCodeCamp is great for learning all the basics of web development from scratch for free.

You start with HTML and CSS to get the hang of front-end web dev fundamentals. Then, you start learning new tools and technologies to add to your toolkit, one by one.

Also, check out these roundups with helpful web development courses:

• 27 Best Web Development Courses (Free and Paid)
• 20+ Web Development Books for Beginners
• 120+ Free Places to Learn to Code (With No Experience)
• 100+ Web Development Tools and Resources

Final thoughts: HTML and CSS project ideas for beginners

When it comes to learning HTML and CSS, practice makes perfect. Did you find a few inspirational ideas here to start building your next project?

Learning HTML and CSS may seem intimidating at first. But when you break it down into small, less-intimidating projects, it’s really not as hard as you might think.

Try these beginner-level HTML and CSS project ideas to improve your front-end web development skills. Remember to add your projects to your portfolio website .

It’s possible to learn how to code on your own, and it’s possible to land your first developer job without any formal education or traditional CS degree.

It all boils down to knowing how to apply your skills by building an awesome portfolio of projects like the ones above.

So, which project will you build first? Let me know in the comments below!

Once you feel comfortable with HTML and CSS, it’s time to start learning and practising JavaScript .

To get started, check out my guide with 20+ fun JavaScript projects ideas for beginners .

Share this post with others:

About mikke.

Hi, I’m Mikke! I’m a blogger, freelance web developer, and online business nerd. Join me here on MikkeGoes.com to learn how to code for free , build a professional portfolio website , launch a tech side hustle , and make money coding . When I’m not blogging, you will find me sipping strong coffee and biking around town in Berlin. Learn how I taught myself tech skills and became a web dev entrepreneur here . And come say hi on Twitter !

Leave a reply:

Download 15 tips for learning how to code:.

GET THE TIPS NOW

Sign up now to get my free guide to teach yourself how to code from scratch. If you are interested in learning tech skills, these tips are perfect for getting started faster.

• ▼HTML CSS Exercises, Practice, Solution
• Introduction
• HTML Basic Exercises
• HTML and CSS Exercises
• CSS Properties Exercises
• ▼HTML-CSS Practical Exercises
• HTML-CSS Practical Exercise Part-I
• HTML-CSS Practical Exercise Part-II
• HTML-CSS Practical Exercise Part-III
• More to Come ...

HTML CSS Exercise, Practice and Solution

Sharpen your skills with these html css exercises from w3resource.

Alongside studying HTML and CSS tutorials from w3resource, you need to practice HTML and CSS extensively to hone your Frontend Development skills. Here is a list of exercises we published till now. Subscribe to our RSS feed for more exercises.

HTML Basic Exercises [HTML Tags and their Attributes, Hundreds of exercises]

HTML and CSS [34 exercises]

CSS Properties Exercises [166 exercises]

HTML-CSS Practical Exercise Part-I [15 exercises with solution]

HTML-CSS Practical Exercise Part-II [16-30 exercises with solution]

HTML-CSS Practical Exercise Part-III [31-45 exercises with solution]

See the Pen html css common editor by w3resource ( @w3resource ) on CodePen .

• Weekly Trends and Language Statistics

Collection of 100 HTML and CSS Mini Projects for Beginners with Source Code

By Faraz - Last Updated: September 04, 2024

Explore 100 beginner-friendly HTML and CSS projects with source code. Kickstart your coding journey with hands-on practice, tutorials, and easy-to-follow examples.

HTML and CSS form the backbone of web development, and mastering them is crucial for anyone aspiring to become a web developer. One effective way to enhance your skills is by working on mini-projects. In this article, we'll explore a collection of 100 HTML and CSS projects suitable for beginners, each accompanied by its source code.

Table of Contents

Introduction to HTML and CSS Mini Projects

HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) are fundamental technologies for building web pages. Mini projects provide a practical approach for beginners to apply their knowledge and gain hands-on experience.

1. Glowing Search Bar

Enhance your web development skills with our first mini project - the Glowing Search Bar. This engaging HTML and CSS project not only teaches you the basics of form design but also introduces a captivating glowing effect. Users will learn how to create an interactive search bar that lights up when clicked, adding a touch of sophistication to any website. Dive into the provided source code to understand the underlying structure and make your web pages shine.

2. Social Media Icons

In the vast world of web development, incorporating social media icons seamlessly into your website is a crucial skill. Our second mini-project focuses on just that. Learn how to design and implement stylish social media icons using HTML and CSS. The accompanying source code breaks down the process step by step, empowering beginners to create visually appealing icons that link directly to their respective profiles.

3. Drop Down Menu

Navigation is key in creating user-friendly websites, and our third mini project, the Drop Down Menu, will teach you just that. This project delves into HTML and CSS to guide you through the creation of a sleek and functional drop-down menu. Understand the coding principles behind building a responsive navigation system that enhances the user experience. The provided source code ensures that beginners can grasp the concepts and implement this essential feature in their own projects effortlessly.

4. Simple Calculator

Explore the fundamentals of interactive web applications with our Simple Calculator mini project. This HTML and CSS project introduces the basics of form handling and user input. Users will discover how to create a minimalist calculator using straightforward code. Dive into the source code to comprehend the logic behind each function, gaining valuable insights into building more complex applications in the future.

5. Login Form

Security is paramount in the online world, making the creation of effective login forms a crucial skill for any web developer. Our fifth mini project guides beginners through the process of building a user-friendly Login Form using HTML and CSS.

6. Registration Form

Strengthen your grasp on web development by creating a Registration Form using HTML and CSS. This mini project walks beginners through the process of building a form that captures user details efficiently.

7. Animated Search Button

Elevate the visual appeal of your website with an Animated Search Button. This mini project delves into HTML and CSS animations, teaching beginners how to add dynamic elements to their pages. The provided source code breaks down the animation process, empowering users to implement eye-catching search buttons that enhance user engagement and interactivity.

8. Breadcrumb

Navigation is made seamless with the Breadcrumb mini project. Learn how to create a breadcrumb trail using HTML and CSS, aiding users in understanding their location within a website. The source code provides a step-by-step guide, making it easy for beginners to integrate this essential navigation feature into their web pages effectively.

9. Carousel Sliders

Delve into the world of dynamic content presentation with Carousel Sliders. This mini project introduces HTML and CSS techniques to create engaging image sliders. By exploring the source code, beginners can comprehend the logic behind carousel functionality, paving the way for them to showcase content in a visually appealing and interactive manner.

10. Loaders

Master the art of visual feedback with Loaders. This mini project focuses on creating loading animations using HTML and CSS, enhancing the user experience on your website. The source code offers a comprehensive understanding of designing and implementing loaders, providing beginners with the tools to make their websites more dynamic and user-friendly.

11. Radio Button

Dive into form elements with the Radio Button mini project. This HTML and CSS project guide beginners through the creation and styling of radio buttons, adding interactivity to user input forms.

12. Blog Card Grid

Enhance the visual appeal of your blog layout with the Blog Card Grid mini project. Using HTML and CSS, beginners can learn to create an organized and stylish grid of blog cards. The accompanying source code breaks down the structure and styling, offering insights into designing captivating blog layouts for a more engaging user experience.

13. Responsive Footer

Complete your website with a polished touch by mastering the art of a Responsive Footer. This mini project focuses on creating a bottom section that adapts seamlessly to various screen sizes.

14. Responsive Navbar

Navigation is made effortless with the Responsive Navbar mini project. Learn to create a navigation bar that adjusts gracefully to different screen sizes using HTML and CSS. The source code provides a step-by-step guide, enabling beginners to implement responsive navigation for an optimal user experience.

15. Switch Button

Add a touch of interactivity to your website with the Switch Button mini project. Using HTML and CSS, beginners can learn to create a toggle switch for various settings.

16. Bottom Tab Bar

Explore mobile-friendly navigation with the Bottom Tab Bar mini project. Using HTML and CSS, beginners can create a sleek bottom navigation bar commonly found in mobile applications. The source code provides insights into the structure and styling, making it easy for users to implement this intuitive navigation feature on their websites.

17. To Do List

Organize tasks efficiently with the To-Do List mini project. Using HTML and CSS, beginners can learn the basics of creating a dynamic task list with checkboxes.

18. Landing Page

Make a striking first impression with the Landing Page mini project. Learn to design and structure an appealing landing page using HTML and CSS. The source code breaks down the components, empowering beginners to create captivating entry points for their websites or projects.

19. Card Design

Elevate your content presentation with the Card Design mini project. Using HTML and CSS, beginners can explore the art of creating visually appealing cards to showcase information or products.

20. Login and Sign-Up Form

Strengthen your form-building skills with the Login and Sign-Up Form mini project. Using HTML and CSS, beginners can create a comprehensive user authentication system.

21. Neon Button

Add a vibrant and eye-catching element to your website with the Neon Button mini project. This attention-grabbing button design stands out, encouraging user interaction. Elevate the visual appeal of your site and draw attention to important calls-to-action with this electrifying HTML and CSS project.

Improve user interaction and focus with the Modal mini project. This feature allows you to display additional content or prompts in a pop-up window without navigating away from the current page. Enhance user engagement and create a more immersive experience on your website with this versatile HTML and CSS project.

23. Split Text

Bring a creative touch to your website's typography with the Split Text mini project. This eye-catching effect divides text into distinct elements, adding visual interest to headings and other textual content.

24. Product Page

Showcase your products effectively with the Product Page mini project. Learn to structure and style a compelling page using HTML and CSS. The source code breaks down the components, providing beginners with a foundation for creating engaging and informative product pages on their websites.

25. Button with Border Animation

Elevate your button designs with the Button with Border Animation mini project. Using HTML and CSS, beginners can explore the creation of buttons with dynamic border animations.

26. Google WebPage Clone

Hone your web development skills by recreating the iconic Google WebPage. This ambitious mini project uses HTML and CSS to guide beginners through the process of cloning Google's homepage.

27. Glitch Text Effect

Embrace the digital aesthetic with the Glitch Text Effect mini project. Using HTML and CSS, beginners can learn to create text elements with a glitchy, distorted appearance.

28. Apple Website Clone

Learn from the best by cloning Apple's website with this mini project. Using HTML and CSS, beginners can explore the intricacies of designing a modern and sleek webpage.

29. Spinners and Loaders

Optimize the user experience during loading times with the Spinners and Loaders mini project. These visually pleasing loading animations entertain users and signal that content is on its way. Improve user retention and satisfaction by incorporating these stylish loaders, turning potential wait times into engaging interactions.

30. NFT Landing Page

Explore the world of non-fungible tokens (NFTs) with the NFT Landing Page mini project. This project allows you to create a dedicated page for showcasing NFT collections or information. Stay on top of current trends in web development and cater to niche interests by incorporating this HTML and CSS project into your site.

31. Accordion

Enhance your webpage's content organization with the Accordion mini project. Using HTML and CSS, beginners can learn to create collapsible sections, saving space and improving user navigation. Dive into the source code to understand the structure and styling, enabling you to implement accordions seamlessly into your websites.

32. Social Media Icons with Tooltip

Elevate your social media presence with Social Media Icons featuring Tooltips. This mini project focuses on combining HTML and CSS to design and implement icons with interactive tooltips. Explore the source code to understand the principles behind creating visually appealing icons that provide additional information when hovered over.

33. Neobrutalism Sign-up Form

Embrace the modern design trend of neobrutalism with the Neobrutalism Sign-up Form. This mini project uses HTML and CSS to guide beginners through the creation of a sleek and minimalist sign-up form. Dive into the source code to understand the styling techniques, adding a touch of contemporary aesthetics to your web pages.

34. Responsive Card

Master the art of creating cards that adapt to various screen sizes with the Responsive Card mini project. Using HTML and CSS, beginners can learn to design cards that look great on both desktop and mobile devices. Explore the source code to understand responsive design principles, ensuring a polished appearance on all platforms.

35. Circular Grid

Explore a unique layout with the Circular Grid mini project. Using HTML and CSS, beginners can learn to arrange elements in a circular pattern, adding a creative touch to their web pages.

Add a user-friendly rating system to your website with the Rating mini project. Using HTML and CSS, beginners can learn to create interactive star or number-based ratings.

Introduce dynamic elements to your website with the Clock mini project. Using HTML and CSS, beginners can learn to design and implement a digital or analog clock.

38. Glassmorphism Loader

Stay on top of design trends with the Glassmorphism Loader mini project. Using HTML and CSS, beginners can learn to create loaders with a glass-like frosted glass effect. Explore the source code to understand styling techniques, allowing you to incorporate this trendy design element into your websites.

39. Checkout Form

Perfect your e-commerce user experience with the Checkout Form mini project. Using HTML and CSS, beginners can learn to create a comprehensive and visually appealing checkout form.

40. Modern Tooltips

Upgrade your website's tooltips with the Modern Tooltips mini project. Using HTML and CSS, beginners can learn to design and implement tooltips that align with contemporary design trends. Explore the source code to understand styling techniques, adding informative and visually appealing tooltips to your web pages.

41. Product Landing Page

Create a compelling showcase for your products with the Product Landing Page mini project. This feature allows you to present product details, images, and calls-to-action in a visually appealing layout.

42. Neumorphic Button

Embrace the neumorphic design trend with the Neumorphic Button mini project. Using HTML and CSS, beginners can learn to create buttons with a soft and tactile appearance. Dive into the source code to understand styling techniques, adding a touch of modern aesthetics to your web pages.

43. Maintenance Page

Handle website maintenance gracefully with the Maintenance Page mini project. Using HTML and CSS, beginners can learn to design a visually appealing maintenance page that keeps users informed.

44. Neumorphic Gradient Loader

Stay at the forefront of design trends with the Neumorphic Gradient Loader mini project. Using HTML and CSS, beginners can learn to create loaders with a neumorphic design and gradient background.

45. Industrial Web Design

Embrace an industrial aesthetic with the Industrial Web Design mini project. Using HTML and CSS, beginners can learn to design web pages with a rugged and mechanical look. Dive into the source code to understand styling techniques, adding a unique and thematic touch to your web projects.

46. Animated Checkbox

Add a touch of animation to user interactions with the Animated Checkbox mini project. Using HTML and CSS, beginners can learn to create checkboxes with engaging animations.

47. Responsive Grid List

Master the art of designing responsive grid lists with this mini project. Using HTML and CSS, beginners can learn to create lists that adapt gracefully to different screen sizes. Dive into the source code to understand responsive design principles, ensuring a polished appearance on various devices.

48. Marquee

Bring a dynamic touch to your website with the Marquee mini project. Using HTML and CSS, beginners can learn to create scrolling text or images.

49. Filter Menu

Enhance user navigation with the Filter Menu mini project. Using HTML and CSS, beginners can learn to create interactive menus that filter content based on user selections.

50. Comments Section

Encourage user interaction and community engagement with the Comments Section mini project. This project provides a platform for users to share their thoughts and feedback.

Explore the fundamentals of list design with this mini project. Using HTML and CSS, beginners can learn to create well-organized and visually appealing lists. Dive into the source code to understand the principles behind list styling, adding a touch of sophistication to your web pages.

52. Social Media Buttons

Amplify your social media presence with Social Media Buttons. This mini project uses HTML and CSS to guide beginners through the process of designing and implementing buttons that link directly to social media profiles.

53. Neubrutalism Cards

Embrace the neobrutalist design trend with Neubrutalism Cards. This mini project uses HTML and CSS to guide beginners through the creation of cards with a minimalist and raw aesthetic.

54. WhatsApp Web Interface

Replicate the familiar interface of WhatsApp for the web with this mini project. Using HTML and CSS, beginners can explore the structure and styling of a messaging application's web interface.

55. 3D Gradient Card

Add depth to your card designs with the 3D Gradient Card mini project. Using HTML and CSS, beginners can learn to create cards with a three-dimensional appearance and gradient background.

56. Hamburger Menu

Streamline navigation on your website with the Hamburger Menu mini project. Using HTML and CSS, beginners can learn to create a responsive and visually appealing menu that collapses into a hamburger icon on smaller screens.

57. Transitional Buttons

Add a touch of elegance to your buttons with the Transitional Buttons mini project. Using HTML and CSS, beginners can learn to create buttons with smooth transitions between states.

58. Our Services Section

Showcase your offerings effectively with the Our Services Section mini project. Using HTML and CSS, beginners can learn to design and structure a dedicated section highlighting the services offered.

59. Survey Form

Gather valuable insights from users with the Survey Form mini project. Using HTML and CSS, beginners can learn to create a comprehensive and visually appealing survey form.

60. Flower Shop Template

Create a visually stunning online presence for a flower shop with the Flower Shop Template mini project. Using HTML and CSS, beginners can explore the design and structure of a website template tailored for a floral business.

61. YouTube Clone

Embark on a comprehensive web development journey with the YouTube Clone mini project. Using HTML and CSS, beginners can explore the design and structure of a simplified version of the popular video-sharing platform.

62. Fruit Shop

Create a vibrant and visually appealing online presence for a Fruit Shop with the Fruit Shop mini project. Using HTML and CSS, beginners can explore the design and structure of a website template tailored for a fresh produce business.

63. Comment Box

Foster user interaction on your website with the Comment Box mini project. Using HTML and CSS, beginners can learn to design and structure a visually appealing comment section.

64. Gooey Effect Loader

Stay on the cutting edge of design trends with the Gooey Effect Loader mini project. Using HTML and CSS, beginners can learn to create loaders with a gooey, liquid-like effect.

65. Spotify Clone

Immerse yourself in the world of music streaming with the Spotify Clone mini project. Using HTML and CSS, beginners can explore the design and structure of a simplified version of the popular music platform. The source code provides insights into creating a visually appealing interface for music playback and exploration.

66. Social Media Share Buttons

Boost your content's visibility with Social Media Share Buttons. This mini project focuses on using HTML and CSS to design and implement buttons that facilitate easy sharing of content on various social media platforms.

67. Tailwind CSS Accordion

Dive into the world of utility-first CSS with the Tailwind CSS Accordion mini project. Beginners can explore the design and structure of an accordion component using the Tailwind CSS framework. The source code provides insights into creating a responsive and customizable accordion for efficient content organization.

68. Tailwind CSS Timeline

Master the art of creating timelines with the Tailwind CSS Timeline mini project. Using the Tailwind CSS framework, beginners can explore the design and structure of a responsive timeline component.

69. Testimonials

Showcase positive feedback and build trust with the Testimonials mini project. Using HTML and CSS, beginners can learn to design and structure a section dedicated to displaying customer testimonials. Explore the source code to understand the layout and styling, ensuring an impactful presentation of client reviews on your website.

70. Blog Post Layout

Elevate your content presentation with the Blog Post Layout mini project. Using HTML and CSS, beginners can explore the design and structure of a visually appealing blog post template. The source code offers insights into creating an engaging and well-organized layout for sharing articles on your website.

71. Tag Cloud

Enhance content categorization with the Tag Cloud mini project. Using HTML and CSS, beginners can learn to design and structure a visually appealing tag cloud. Dive into the source code to understand the layout and styling, ensuring an effective and dynamic way to display tags on your web pages.

72. Not Found Page

Handle 404 errors gracefully with the Not Found Page mini project. Using HTML and CSS, beginners can explore the design and structure of a visually appealing 404 error page. The source code offers insights into creating a user-friendly and informative experience for visitors who encounter missing pages on your website.

73. Simple Search Bar

Enhance user navigation with the Simple Search Bar mini project. Using HTML and CSS, beginners can learn to design and structure a clean and efficient search bar.

74. Range Slider

Master the art of user input with the Range Slider mini project. Using HTML and CSS, beginners can explore the design and structure of a visually appealing slider component. Dive into the source code to understand the principles behind creating interactive sliders, adding a dynamic element to your web pages.

75. Comic Book Layout

Bring a touch of creativity to your website with the Comic Book Layout mini project. Using HTML and CSS, beginners can explore the design and structure of a visually engaging comic book-inspired layout.

76. Skeleton Loading

Optimize user experience during page loading with the Skeleton Loading mini project. Using HTML and CSS, beginners can learn to design and structure a skeleton loading animation that provides visual feedback while content loads. Dive into the source code to understand the styling techniques, ensuring a smooth transition for users.

77. Coming Soon Page

Build anticipation for your upcoming projects with the Coming Soon Page mini project. Using HTML and CSS, beginners can explore the design and structure of a visually appealing page that teases upcoming content or features. The source code offers insights into creating an attractive and informative coming soon experience for your audience.

78. Pricing Page

Present your product or service offerings effectively with the Pricing Page mini project. Using HTML and CSS, beginners can learn to design and structure a comprehensive pricing page. Explore the source code to understand the layout and styling, ensuring a clear and visually appealing presentation of your pricing tiers.

79. Bank Dashboard

Dive into the world of financial user interfaces with the Bank Dashboard mini project. Using HTML and CSS, beginners can explore the design and structure of a simplified bank dashboard. The source code provides insights into creating a user-friendly and visually appealing platform for managing financial information.

80. Star Rating

Implement a customizable star rating system with the Star Rating mini project. Using HTML and CSS, beginners can learn to design and structure interactive star-based ratings.

81. Bootstrap 5 Navbar

Explore the power of Bootstrap 5 with the Bootstrap 5 Navbar mini project. Using HTML and the Bootstrap framework, beginners can learn to create a responsive and feature-rich navigation bar. Dive into the source code to understand the Bootstrap classes and styling techniques, ensuring a sleek and functional navbar for your web pages.

82. HTML Table

Master the art of data presentation with the HTML Table mini project. Using HTML and CSS, beginners can learn to design and structure a clean and organized table. Explore the source code to understand the principles behind creating responsive and visually appealing tables for displaying various types of data on your web pages.

83. Login Modal Form

Enhance user interactions with the Login Modal Form mini project. Using HTML and CSS, beginners can learn to design a sleek modal form that provides a seamless login experience. Dive into the source code to understand the styling techniques, ensuring an elegant and user-friendly modal for your web pages.

84. Movie Poster Cards

Dive into the world of cinema with the Movie Poster Cards mini project. Using HTML and CSS, beginners can learn to design visually appealing cards showcasing movie posters. Explore the source code to understand styling techniques, ensuring an engaging and attractive presentation of movie information on your web pages.

85. Text Overlay

Elevate your image presentations with the Text Overlay mini project. Using HTML and CSS, beginners can learn to overlay text on images, creating a visually dynamic effect.

86. Sticky Call Button

Improve user accessibility with the Sticky Call Button mini project. Using HTML and CSS, beginners can learn to create a button that remains fixed on the screen, providing quick access to essential actions. Explore the source code to understand the principles behind creating a sticky call button for enhanced user engagement.

87. Weather App Interface

Bring real-time weather information to your website with the Weather App Interface mini project. Using HTML and CSS, beginners can explore the design and structure of an intuitive weather application interface. Dive into the source code to understand styling techniques, ensuring a visually appealing and informative weather display.

88. Tailwind CSS Modern Buttons

Embrace the simplicity and flexibility of Tailwind CSS with the Tailwind CSS Modern Buttons mini project. Beginners can explore the design and styling of modern buttons using the Tailwind CSS framework.

89. Button with Hover Effects

Elevate your button designs with interactive hover effects in the Button with Hover Effects mini project. Using HTML and CSS, beginners can learn to create buttons that respond dynamically to user interactions.

90. Code Snippets

Showcase your code snippets effectively with the Code Snippets mini project. Using HTML and CSS, beginners can learn to design a visually appealing container for displaying code snippets.

91. Underline Hover Effect

Add a subtle but effective hover effect with the Underline Hover Effect mini project. Using HTML and CSS, beginners can learn to create links that underline dynamically upon hovering.

92. Animated Wave Footer

Make a lasting impression with the Animated Wave Footer mini project. Using HTML and CSS, beginners can learn to design a footer with a dynamic wave animation.

93. Animated Wave Banner

Capture attention with the Animated Wave Banner mini project. Using HTML and CSS, beginners can explore the design and structure of a banner with a captivating wave animation. Dive into the source code to understand animation techniques, creating an eye-catching introduction to your web pages.

94. Tailwind CSS Resume

Craft a professional online resume with the Tailwind CSS Resume mini project. Beginners can explore the design and styling of a modern and responsive resume using the Tailwind CSS framework.

95. Blog Card

Enhance your blog layout with the Blog Card mini project. Using HTML and CSS, beginners can learn to design visually appealing cards to showcase blog posts. Explore the source code to understand styling techniques, ensuring an organized and engaging presentation of blog content on your web pages.

96. Tile Spinner

Add a touch of dynamism to your website with the Tile Spinner mini project. Using HTML and CSS, beginners can learn to create a spinner animation that adds visual interest during page loading.

97. Pagination

Improve navigation through content with the Pagination mini project. Using HTML and CSS, beginners can learn to design and structure a pagination system. Explore the source code to understand the layout and styling, ensuring an efficient and user-friendly way to navigate through multiple pages of content on your website.

98. Wooden Toggle Button

Bring a unique aesthetic to your user interface with the Wooden Toggle Button mini project. Using HTML and CSS, beginners can learn to design a toggle button with a wooden texture.

99. Neumorphic Buttons

Embrace the neumorphic design trend with the Neumorphic Buttons mini project. Using HTML and CSS, beginners can learn to create buttons with a soft and tactile appearance.

100. Fire Animation

Conclude your mini project collection with a dynamic touch using the Fire Animation mini project. Using HTML and CSS, beginners can explore the design and structure of a captivating fire animation.

101. Ecommerce Product List

Enhance your website's functionality with the Ecommerce Product List mini project. Using HTML and CSS, beginners can master the art of designing and organizing product listings effectively. Dive into the source code to grasp the structure and styling, ensuring a seamless and visually appealing presentation of products on your ecommerce platform. Learn how to display product images, descriptions, and prices in a clear and user-friendly format, optimizing the browsing experience for your customers.

102. Attendee Badge

Creating an attendee badge is a simple yet useful project for beginners in web development. This project will help you learn how to design and structure a badge using HTML and style it with CSS. You'll explore how to display text, images, and other details neatly. It's a great way to practice your skills and create something that could be used in real events or online. This project will give you a basic understanding of layout design and styling in web development .

Mastering web development requires a combination of theoretical knowledge and hands-on experience. The collection of 100 HTML and CSS projects presented here offers a practical approach to learning, allowing you to enhance your skills in a structured manner.

Remember, the key to becoming a proficient web developer lies in consistent practice and exploration. As you work through these mini projects, don't hesitate to experiment, modify, and make each project your own. The journey of a web developer is both challenging and rewarding, and these mini projects are your stepping stones to success.

Frequently Asked Questions (FAQs)

1. do i need any special software for these projects.

All you need is a code editor and a web browser. No fancy software is required – just your enthusiasm for coding!

2. How can I get feedback on my projects?

Consider sharing your projects on platforms like GitHub , CodePen, or web development communities to receive constructive feedback.

3. Are these projects suitable for absolute beginners?

Yes, these projects are designed with beginners in mind. Start with simpler ones and gradually progress to more complex projects.

4. Can I modify the projects and add my own features?

Certainly! It's encouraged to personalize the projects and add your unique touch to showcase your creativity.

5. What's the next step after completing these mini projects?

After mastering these mini projects, consider exploring more advanced topics like JavaScript frameworks, backend development, and responsive design principles.

6. How long does it take to finish a mini project?

The beauty of mini projects lies in their bite-sized nature. You can complete some in a few hours, making them perfect for your busy schedule.

That’s a wrap!

Thank you for taking the time to read this article! I hope you found it informative and enjoyable. If you did, please consider sharing it with your friends and followers. Your support helps me continue creating content like this.

Stay updated with our latest content by signing up for our email newsletter ! Be the first to know about new articles and exciting updates directly in your inbox. Don't miss out—subscribe today!

If you'd like to support my work directly, you can buy me a coffee . Your generosity is greatly appreciated and helps me keep bringing you high-quality articles.

Thanks! Faraz 😊

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox, latest post.

Create Draggable Modal Using HTML, CSS, and JavaScript

Learn how to create a draggable modal using HTML, CSS, and JavaScript with this easy-to-follow guide. Perfect for web developers of all skill levels.

Create Sticky Bottom Navbar using HTML and CSS

August 29, 2024

How to Create a Dropdown List with HTML and CSS

10 Modern Logo Hover Effects with HTML and CSS

August 28, 2024

Create Alert Ticker using HTML, CSS, and JavaScript

Create Animated Logout Button Using HTML and CSS

Learn to create an animated logout button using simple HTML and CSS. Follow step-by-step instructions to add smooth animations to your website’s logout button.

Create Fortnite Buttons Using HTML and CSS - Step-by-Step Guide

June 05, 2024

How to Create a Scroll Down Button: HTML, CSS, JavaScript Tutorial

March 17, 2024

How to Create a Trending Animated Button Using HTML and CSS

March 15, 2024

Create Interactive Booking Button with mask-image using HTML and CSS (Source Code)

March 10, 2024

Create Dice Rolling Game using HTML, CSS, and JavaScript

Learn how to create a dice rolling game using HTML, CSS, and JavaScript. Follow our easy-to-understand guide with clear instructions and code examples.

Create a Breakout Game with HTML, CSS, and JavaScript | Step-by-Step Guide

July 14, 2024

Create a Whack-a-Mole Game with HTML, CSS, and JavaScript | Step-by-Step Guide

June 12, 2024

Create Your Own Bubble Shooter Game with HTML and JavaScript

May 01, 2024

Build a Number Guessing Game using HTML, CSS, and JavaScript | Source Code

April 01, 2024

Tooltip Hover to Preview Image with Tailwind CSS

Learn how to create a tooltip hover effect to preview images using Tailwind CSS. Follow our simple steps to add this interactive feature to your website.

Create Image Color Extractor Tool using HTML, CSS, JavaScript, and Vibrant.js

January 23, 2024

Build a Responsive Screen Distance Measure with HTML, CSS, and JavaScript

January 04, 2024

Crafting Custom Alarm and Clock Interfaces using HTML, CSS, and JavaScript

November 30, 2023

Detect User's Browser, Screen Resolution, OS, and More with JavaScript using UAParser.js Library

October 30, 2023

Learn how to create a sticky bottom navbar using HTML and CSS with this easy-to-follow guide.

Creating a Responsive Footer with Tailwind CSS (Source Code)

February 25, 2024

Crafting a Responsive HTML and CSS Footer (Source Code)

November 11, 2023

Create an Animated Footer with HTML and CSS (Source Code)

October 17, 2023

Bootstrap Footer Template for Every Website Style

March 08, 2023

Practice Projects in HTML & CSS

Solidify concepts with guided practice., animal fun facts, animated company logo, birthday party, black lives matter, cake o'clock, challenge project: build a website design system, challenge project: build your own cheat sheet.

Assignment 1: Static Web: HTML/CSS

Due Sunday, February 7 11:59pm ET

Accept the Github Classroom assignment and clone this repo that contains stencil code for Assignment 1.

Introduction

This is a multi-part assignment with the objective of making you comfortable working with HTML and CSS. By the end of this assignment, you will have styled some rectangular blocks and created a simple version of Twitter's home page.

If this assignment seems overwhelming to you, please come see a TA at TA hours to talk through some strategies for tackling it. We expect this assignment to be a time-consuming assignment as we cover a lot of fundamental techiniques. But with a good strategy, it can be finished in a reasonable amount of time.

Note: Only CSS and HTML will be used for this assignment. If you want to use JavaScript (or libraries such as jQuery) then feel free to, but we will only be grading correctness on your CSS and HTML.

If you can, Start Early!

Specifications

Now that you understand some of the basics of HTML and CSS, let’s take a look at how to align HTML elements. There are multiple ways to align HTML elements, but in this part, we recommend using flexboxes as they are widely used in modern web development (for example BootstrapV4 is built on top of flexboxes).

Refer to this great webpage on how to use flexboxes: CSS Flexbox Guide .

Also feel free to use online resources such as Stack Overflow, MDN, W3, and Google for reference.

As you can see, there are 9 rectangles. The styling and makeup of the first two rectangles are already built for you. Your task is to apply stylings and add div elements inside of the next 7 green rectangular blocks to create a webpage that looks like this:

For the third row, the red and blue end rectangles should remain the same width, and the green space should shrink.

Possible Approach: Have a div with a red background and a div with a blue background, both with fixed width. Use an appropriate value for Justify Content .

For the fourth row, the blue end rectangle should remain the same width, and the red rectangle should shrink.

Possible Approach: Have a div with a red background and a div with a blue background. Have a fixed width on the blue div. Use Flex Grow .

For the fifth row, the red square should remain the same size, but always remain in the center of the green rectangle.

Hint: Think about how to keep a div fixed size and how to align something in the absolute center of the parent element.

For the sixth row, the blue rectangle should remain the same size, while the red rectangles should shrink. The blue rectangle should remain in the center of the row.

Hint: Use two red divs.

For the seventh row, the red rectangle should remain the same width.

Hint: Nest divs and use background-color: transparent

For the eighth row, the orange rectangles should remain the same size while the green space between them shrinks.

For the ninth row, the green space between the orange rectangles should remain the same width while the orange rectangles narrow.

The examples we provided with the first two rectangular blocks use flexboxes. You are not required to use flexboxes for the next 7 rows, but we recommend it as it will also be useful in part 2 of this assignment.

You should only have to use the div html element to complete this assignment. Also, none of the divs you create inside of the provided wrapper divs should have background-color: green; . But it is valid to specify non-green background colors for any divs, including the wrapper.

• The color of the boxes we used are background-color: red , blue , and orange
• Some width/height values we used are 20px, 40px, 80px

You are not required to use Bootstrap in this part. You can use if you want, but we actually recommend writing plain CSS. Just for this part, inline CSS is acceptable, but you should generally avoid using inline CSS in the future.

Any images you'll need can be found in the part2/images folder, which can be referenced as ./images (when CSS is in its own file, URLs are relative to the CSS file, not the page it is loaded on). All of your HTML should go in the index.html file and all of your CSS should go in the index.css file.

Feel free to go on Twitter and use your browser’s inspect element to see how they do font sizes, font weights, margins, paddings, text colors, and background colors (use inspector). Our solution is a bit different than Twitter’s architecture because twitter’s HTML/CSS setup is way too complicated for a simple web mockup. If you try to copy Twitter’s code instead of creating the HTML elements yourself, you’ll end up spending way more time trying to figure out what each div does and how to decipher their massive styling code base.

Ethics Requirements

A screen reader needs to know in advance what language your website is in in order to function properly.

To help it out, make sure to declare the language of your website in the lang= attribute of the html tag.

Blind and low-sighted users often can’t see images on a site.

• To help them enjoy your site’s content, all images must have alt text.
• The alt text goes in the alt="..." attribute of the image element.
• You should give a basic description of what is in the image. Putting image in the alt attribute does not count!

Blind or low-sighted users may want to “skim through” a page using their screen reader. To make that easier, the page should have a logical hierarchy using different headings to designate different levels of importance.

Note: your Twitter page won’t have that many headings. Just don’t use headings to style things!

If you want a piece of text that isn’t a heading to be big or bold, use HTML elements like em and b tag or CSS to style it rather than the heading attribute.

For people using screen readers to navigate the page, ARIA landmarks are a big help – they can help users skim the page, or to quickly find the content they need. These are attributes that can be added to any element on the page and appear as role= attributes within a div’s opening tag. The ARIA landmarks you are required to include are:

• role=navigation (to designate the navigation menu): add this to the navigation bar.
• role=main (main page content, i.e. the tweets): add this to the div you use to contain your tweets.

Look here for more tips and examples.

Finally, your page should have a skip link (think <a> !) somewhere at the top of the navigation. Skip links are links at the top of the page which allow a user to skip to the main content of the page. They’re important for older browsers and screen readers that may not support ARIA landmark navigation.

• This can be styled any way you like! However, for this project, hide them using display: none; .
• To do this, you’ll have to give the div you will be jumping to an ID, and have the link href="..." attribute point to that div’s ID. For example, if I wanted to jump to a div with the ID myDiv, I would have the following link: <a href=”#myDiv”>Jump to myDiv</a>
• In our case, this means skipping to content-wrapper or content-center , depending on your implementation. More tips and examples can be found here .

We recommend running your page through WAVE’s accessibility checker, which we asked you to add to your Firefox and/or Chrome browsers during lab 1. We’ll be using that tool to test whether your ARIA landmarks and general hierarchy are logical, as well as whether you’ve implemented alt text in your image descriptions.

Note: The Chrome WAVE extension has been a little finicky lately. If you’re having trouble, try running your code on a department machine and/or using Firefox.

For help, take a look at our Accessibility Resource Sheet in Docs or come to TA hours!

Functionality Requirements

In the following, we put together some hints on how to accomplish the functionality requirements. We also encourage you to refer to online resources like MDN and CSSTricks for HTML and CSS properties.

Note: Don't worry about getting the font sizes or font colors exact. That being said, #4AB3F4 is the blue color used in the mockup and #E6ECF0 is the light gray background color.

Twitter's header is fixed which means when you scroll down, the header remains at the top of the webpage. We will require you to implement your header in a similar manner. To do this, use:

• position: fixed; Adding this to an element makes it stick to whatever position you specify
• top: 0; left: 0; These are the positions for the fixed element that will keep the element fixed at the top
• z-index: 100; Adding this to an element makes it positioned above other elements (You could probably make it work with z-index: 5, but we put 100 just to make sure). Elements without a specified z-index have a default z-index of 0. Elements with higher z-indexes are placed over elements with lower z-indexes.

If you decide to use Bootstrap, you may find Navbar Placement to be useful.

Lastly, we require you to have the Twitter logo stay in the middle of the header when you resize the window.

• Home <i class="fas fa-home"></i>
• Moments <i class="fas fa-hashtag"></i>
• Notifications <i class="far fa-bell"></i>
• Messages <i class="far fa-envelope"></i>

The file path of the twitter logo is ./images/twitter-logo.png

content-wrapper

• max-width: 1190px; This sets the maximum width of the element.
• margin: 56px auto; This sets the vertical margins to 56px so that it is below the header and the horizontal margins to automatically center the element.

content-left

• Cover picture (purple)
• Profile picture (orange)
• Profile stats (green)

We require you to create the overlapping effect between the profile picture and cover picture. Usually to sepcify priority in stacked display (think it as layers), you will use z-index .

Bootstrap section for positioning

• The filepath of the cover picture is ./images/ratatouille-banner.png while ./images/ratatouille.jpg is the filepath of the profile picture for Remy and ./images/linguini.png is the filepath of Linguini's profile picture.

content-center

We require that you include the profile picture in every one of the tweets. Additionally, in at least one of the tweets you should have a span tag to change the styling of a single word within the tweet.

border-radius: 50%; or Bootstrap class rounded-circle makes an element a circle.

content-right

If you minimize the width of your browser when on Twitter, you will notice that the content on the right disappears at a certain point. This is done using CSS media queries.

We require you to do the same on your mockup. So, use a media query to make content-right disappear when the window’s width is less than or equal to 1200px.

Other than the explicitly stated requirements for this part, we would like you to make your Twitter mockup generally resemble the solution provided above

If you can, please make your webpage compliant across browsers. But we will be testing your assignment on Chrome.

To access Chrome in CIT machine: From the command-line, type chrome .

General Notes

As a reminder, it's a good idea to run your HTML and CSS syntax through validators. You should also consider using an accessibility checker such as WAVE.

Troubleshooting

There are hundreds of HTML and CSS tags, properties, and values, and CS132 does not expect students to learn each one by heart. However, this assignment and the first lab are intended for you to intuitively understand the languages, and to be proficient at knowing how to tackle a design by the end of the semester.

If you’re having problems, there are many guides on HTML and CSS online (CSSTricks and MDN are your friends), as well as on our resources page.

As always, if you are stuck on a particular part, you can always talk to the friendly TAs or ask questions on course piazza (check your email for a signup link).

As a general rule of thumb, do not expect TAs to be able to solve every web problem you have. Even the most adept web developer can struggle a lot with specific CSS rules to use.

To hand in your code for Assignment 1, upload the directory containing your solution to part 1 and part 2 to Gradescope .

HTML Tutorial

Html graphics, html examples, html references, html exercises.

You can test your HTML skills with W3Schools' Exercises.

We have gathered a variety of HTML exercises (with answers) for each HTML Chapter.

Try to solve an exercise by editing some code. Get a "hint" if you're stuck, or show the answer to see what you've done wrong.

Count Your Score

You will get 1 point for each correct answer. Your score and total score will always be displayed.

Start HTML Exercises

Start HTML Exercises ❯

If you don't know HTML, we suggest that you read our HTML Tutorial from scratch.

Kickstart your career

Get certified by completing the course

COLOR PICKER

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: [email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail: [email protected]

Top Tutorials

Top references, top examples, get certified.

• HTML Tutorial
• HTML Exercises
• HTML Attributes
• Global Attributes
• Event Attributes
• HTML Interview Questions
• DOM Audio/Video
• HTML Examples
• Color Picker
• A to Z Guide
• HTML Formatter

HTML Exercises, Practice Questions and Solutions

Are you eager to learn HTML or looking to brush up on your skills? Dive into our HTML Exercises , designed to cater to both beginners and experienced developers. With our interactive portal, you can engage in hands-on coding challenges, track your progress, and elevate your web development expertise. Whether you’re starting from scratch or aiming to refine your HTML knowledge, our practice questions and solutions offer a step-by-step guide to success.

A step-by-step HTML practice guide for beginner to advanced level.

Benefits of HTML Exercises

• Interactive Quizzes: Engage in hands-on HTML quizzes.
• Progress Tracking: Monitor your learning journey.
• Skill Enhancement: Sharpen coding skills effectively.
• Flexible Learning: Practice at your own pace.
• Immediate Feedback: Receive instant results and feedback.
• Convenient Accessibility: Accessible online, anytime.
• Real-world Application: Apply HTML concepts practically.
• Comprehensive Learning: Cover a range of HTML topics.

How to Start Practice ?:

Embark on your HTML learning journey by accessing our online practice portal. Choose exercises suited to your skill level, dive into coding challenges, and receive immediate feedback to reinforce your understanding. Our user-friendly platform makes learning HTML engaging and personalized, allowing you to develop your skills effectively.

HTML Best Practice Guide:

Dive into HTML excellence with our comprehensive Best Practice Guide. Uncover essential coding standards, optimization tips, and industry-recommended approaches to HTML development. Elevate your skills with insightful advice, practical examples, and interactive challenges. Ensure your web projects stand out for their clarity and performance by following these proven best practices.

Why Practice HTML Online?

• Hands-On Learning : Immerse yourself in interactive HTML exercises to gain practical experience.
• Progress Tracking : Monitor your learning journey and see how your skills improve over time.
• Flexible Practice : Learn at your own pace, anytime and anywhere with convenient online accessibility.
• Real-World Application : Apply HTML concepts to real projects, enhancing your ability to create websites.
• Comprehensive Coverage : Explore a variety of HTML topics, from basic syntax to advanced techniques.

HTML Online Practice Rules:

• Be Honest : Complete exercises independently, avoiding plagiarism or unauthorized help.
• Time Management : Adhere to time limits to simulate real-world scenarios effectively.
• Code Quality : Prioritize clean, efficient, and well-structured HTML code.
• Follow Guidelines : Adhere to platform instructions for input/output formats and code submission.
• No Cheating : Refrain from using external resources during assessments, unless explicitly permitted.
• Utilize Feedback : Learn from automated feedback and engage with the community for support.
• Active Participation : Join forums, discussions, and share insights with fellow learners to enhance your understanding.
• Continuous Improvement : Identify and address areas of weakness for ongoing growth and development.

Features of Practice Portal:

• Immediate Feedback : Receive instant feedback on mistakes to facilitate quick learning.
• Unlimited Attempts : Practice exercises multiple times to master HTML concepts.
• Time Management Tools : Display elapsed time for each set of exercises to help manage time effectively.
• Performance Analytics : Track your progress with detailed analytics, highlighting strengths and areas for improvement.
• Interactive Code Editor : Experience an immersive coding environment for hands-on practice.
• Hints and Solutions : Access hints and solutions to guide your learning process.
• Community Integration : Engage with peers through forums and discussions for collaborative learning.
• Adaptive Difficulty : Adjust exercise difficulty based on user performance for personalized challenges.
• Gamification Elements : Earn scores, achievements, or badges to make learning HTML engaging and fun.

Please Login to comment...

Similar reads.

• Web Technologies
• WebTech - Exercises
• Best Twitch Extensions for 2024: Top Tools for Viewers and Streamers
• Discord Emojis List 2024: Copy and Paste
• Best Adblockers for Twitch TV: Enjoy Ad-Free Streaming in 2024
• PS4 vs. PS5: Which PlayStation Should You Buy in 2024?
• 15 Most Important Aptitude Topics For Placements [2024]

Improve your Coding Skills with Practice

What kind of Experience do you want to share?

CS142 Project 1: HTML and CSS

Due: thursday, april 13, 2023 at 11:59 pm, problem 1 (20 points).

Create a single HTML document that presents two different appearances, determined by the document's CSS stylesheet. Your HTML file should be called index.html and the document's title should be “CS142 Project 1”. Along with this HTML document, you should also create two stylesheets called styleA.css and styleB.css .

If the HTML file links to styleA.css , then it should appear like this ("Version A"):

If the HTML file links to styleB.css , then it should appear like this ("Version B"):

Note: The D in the screenshot is highlighted to show you what space the text should occupy. Your solution should not style the D with a blue background.

Style A Specifications

• There should be six box elements, lined up vertically.
• All boxes are centered horizontally and equally spaced vertically. When the browser window is resized, the spacing between the boxes should change (they should be equally spaced vertically across the page). However, the boxes themselves should never overlap or change size.
• Each box is 100x100 pixels, with a 1px line (color: #687291) on top. Text is centered horizontally.
• Boxes alternate colors (colors: #dfe1e7, #eeeff2).
• The final element (color: #687291) has a 4px, black border and the text is centered vertically.
• The font in all elements is Tahoma, 40 pixels.

Style B Specifications

• Five box elements, lined up horizontally in the top left corner.
• Boxes do not wrap with window resizing (i.e., boxes A through E should stay on the same line even if your browser window is too small to display them all).
• The last box is positioned in the bottom right corner of the window and stays there even when the window resizes.
• Each box is 100x150 pixels (color: #eeeff2), with a 10px dotted line (color: #D0D0FF) on the left. Boxes are separated by 10 pixels of space.
• When hovering over a box, the cursor changes to a hand and the box and font colors change (colors: yellow, goldenrod, respectively).
• There are 10 pixels of space between the letters and the edge of the box.

If a property is not outlined in these specifications (e.g., space between elements in style B and edge of window) you should choose something reasonable.

Style Points (5 points)

Your HTML file must be a valid XHTML 1.0 document that passes validation at http://validator.w3.org . In addition, your HTML and CSS must be clean, readable, properly indented, and well-structured.

Extra Credit (2 points)

• transitions
• Use the Chrome browser for this project, and for all projects in this class. This will eliminate browser compatibility issues.
• You will need basic knowledge of Unix in order to submit your assignments. Click here for an introduction to browsing and manipulating the UNIX file system.
• You may not use any JavaScript or external libraries/stylesheets. You must write your own code.
• You may find some of the following CSS style attributes useful for this project (do a Google search for the documentation for exact usage details): display: inline-block; height: 100%; white-space: nowrap;
• You will need to use the CSS Flexbox layout for at least one portion of the assignment.

Deliverables

Use the standard class submission mechanism to submit all of the files needed for Problem 1, including index.html , styleA.css , styleB.css , and (optionally) styleC.css .

The CSS Handbook: A Handy Guide to CSS for Developers

I wrote this article to help you quickly learn CSS and get familiar with the advanced CSS topics.

CSS is often quickly dismissed as an easy thing to learn by developers, or one thing you just pick up when you need to quickly style a page or app. Due to this reason, it’s often learned on-the-fly, or we learn things in isolation right when we have to use them. This can be a huge source of frustration when we find that the tool does not simply do what we want.

This article will help you get up to speed with CSS and get an overview of the main modern features you can use to style your pages and apps.

I hope to help you get comfortable with CSS and get you quickly up to speed with using this awesome tool that lets you create stunning designs on the Web.

Click here to get a PDF / ePub / Mobi version of this post to read offline

CSS, a shorthand for Cascading Style Sheets, is one of the main building blocks of the Web. Its history goes back to the 90’s, and along with HTML it has changed a lot since its humble beginnings.

As I’ve been creating websites since before CSS existed, I have seen its evolution.

CSS is an amazing tool, and in the last few years it has grown a lot, introducing many fantastic features like CSS Grid, Flexbox and CSS Custom Properties.

This handbook is aimed at a vast audience.

First, the beginner. I explain CSS from zero in a succinct but comprehensive way, so you can use this book to learn CSS from the basics.

Then, the professional. CSS is often considered like a secondary thing to learn, especially by JavaScript developers. They know CSS is not a real programming language, they are programmers and therefore they should not bother learning CSS the right way. I wrote this book for you, too.

Next, the person that knows CSS from a few years but hasn’t had the opportunity to learn the new things in it. We’ll talk extensively about the new features of CSS, the ones that are going to build the web of the next decade.

CSS has improved a lot in the past few years and it’s evolving fast.

Even if you don’t write CSS for a living, knowing how CSS works can help save you some headaches when you need to understand it from time to time, for example while tweaking a web page.

Thank you for getting this ebook. My goal with it is to give you a quick yet comprehensive overview of CSS.

You can reach me via email at [email protected] , on Twitter @flaviocopes .

My website is flaviocopes.com .

Table of Contents

Introduction to css, a brief history of css, adding css to an html page, specificity, inheritance, attribute selectors, pseudo-classes, pseudo-elements, backgrounds, custom properties, positioning, floating and clearing, media queries and responsive design, feature queries, transitions, normalizing css, error handling, vendor prefixes, css for print, wrapping up.

CSS (an abbreviation of Cascading Style Sheets ) is the language that we use to style an HTML file, and tell the browser how should it render the elements on the page.

In this book I talk exclusively about styling HTML documents, although CSS can be used to style other things too.

A CSS file contains several CSS rules.

Each rule is composed by 2 parts:

• the selector
• the declaration block

The selector is a string that identifies one or more elements on the page, following a special syntax that we’ll soon talk about extensively.

The declaration block contains one or more declarations , in turn composed by a property and value pair.

Those are all the things we have in CSS.

Carefully organising properties, associating them values, and attaching those to specific elements of the page using a selector is the whole argument of this ebook.

How does CSS look like

A CSS rule set has one part called selector , and the other part called declaration . The declaration contains various rules , each composed by a property , and a value .

In this example, p is the selector, and applies one rule which sets the value 20px to the font-size property:

Multiple rules are stacked one after the other:

A selector can target one or more items:

and it can target HTML tags, like above, or HTML elements that contain a certain class attribute with .my-class , or HTML elements that have a specific id attribute with #my-id .

More advanced selectors allow you to choose items whose attribute matches a specific value, or also items which respond to pseudo-classes (more on that later)

Every CSS rule terminates with a semicolon. Semicolons are not optional, except after the last rule. But I suggest to always use them for consistency and to avoid errors if you add another property and forget to add the semicolon on the previous line.

Formatting and indentation

There is no fixed rule for formatting. This CSS is valid:

but a pain to see. Stick to some conventions, like the ones you see in the examples above: stick selectors and the closing brackets to the left, indent 2 spaces for each rule, have the opening bracket on the same line of the selector, separated by one space.

Correct and consistent use of spacing and indentation is a visual aid in understanding your code.

Before moving on, I want to give you a brief recap of the history of CSS.

CSS was grown out of the necessity of styling web pages. Before CSS was introduced, people wanted a way to style their web pages, which looked all very similar and “academic” back in the day. You couldn’t do much in terms of personalisation.

HTML 3.2 introduced the option of defining colors inline as HTML element attributes, and presentational tags like center and font , but that escalated quickly into a far from ideal situation.

CSS let us move everything presentation-related from the HTML to the CSS, so that HTML could get back being the format that defines the structure of the document, rather than how things should look in the browser.

CSS is continuously evolving, and CSS you used 5 years ago might just be outdated, as new idiomatic CSS techniques emerged and browsers changed.

It’s hard to imagine the times when CSS was born and how different the web was.

At the time, we had several competing browsers, the main ones being Internet Explorer or Netscape Navigator.

Pages were styled by using HTML, with special presentational tags like bold and special attributes, most of which are now deprecated.

This meant you had a limited amount of customisation opportunities.

The bulk of the styling decisions were left to the browser.

Also, you built a site specifically for one of them, because each one introduced different non-standard tags to give more power and opportunities.

Soon people realised the need for a way to style pages, in a way that would work across all browsers.

After the initial idea proposed in 1994, CSS got its first release in 1996, when the CSS Level 1 (“CSS 1”) recommendation was published.

CSS Level 2 (“CSS 2”) got published in 1998.

Since then, work began on CSS Level 3. The CSS Working Group decided to split every feature and work on it separately, in modules.

Browsers weren’t especially fast at implementing CSS. We had to wait until 2002 to have the first browser implement the full CSS specification: IE for Mac, as nicely described in this CSS Tricks post: https://css-tricks.com/look-back-history-css/

Internet Explorer implemented the box model incorrectly right from the start, which led to years of pain trying to have the same style applied consistently across browsers. We had to use various tricks and hacks to make browsers render things as we wanted.

Today things are much, much better. We can just use the CSS standards without thinking about quirks, most of the time, and CSS has never been more powerful.

We don’t have official release numbers for CSS any more now, but the CSS Working Group releases a “snapshot” of the modules that are currently considered stable and ready to be included in browsers. This is the latest snapshot, from 2018: https://www.w3.org/TR/css-2018/

CSS Level 2 is still the base for the CSS we write today, and we have many more features built on top of it.

CSS is attached to an HTML page in different ways.

1: Using the link tag

The link tag is the way to include a CSS file. This is the preferred way to use CSS as it's intended to be used: one CSS file is included by all the pages of your site, and changing one line on that file affects the presentation of all the pages in the site.

To use this method, you add a link tag with the href attribute pointing to the CSS file you want to include. You add it inside the head tag of the site (not inside the body tag):

The rel and type attributes are required too, as they tell the browser which kind of file we are linking to.

2: using the style tag

Instead of using the link tag to point to separate stylesheet containing our CSS, we can add the CSS directly inside a style tag. This is the syntax:

Using this method we can avoid creating a separate CSS file. I find this is a good way to experiment before “formalising” CSS to a separate file, or to add a special line of CSS just to a file.

3: inline styles

Inline styles are the third way to add CSS to a page. We can add a style attribute to any HTML tag, and add CSS into it.

A selector allows us to associate one or more declarations to one or more elements on the page.

Basic selectors

Suppose we have a p element on the page, and we want to display the words into it using the yellow color.

We can target that element using this selector p , which targets all the element using the p tag in the page. A simple CSS rule to achieve what we want is:

Every HTML tag has a corresponding selector, for example: div , span , img .

If a selector matches multiple elements, all the elements in the page will be affected by the change.

HTML elements have 2 attributes which are very commonly used within CSS to associate styling to a specific element on the page: class and id .

There is one big difference between those two: inside an HTML document you can repeat the same class value across multiple elements, but you can only use an id once. As a corollary, using classes you can select an element with 2 or more specific class names, something not possible using ids.

Classes are identified using the . symbol, while ids using the # symbol.

Example using a class:

Example using an id:

Combining selectors

So far we’ve seen how to target an element, a class or an id. Let’s introduce more powerful selectors.

Targeting an element with a class or id

You can target a specific element that has a class, or id, attached.

Why would you want to do that, if the class or id already provides a way to target that element? You might have to do that to have more specificity. We’ll see what that means later.

Targeting multiple classes

You can target an element with a specific class using .class-name , as you saw previously. You can target an element with 2 (or more) classes by combining the class names separated with a dot, without spaces.

Combining classes and ids

In the same way, you can combine a class and an id.

Grouping selectors

You can combine selectors to apply the same declarations to multiple selectors. To do so, you separate them with a comma.

You can add spaces in those declarations to make them more clear:

Follow the document tree with selectors

We’ve seen how to target an element in the page by using a tag name, a class or an id.

You can create a more specific selector by combining multiple items to follow the document tree structure. For example, if you have a span tag nested inside a p tag, you can target that one without applying the style to a span tag not included in a p tag:

See how we used a space between the two tokens p and span .

This works even if the element on the right is multiple levels deep.

To make the dependency strict on the first level, you can use the > symbol between the two tokens:

In this case, if a span is not a first children of the p element, it's not going to have the new color applied.

Direct children will have the style applied:

Adjacent sibling selectors let us style an element only if preceded by a specific element. We do so using the + operator:

This will assign the color yellow to all span elements preceded by a p element:

We have a lot more selectors we can use:

• attribute selectors
• pseudo class selectors
• pseudo element selectors

We’ll find all about them in the next sections.

Cascade is a fundamental concept of CSS. After all, it’s in the name itself, the first C of CSS — Cascading Style Sheets — it must be an important thing.

What does it mean?

Cascade is the process, or algorithm, that determines the properties applied to each element on the page. Trying to converge from a list of CSS rules that are defined in various places.

It does so taking in consideration:

• specificity
• inheritance
• order in the file

It also takes care of resolving conflicts.

Two or more competing CSS rules for the same property applied to the same element need to be elaborated according to the CSS spec, to determine which one needs to be applied.

Even if you just have one CSS file loaded by your page, there is other CSS that is going to be part of the process. We have the browser (user agent) CSS. Browsers come with a default set of rules, all different between browsers.

Then your CSS comes into play.

Then the browser applies any user stylesheet, which might also be applied by browser extensions.

All those rules come into play while rendering the page.

We’ll now see the concepts of specificity and inheritance.

What happens when an element is targeted by multiple rules, with different selectors, that affect the same property?

For example, let’s talk about this element:

We can have

and another rule that targets p , which sets the color to another value:

And another rule that targets p.dog-name . Which rule is going to take precedence over the others, and why?

Enter specificity. The more specific rule will win . If two or more rules have the same specificity, the one that appears last wins .

Sometimes what is more specific in practice is a bit confusing to beginners. I would say it’s also confusing to experts that do not look at those rules that frequently, or simply overlook them.

How to calculate specificity

Specificity is calculated using a convention.

We have 4 slots, and each one of them starts at 0: 0 0 0 0 . The slot at the left is the most important, and the rightmost one is the least important.

Like it works for numbers in the decimal system: 1 0 0 0 is higher than 0 1 0 0 .

The first slot, the rightmost one, is the least important.

We increase this value when we have an element selector . An element is a tag name. If you have more than one element selector in the rule, you increment accordingly the value stored in this slot.

The second slot is incremented by 3 things:

• class selectors
• pseudo-class selectors

Every time a rule meets one of those, we increment the value of the second column from the right.

Of course slot 2 selectors can be combined with slot 1 selectors:

One nice trick with classes is that you can repeat the same class and increase the specificity. For example:

Slot 3 holds the most important thing that can affect your CSS specificity in a CSS file: the id .

Every element can have an id attribute assigned, and we can use that in our stylesheet to target the element.

Slot 4 is affected by inline styles. Any inline style will have precedence over any rule defined in an external CSS file, or inside the style tag in the page header.

Even if any other rule in the CSS defines the color, this inline style rule is going to be applied. Except for one case — if !important is used, which fills the slot 5.

Specificity does not matter if a rule ends with !important :

That rule will take precedence over any rule with more specificity

Adding !important in a CSS rule is going to make that rule more important than any other rule, according to the specificity rules. The only way another rule can take precedence is to have !important as well, and have higher specificity in the other less important slots.

In general you should use the amount of specificity you need, but not more. In this way, you can craft other selectors to overwrite the rules set by preceding rules without going mad.

!important is a highly debated tool that CSS offers us. Many CSS experts advocate against using it. I find myself using it especially when trying out some style and a CSS rule has so much specificity that I need to use !important to make the browser apply my new CSS.

But generally, !important should have no place in your CSS files.

Using the id attribute to style CSS is also debated a lot, since it has a very high specificity. A good alternative is to use classes instead, which have less specificity, and so they are easier to work with, and they are more powerful (you can have multiple classes for an element, and a class can be reused multiple times).

Tools to calculate the specificity

You can use the site https://specificity.keegan.st/ to perform the specificity calculation for you automatically.

It’s useful especially if you are trying to figure things out, as it can be a nice feedback tool.

When you set some properties on a selector in CSS, they are inherited by all the children of that selector.

I said some , because not all properties show this behaviour.

This happens because some properties make sense to be inherited. This helps us write CSS much more concisely, since we don’t have to explicitly set that property again on every single child.

Some other properties make more sense to not be inherited.

Think about fonts: you don’t need to apply the font-family to every single tag of your page. You set the body tag font, and every child inherits it, along with other properties.

The background-color property, on the other hand, makes little sense to be inherited.

Properties that inherit

Here is a list of the properties that do inherit. The list is non-comprehensive, but those rules are just the most popular ones you’ll likely use:

• border-collapse
• border-spacing
• caption-side
• empty-cells
• font-family

font-variant

• font-weight
• font-size-adjust
• font-stretch
• letter-spacing
• line-height
• list-style-image
• list-style-position
• list-style-type

text-align-last

• text-decoration-color
• text-indent
• text-justify
• text-shadow

text-transform

White-space.

• word-spacing

I got it from this nice Sitepoint article on CSS inheritance.

Forcing properties to inherit

What if you have a property that’s not inherited by default, and you want it to, in a child?

In the children, you set the property value to the special keyword inherit .

Forcing properties to NOT inherit

On the contrary, you might have a property inherited and you want to avoid so.

You can use the revert keyword to revert it. In this case, the value is reverted to the original value the browser gave it in its default stylesheet.

In practice this is rarely used, and most of the times you’ll just set another value for the property to overwrite that inherited value.

Other special values

In addition to the inherit and revert special keywords we just saw, you can also set any property to:

• initial : use the default browser stylesheet if available. If not, and if the property inherits by default, inherit the value. Otherwise do nothing.
• unset : if the property inherits by default, inherit. Otherwise do nothing.

From any CSS file you can import another CSS file using the @import directive.

Here is how you use it:

url() can manage absolute or relative URLs.

One important thing you need to know is that @import directives must be put before any other CSS in the file, or they will be ignored.

You can use media descriptors to only load a CSS file on the specific media:

We already introduced several of the basic CSS selectors: using element selectors, class, id, how to combine them, how to target multiple classes, how to style several selectors in the same rule, how to follow the page hierarchy with child and direct child selectors, and adjacent siblings.

In this section we’ll analyze attribute selectors, and we’ll talk about pseudo class and pseudo element selectors in the next 2 sections.

Attribute presence selectors

The first selector type is the attribute presence selector.

We can check if an element has an attribute using the [] syntax. p[id] will select all p tags in the page that have an id attribute, regardless of its value:

Exact attribute value selectors

Inside the brackets you can check the attribute value using = , and the CSS will be applied only if the attribute matches the exact value specified:

Match an attribute value portion

While = lets us check for exact value, we have other operators:

• *= checks if the attribute contains the partial
• ^= checks if the attribute starts with the partial
• $= checks if the attribute ends with the partial
• |= checks if the attribute starts with the partial and it's followed by a dash (common in classes, for example), or just contains the partial
• ~= checks if the partial is contained in the attribute, but separated by spaces from the rest

All the checks we mentioned are case sensitive .

If you add an i just before the closing bracket, the check will be case insensitive. It's supported in many browsers but not in all, check https://caniuse.com/#feat=css-case-insensitive .

Pseudo classes are predefined keywords that are used to select an element based on its state , or to target a specific child.

They start with a single colon : .

They can be used as part of a selector, and they are very useful to style active or visited links, for example, change the style on hover, focus, or target the first child, or odd rows. Very handy in many cases.

These are the most popular pseudo classes you will likely use:

Let’s do an example. A common one, actually. You want to style a link, so you create a CSS rule to target the a element:

Things seem to work fine, until you click one link. The link goes back to the predefined color (blue) when you click it. Then when you open the link and go back to the page, now the link is blue.

Why does that happen?

Because the link when clicked changes state, and goes in the :active state. And when it's been visited, it is in the :visited state. Forever, until the user clears the browsing history.

So, to correctly make the link yellow across all states, you need to write

:nth-child() deserves a special mention. It can be used to target odd or even children with :nth-child(odd) and :nth-child(even) .

It is commonly used in lists to color odd lines differently from even lines:

You can also use it to target the first 3 children of an element with :nth-child(-n+3) . Or you can style 1 in every 5 elements with :nth-child(5n) .

Some pseudo classes are just used for printing, like :first , :left , :right , so you can target the first page, all the left pages, and all the right pages, which are usually styled slightly differently.

Pseudo-elements are used to style a specific part of an element.

They start with a double colon :: .

Sometimes you will spot them in the wild with a single colon, but this is only a syntax supported for backwards compatibility reasons. You should use 2 colons to distinguish them from pseudo-classes.

::before and ::after are probably the most used pseudo-elements. They are used to add content before or after an element, like icons for example.

Here’s the list of the pseudo-elements:

Let’s do an example. Say you want to make the first line of a paragraph slightly bigger in font size, a common thing in typography:

Or maybe you want the first letter to be bolder:

::after and ::before are a bit less intuitive. I remember using them when I had to add icons using CSS.

You specify the content property to insert any kind of content after or before an element:

By default an HTML page is rendered by web browsers quite sadly in terms of the colors used.

We have a white background, black color, and blue links. That’s it.

Luckily CSS gives us the ability to add colors to our designs.

We have these properties:

• background-color
• border-color

All of them accept a color value , which can be in different forms.

Named colors

First, we have CSS keywords that define colors. CSS started with 16, but today there is a huge number of colors names:

• antiquewhite
• blanchedalmond
• cornflowerblue
• darkgoldenrod
• darkmagenta
• darkolivegreen
• darkseagreen
• darkslateblue
• darkslategray
• darkslategrey
• darkturquoise
• deepskyblue
• floralwhite
• forestgreen
• greenyellow
• lavenderblush
• lemonchiffon
• lightgoldenrodyellow
• lightsalmon
• lightseagreen
• lightskyblue
• lightslategray
• lightslategrey
• lightsteelblue
• lightyellow
• mediumaquamarine
• mediumorchid
• mediumpurple
• mediumseagreen
• mediumslateblue
• mediumspringgreen
• mediumturquoise
• mediumvioletred
• midnightblue
• navajowhite
• palegoldenrod
• paleturquoise
• palevioletred
• rebeccapurple
• saddlebrown
• springgreen
• yellowgreen

plus tranparent , and currentColor which points to the color property, for example it’s useful to make the border-color inherit it.

They are defined in the CSS Color Module, Level 4 . They are case insensitive.

Wikipedia has a nice table which lets you pick the perfect color by its name.

Named colors are not the only option.

RGB and RGBa

You can use the rgb() function to calculate a color from its RGB notation, which sets the color based on its red-green-blue parts. From 0 to 255:

rgba() lets you add the alpha channel to enter a transparent part. That can be a number from 0 to 1:

Hexadecimal notation

Another option is to express the RGB parts of the colors in the hexadecimal notation, which is composed by 3 blocks.

Black, which is rgb(0,0,0) is expressed as #000000 or #000 (we can shortcut the 2 numbers to 1 if they are equal).

White, rgb(255,255,255) can be expressed as #ffffff or #fff .

The hexadecimal notation lets us express a number from 0 to 255 in just 2 digits, since they can go from 0 to “15” (f).

We can add the alpha channel by adding 1 or 2 more digits at the end, for example #00000033 . Not all browsers support the shortened notation, so use all 6 digits to express the RGB part.

HSL and HSLa

This is a more recent addition to CSS.

HSL = Hue Saturation Lightness.

In this notation, black is hsl(0, 0%, 0%) and white is hsl(0, 0%, 100%) .

If you are more familiar with HSL than RGB because of your past knowledge, you can definitely use that.

You also have hsla() which adds the alpha channel to the mix, again a number from 0 to 1: hsl(0, 0%, 0%, 0.5)

One of the things you’ll use every day in CSS are units. They are used to set lengths, paddings, margins, align elements and so on.

Things like px , em , rem , or percentages.

They are everywhere. There are some obscure ones, too. We’ll go through each of them in this section.

The most widely used measurement unit. A pixel does not actually correlate to a physical pixel on your screen, as that varies, a lot, by device (think high-DPI devices vs non-retina devices).

There is a convention that make this unit work consistently across devices.

Percentages

Another very useful measure, percentages let you specify values in percentages of that parent element’s corresponding property.

Real-world measurement units

We have those measurement units which are translated from the outside world. Mostly useless on screen, they can be useful for print stylesheets. They are:

• cm a centimeter (maps to 37.8 pixels)
• mm a millimeter (0.1cm)
• q a quarter of a millimeter
• in an inch (maps to 96 pixels)
• pt a point (1 inch = 72 points)
• pc a pica (1 pica = 12 points)

Relative units

• em is the value assigned to that element's font-size , therefore its exact value changes between elements. It does not change depending on the font used, just on the font size. In typography this measures the width of the m letter.
• rem is similar to em , but instead of varying on the current element font size, it uses the root element ( html ) font size. You set that font size once, and rem will be a consistent measure across all the page.
• ex is like em , but instead of measuring the width of m , it measures the height of the x letter. It can change depending on the font used, and on the font size.
• ch is like ex but instead of measuring the height of x it measures the width of 0 (zero).

Viewport units

• vw the viewport width unit represents a percentage of the viewport width. 50vw means 50% of the viewport width.
• vh the viewport height unit represents a percentage of the viewport height. 50vh means 50% of the viewport height.
• vmin the viewport minimum unit represents the minimum between the height or width in terms of percentage. 30vmin is the 30% of the current width or height, depending which one is smaller
• vmax the viewport maximum unit represents the maximum between the height or width in terms of percentage. 30vmax is the 30% of the current width or height, depending which one is bigger

Fraction units

fr are fraction units, and they are used in CSS Grid to divide space into fractions.

We’ll talk about them in the context of CSS Grid later on.

When we talk about background images, @import , and more, we use the url() function to load a resource:

In this case I used a relative URL, which searches the file in the folder where the CSS file is defined.

I could go one level back

or go into a folder

Or I could load a file starting from the root of the domain where the CSS is hosted:

Or I could use an absolute URL to load an external resource:

The calc() function lets you perform basic math operations on values, and it's especially useful when you need to add or subtract a length value from a percentage.

This is how it works:

It returns a length value, so it can be used anywhere you expect a pixel value.

You can perform

• additions using +
• subtractions using -
• multiplication using *
• division using /

One caveat: with addition and subtraction, the space around the operator is mandatory, otherwise it does not work as expected.

The background of an element can be changed using several CSS properties:

• background-image
• background-clip
• background-position
• background-origin
• background-repeat
• background-attachment
• background-size

and the shorthand property background , which allows us to shorten definitions and group them on a single line.

background-color accepts a color value, which can be one of the color keywords, or an rgb or hsl value:

Instead of using a color, you can use an image as background to an element, by specifying the image location URL:

background-clip lets you determine the area used by the background image, or color. The default value is border-box , which extends up to the border outer edge.

Other values are

• padding-box to extend the background up to the padding edge, without the border
• content-box to extend the background up to the content edge, without the padding
• inherit to apply the value of the parent

When using an image as background you will want to set the position of the image placement using the background-position property: left , right , center are all valid values for the X axis, and top , bottom for the Y axis:

If the image is smaller than the background, you need to set the behavior using background-repeat . Should it repeat-x , repeat-y or repeat on all the axes? This last one is the default value. Another value is no-repeat .

background-origin lets you choose where the background should be applied: to the entire element including padding (default) using padding-box , to the entire element including the border using border-box , to the element without the padding using content-box .

With background-attachment we can attach the background to the viewport, so that scrolling will not affect the background:

By default the value is scroll . There is another value, local . The best way to visualize their behavior is this Codepen .

The last background property is background-size . We can use 3 keywords: auto , cover and contain . auto is the default.

cover expands the image until the entire element is covered by the background.

contain stops expanding the background image when one dimension (x or y) covers the whole smallest edge of the image, so it's fully contained into the element.

You can also specify a length value, and if so it sets the width of the background image (and the height is automatically defined):

If you specify 2 values, one is the width and the second is the height:

The shorthand property background allows to shorten definitions and group them on a single line.

This is an example:

If you use an image, and the image could not be loaded, you can set a fallback color:

You can also set a gradient as background:

CSS gives you the ability to write comments in a CSS file, or in the style tag in the page header

The format is the /* this is a comment */ C-style (or JavaScript-style, if you prefer) comments.

This is a multiline comment. Until you add the closing */ token, the all the lines found after the opening one are commented.

CSS does not have inline comments, like // in C or JavaScript.

Pay attention though — if you add // before a rule, the rule will not be applied, looking like the comment worked. In reality, CSS detected a syntax error and due to how it works it ignored the line with the error, and went straight to the next line.

Knowing this approach lets you purposefully write inline comments, although you have to be careful because you can’t add random text like you can in a block comment.

For example:

In this case, due to how CSS works, the #name rule is actually commented out. You can find more details here if you find this interesting. To avoid shooting yourself in the foot, just avoid using inline comments and rely on block comments.

In the last few years CSS preprocessors have had a lot of success. It was very common for greenfield projects to start with Less or Sass. And it’s still a very popular technology.

The main benefits of those technologies are, in my opinion:

• They allow you to nest selectors
• The provide an easy imports functionality
• They give you variables

Modern CSS has a new powerful feature called CSS Custom Properties , also commonly known as CSS Variables .

CSS is not a programming language like JavaScript , Python, PHP, Ruby or Go where variables are key to do something useful. CSS is very limited in what it can do, and it’s mainly a declarative syntax to tell browsers how they should display an HTML page.

But a variable is a variable: a name that refers to a value, and variables in CSS help reduce repetition and inconsistencies in your CSS, by centralizing the values definition.

And it introduces a unique feature that CSS preprocessors won’t ever have: you can access and change the value of a CSS Variable programmatically using JavaScript .

The basics of using variables

A CSS Variable is defined with a special syntax, prepending two dashes to a name ( --variable-name ), then a colon and a value. Like this:

(more on :root later)

You can access the variable value using var() :

The variable value can be any valid CSS value, for example:

Create variables inside any element

CSS Variables can be defined inside any element. Some examples:

What changes in those different examples is the scope .

Variables scope

Adding variables to a selector makes them available to all the children of it.

In the example above you saw the use of :root when defining a CSS variable:

:root is a CSS pseudo-class that identifies the root element of a tree.

In the context of an HTML document, using the :root selector points to the html element, except that :root has higher specificity (takes priority).

In the context of an SVG image, :root points to the svg tag.

Adding a CSS custom property to :root makes it available to all the elements in the page.

If you add a variable inside a .container selector, it's only going to be available to children of .container :

and using it outside of this element is not going to work.

Variables can be reassigned :

Outside .container , --primary-color will be yellow , but inside it will be blue .

You can also assign or overwrite a variable inside the HTML using inline styles :

CSS Variables follow the normal CSS cascading rules, with precedence set according to specificity.

Interacting with a CSS Variable value using JavaScript

The coolest thing with CSS Variables is the ability to access and edit them using JavaScript.

Here’s how you set a variable value using plain JavaScript:

This code below can be used to access a variable value instead, in case the variable is defined on :root :

Or, to get the style applied to a specific element, in case of variables set with a different scope:

Handling invalid values

If a variable is assigned to a property which does not accept the variable value, it’s considered invalid.

For example you might pass a pixel value to a position property, or a rem value to a color property.

In this case the line is considered invalid and is ignored.

Browser support

Browser support for CSS Variables is very good , according to Can I Use .

CSS Variables are here to stay, and you can use them today if you don’t need to support Internet Explorer and old versions of the other browsers.

If you need to support older browsers you can use libraries like PostCSS or Myth , but you’ll lose the ability to interact with variables via JavaScript or the Browser Developer Tools, as they are transpiled to good old variable-less CSS (and as such, you lose most of the power of CSS Variables).

CSS Variables are case sensitive

This variable:

is different than this one:

Math in CSS Variables

To do math in CSS Variables, you need to use calc() , for example:

Media queries with CSS Variables

Nothing special here. CSS Variables normally apply to media queries:

Setting a fallback value for var()

var() accepts a second parameter, which is the default fallback value when the variable value is not set:

At the dawn of the web you only had a handful of fonts you could choose from.

Thankfully today you can load any kind of font on your pages.

CSS has gained many nice capabilities over the years in regards to fonts.

The font property is the shorthand for a number of properties:

Let’s see each one of them and then we’ll cover font .

Then we’ll talk about how to load custom fonts, using @import or @font-face , or by loading a font stylesheet.

Sets the font family that the element will use.

Why “family”? Because what we know as a font is actually composed of several sub-fonts which provide all the style (bold, italic, light..) we need.

Here’s an example from my Mac’s Font Book app — the Fira Code font family hosts several dedicated fonts underneath:

This property lets you select a specific font, for example:

You can set multiple values, so the second option will be used if the first cannot be used for some reason (if it’s not found on the machine, or the network connection to download the font failed, for example):

I used some specific fonts up to now, ones we call Web Safe Fonts , as they are pre-installed on different operating systems.

We divide them in Serif, Sans-Serif, and Monospace fonts. Here’s a list of some of the most popular ones:

• Times New Roman
• Lucida Grande
• Trebuchet MS
• Arial Black
• Courier New
• Lucida Console

You can use all of those as font-family properties, but they are not guaranteed to be there for every system. Others exist, too, with a varying level of support.

You can also use generic names:

• sans-serif a font without ligatures
• serif a font with ligatures
• monospace a font especially good for code
• cursive used to simulate handwritten pieces
• fantasy the name says it all

Those are typically used at the end of a font-family definition, to provide a fallback value in case nothing else can be applied:

This property sets the width of a font. You can use those predefined values:

• bolder (relative to the parent element)
• lighter (relative to the parent element)

Or using the numeric keywords

• 400, mapped to normal
• 700 mapped to bold

where 100 is the lightest font, and 900 is the boldest.

Some of those numeric values might not map to a font, because that must be provided in the font family. When one is missing, CSS makes that number be at least as bold as the preceding one, so you might have numbers that point to the same font.

Allows you to choose a narrow or wide face of the font, if available.

This is important: the font must be equipped with different faces.

Values allowed are, from narrower to wider:

• ultra-condensed
• extra-condensed
• semi-condensed
• semi-expanded
• extra-expanded
• ultra-expanded

Allows you to apply an italic style to a font:

This property also allows the values oblique and normal . There is very little, if any, difference between using italic and oblique . The first is easier to me, as HTML already offers an i element which means italic.

This property is used to determine the size of fonts.

You can pass 2 kinds of values:

• a length value, like px , em , rem etc, or a percentage
• a predefined value keyword

In the second case, the values you can use are:

• smaller (relative to the parent element)
• larger (relative to the parent element)

This property was originally used to change the text to small caps, and it had just 3 valid values:

Small caps means the text is rendered in “smaller caps” beside its uppercase letters.

The font property lets you apply different font properties in a single one, reducing the clutter.

We must at least set 2 properties, font-size and font-family , the others are optional:

If we add other properties, they need to be put in the correct order.

This is the order:

Loading custom fonts using @font-face

@font-face lets you add a new font family name, and map it to a file that holds a font.

This font will be downloaded by the browser and used in the page, and it’s been such a fundamental change to typography on the web — we can now use any font we want.

We can add @font-face declarations directly into our CSS, or link to a CSS dedicated to importing the font.

In our CSS file we can also use @import to load that CSS file.

A @font-face declaration contains several properties we use to define the font, including src , the URI (one or more URIs) to the font. This follows the same-origin policy, which means fonts can only be downloaded from the current origin (domain + port + protocol).

Fonts are usually in the formats

• woff (Web Open Font Format)
• woff2 (Web Open Font Format 2.0)
• eot (Embedded Open Type)
• otf (OpenType Font)
• ttf (TrueType Font)

The following properties allow us to define the properties to the font we are going to load, as we saw above:

A note on performance

Of course loading a font has performance implications which you must consider when creating the design of your page.

We already talked about fonts, but there’s more to styling text.

In this section we’ll talk about the following properties:

• text-decoration
• vertical-align

writing-mode

Text-orientation, overflow-wrap.

This property can transform the case of an element.

There are 4 valid values:

• capitalize to uppercase the first letter of each word
• uppercase to uppercase all the text
• lowercase to lowercase all the text
• none to disable transforming the text, used to avoid inheriting the property

This property adds decorations to the text, including

• line-through

You can also set the style of the decoration, and the color.

Valid style values are solid , double , dotted , dashed , wavy .

You can do all in one line, or use the specific properties:

• text-decoration-line
• text-decoration-style

By default text align has the start value, meaning the text starts at the "start", origin 0, 0 of the box that contains it. This means top left in left-to-right languages, and top right in right-to-left languages.

Possible values are start , end , left , right , center , justify (nice to have a consistent spacing at the line ends):

Determines how inline elements are vertically aligned.

We have several values for this property. First we can assign a length or percentage value. Those are used to align the text in a position higher or lower (using negative values) than the baseline of the parent element.

Then we have the keywords:

• baseline (the default), aligns the baseline to the baseline of the parent element
• sub makes an element subscripted, simulating the sub HTML element result
• super makes an element superscripted, simulating the sup HTML element result
• top align the top of the element to the top of the line
• text-top align the top of the element to the top of the parent element font
• middle align the middle of the element to the middle of the line of the parent
• bottom align the bottom of the element to the bottom of the line
• text-bottom align the bottom of the element to the bottom of the parent element font

This allows you to change the height of a line. Each line of text has a certain font height, but then there is additional spacing vertically between the lines. That’s the line height:

Indent the first line of a paragraph by a set length, or a percentage of the paragraph width:

By default the last line of a paragraph is aligned following the text-align value. Use this property to change that behavior:

Modifies the spacing between each word.

You can use the normal keyword, to reset inherited values, or use a length value:

Modifies the spacing between each letter.

Apply a shadow to the text. By default the text has no shadow.

This property accepts an optional color, and a set of values that set

• the X offset of the shadow from the text
• the Y offset of the shadow from the text
• the blur radius

If the color is not specified, the shadow will use the text color.

Sets how CSS handles the white space, new lines and tabs inside an element.

Valid values that collapse white space are:

• normal collapses white space. Adds new lines when necessary as the text reaches the container end
• nowrap collapses white space. Does not add a new line when the text reaches the end of the container, and suppresses any line break added to the text
• pre-line collapses white space. Adds new lines when necessary as the text reaches the container end

Valid values that preserve white space are:

• pre preserves white space. Does not add a new line when the text reaches the end of the container, but preserves line break added to the text
• pre-wrap preserves white space. Adds new lines when necessary as the text reaches the container end

Sets the width of the tab character. By default it’s 8, and you can set an integer value that sets the character spaces it takes, or a length value:

Defines whether lines of text are laid out horizontally or vertically, and the direction in which blocks progress.

The values you can use are

• horizontal-tb (default)
• vertical-rl content is laid out vertically. New lines are put on the left of the previous
• vertical-lr content is laid out vertically. New lines are put on the right of the previous

Determines if hyphens should be automatically added when going to a new line.

Valid values are

• none (default)
• manual only add an hyphen when there is already a visible hyphen or a hidden hyphen (a special character)
• auto add hyphens when determined the text can have a hyphen.

When writing-mode is in a vertical mode, determines the orientation of the text.

• mixed is the default, and if a language is vertical (like Japanese) it preserves that orientation, while rotating text written in western languages
• upright makes all text be vertically oriented
• sideways makes all text horizontally oriented

Sets the direction of the text. Valid values are ltr and rtl :

This property specifies how to break lines within words.

• normal (default) means the text is only broken between words, not inside a word
• break-all the browser can break a word (but no hyphens are added)
• keep-all suppress soft wrapping. Mostly used for CJK (Chinese/Japanese/Korean) text.

Speaking of CJK text, the property line-break is used to determine how text lines break. I'm not an expert with those languages, so I will avoid covering it.

If a word is too long to fit a line, it can overflow outside of the container.

This property is also known as word-wrap , although that is non-standard (but still works as an alias)

This is the default behavior ( overflow-wrap: normal; ).

We can use:

to break it at the exact length of the line, or

if the browser sees there’s a soft wrap opportunity somewhere earlier. No hyphens are added, in any case.

This property is very similar to word-break . We might want to choose this one on western languages, while word-break has special treatment for non-western languages.

Every CSS element is essentially a box. Every element is a generic box.

The box model explains the sizing of the elements based on a few CSS properties.

From the inside to the outside, we have:

• the content area

The best way to visualize the box model is to open the browser DevTools and check how it is displayed:

Here you can see how Firefox tells me the properties of a span element I highlighted. I right-clicked on it, pressed Inspect Element, and went to the Layout panel of the DevTools.

See, the light blue space is the content area. Surrounding it there is the padding, then the border and finally the margin.

By default, if you set a width (or height) on the element, that is going to be applied to the content area . All the padding, border, and margin calculations are done outside of the value, so you have to keep this in mind when you do your calculation.

Later you’ll see how you can change this behavior using Box Sizing.

The border is a thin layer between padding and margin. By editing the border, you can make elements draw their perimeter on screen.

You can work on borders by using those properties:

• border-style
• border-width

The property border can be used as a shorthand for all those properties.

border-radius is used to create rounded corners.

You also have the ability to use images as borders, an ability given to you by border-image and its specific separate properties:

• border-image-source
• border-image-slice
• border-image-width
• border-image-outset
• border-image-repeat

Let’s start with border-style .

The border style

The border-style property lets you choose the style of the border. The options you can use are:

Check out this Codepen for a live example.

The default for the style is none , so to make the border appear at all you need to change it to something else. solid is a good choice most of the time.

You can set a different style for each edge using the properties

• border-top-style
• border-right-style
• border-bottom-style
• border-left-style

or you can use border-style with multiple values to define them, using the usual Top-Right-Bottom-Left order:

The border width

border-width is used to set the width of the border.

You can use one of the pre-defined values:

• medium (the default value)

or express a value in pixels, em or rem or any other valid length value.

You can set the width of each edge (Top-Right-Bottom-Left) separately by using 4 values:

or you can use the specific edge properties border-top-width , border-right-width , border-bottom-width , border-left-width .

The border color

border-color is used to set the color of the border.

If you don’t set a color, the border by default is colored using the color of the text in the element.

You can pass any valid color value to border-color .

You can set the color of each edge (Top-Right-Bottom-Left) separately by using 4 values:

or you can use the specific edge properties border-top-color , border-right-color , border-bottom-color , border-left-color .

The border shorthand property

Those 3 properties mentioned, border-width , border-style and border-color can be set using the shorthand property border .

You can also use the edge-specific properties border-top , border-right , border-bottom , border-left .

The border radius

border-radius is used to set rounded corners to the border. You need to pass a value that will be used as the radius of the circle that will be used to round the border.

You can also use the edge-specific properties border-top-left-radius , border-top-right-radius , border-bottom-left-radius , border-bottom-right-radius .

Using images as borders

One very cool thing with borders is the ability to use images to style them. This lets you go very creative with borders.

We have 5 properties:

and the shorthand border-image . I won't go in much details here as images as borders would need a more in-depth coverage as what I can do in this little chapter. I recommend reading the CSS Tricks almanac entry on border-image for more information.

The padding CSS property is commonly used in CSS to add space in the inner side of an element.

• margin adds space outside an element border
• padding adds space inside an element border

Specific padding properties

padding has 4 related properties that alter the padding of a single edge at once:

• padding-top
• padding-right
• padding-bottom
• padding-left

The usage of those is very simple and cannot be confused, for example:

Using the padding shorthand

padding is a shorthand to specify multiple padding values at the same time, and depending on the number of values entered, it behaves differently.

Using a single value applies that to all the paddings: top, right, bottom, left.

Using 2 values applies the first to bottom & top , and the second to left & right .

Using 3 values applies the first to top , the second to left & right , the third to bottom .

Using 4 values applies the first to top , the second to right , the third to bottom , the fourth to left .

So, the order is top-right-bottom-left .

Values accepted

padding accepts values expressed in any kind of length unit, the most common ones are px, em, rem, but many others exist .

The margin CSS property is commonly used in CSS to add space around an element.

Specific margin properties

margin has 4 related properties that alter the margin of a single edge at once:

• margin-right
• margin-bottom
• margin-left

Using the margin shorthand

margin is a shorthand to specify multiple margins at the same time, and depending on the number of values entered, it behaves differently.

Using a single value applies that to all the margins: top, right, bottom, left.

margin accepts values expressed in any kind of length unit, the most common ones are px, em, rem, but many others exist .

It also accepts percentage values, and the special value auto .

Using auto to center elements

auto can be used to tell the browser to select automatically a margin, and it's most commonly used to center an element in this way:

As said above, using 2 values applies the first to bottom & top , and the second to left & right .

The modern way to center elements is to use Flexbox , and its justify-content: center; directive.

Older browsers of course do not implement Flexbox, and if you need to support them margin: 0 auto; is still a good choice.

Using a negative margin

margin is the only property related to sizing that can have a negative value. It's extremely useful, too. Setting a negative top margin makes an element move over elements before it, and given enough negative value it will move out of the page.

A negative bottom margin moves up the elements after it.

A negative right margin makes the content of the element expand beyond its allowed content size.

A negative left margin moves the element left over the elements that precede it, and given enough negative value it will move out of the page.

The default behavior of browsers when calculating the width of an element is to apply the calculated width and height to the content area , without taking any of the padding, border and margin in consideration.

This approach has proven to be quite complicated to work with.

You can change this behavior by setting the box-sizing property.

The box-sizing property is a great help. It has 2 values:

• content-box

content-box is the default, the one we had for ages before box-sizing became a thing.

border-box is the new and great thing we are looking for. If you set that on an element:

width and height calculation include the padding and the border. Only the margin is left out, which is reasonable since in our mind we also typically see that as a separate thing: margin is outside of the box.

This property is a small change but has a big impact. CSS Tricks even declared an international box-sizing awareness day , just saying, and it’s recommended to apply it to every element on the page, out of the box, with this:

The display property of an object determines how it is rendered by the browser.

It’s a very important property, and probably the one with the highest number of values you can use.

Those values include:

• table (and all the table-* ones)

inline-block

• inline-table
• inline-flex
• inline-grid
• inline-list-item

plus others you will not likely use, like ruby .

Choosing any of those will considerably alter the behavior of the browser with the element and its children.

In this section we’ll analyze the most important ones not covered elsewhere:

We’ll see some of the others in later chapters, including coverage of table , flex and grid .

Inline is the default display value for every element in CSS.

All the HTML tags are displayed inline out of the box except some elements like div , p and section , which are set as block by the user agent (the browser).

Inline elements don’t have any margin or padding applied.

Same for height and width.

You can add them, but the appearance in the page won’t change — they are calculated and applied automatically by the browser.

Similar to inline , but with inline-block width and height applied as you specify.

As mentioned, normally elements are displayed inline, with the exception of some elements, including

which are set as block by the browser.

With display: block , elements are stacked one after each other, vertically, and every element takes up 100% of the page.

The values assigned to the width and height properties are respected, if you set them, along with margin and padding .

Using display: none makes an element disappear. It's still there in the HTML, but just not visible in the browser.

Positioning is what makes us determine where elements appear on the screen, and how they appear.

You can move elements around, and position them exactly where you want.

In this section we’ll also see how things change on a page based on how elements with different position interact with each other.

We have one main CSS property: position .

It can have those 5 values:

Static positioning

This is the default value for an element. Static positioned elements are displayed in the normal page flow.

Relative positioning

If you set position: relative on an element, you are now able to position it with an offset, using the properties

which are called offset properties . They accept a length value or a percentage.

Take this example I made on Codepen . I create a parent container, a child container, and an inner box with some text:

with some CSS to give some colors and padding, but does not affect positioning:

here’s the result:

You can try and add any of the properties I mentioned before ( top , right , bottom , left ) to .box , and nothing will happen. The position is static .

Now if we set position: relative to the box, at first apparently nothing changes. But the element is now able to move using the top , right , bottom , left properties, and now you can alter the position of it relatively to the element containing it.

A negative value for top will make the box move up relatively to its container.

Notice how the space that is occupied by the box remains preserved in the container, like it was still in its place.

Another property that will now work is z-index to alter the z-axis placement. We'll talk about it later on.

Absolute positioning

Setting position: absolute on an element will remove it from the document's flow.

Remember in relative positioning that we noticed the space originally occupied by an element was preserved even if it was moved around?

With absolute positioning, as soon as we set position: absolute on .box , its original space is now collapsed, and only the origin (x, y coordinates) remain the same.

We can now move the box around as we please, using the top , right , bottom , left properties:

The coordinates are relative to the closest container that is not static .

This means that if we add position: relative to the .child element, and we set top and left to 0, the box will not be positioned at the top left margin of the window , but rather it will be positioned at the 0, 0 coordinates of .child :

Here’s how we already saw that .child is static (the default):

Like for relative positioning, you can use z-index to alter the z-axis placement.

Fixed positioning

Like with absolute positioning, when an element is assigned position: fixed it's removed from the flow of the page.

The difference with absolute positioning is this: elements are now always positioned relative to the window, instead of the first non-static container.

Another big difference is that elements are not affected by scrolling. Once you put a fixed element somewhere, scrolling the page does not remove it from the visible part of the page.

Sticky positioning

While the above values have been around for a very long time, this one was introduced recently and it’s still relatively unsupported ( see caniuse.com )

The UITableView iOS component is the thing that comes to mind when I think about position: sticky . You know when you scroll in the contacts list and the first letter is stuck to the top, to let you know you are viewing that particular letter's contacts?

We used JavaScript to emulate that, but this is the approach taken by CSS to allow it natively.

Floating has been a very important topic in the past.

It was used in lots of hacks and creative usages because it was one of the few ways, along with tables, we could really implement some layouts. In the past we used to float the sidebar to the left, for example, to show it on the left side of the screen and added some margin to the main content.

Luckily times have changed and today we have Flexbox and Grid to help us with layout, and float has gone back to its original scope: placing content on one side of the container element, and making its siblings show up around it.

The float property supports 3 values:

• none (the default)

Say we have a box which contains a paragraph with some text, and the paragraph also contains an image.

Here’s some code:

and the visual appearance:

As you can see, the normal flow by default considers the image inline, and makes space for it in the line itself.

If we add float: left to the image, and some padding:

this is the result:

and this is what we get by applying a float: right, adjusting the padding accordingly:

A floated element is removed from the normal flow of the page, and the other content flows around it.

See the example on Codepen

You are not limited to floating images, too. Here we switch the image with a span element:

and this is the result:

What happens when you float more than one element?

If when floated they find another floated image, by default they are stacked up one next to the other, horizontally. Until there is no room, and they will start being stacked on a new line.

Say we had 3 inline images inside a p tag:

If we add float: left to those images:

this is what we’ll have:

if you add clear: left to images, those are going to be stacked vertically rather than horizontally:

I used the left value for clear . It allows

• left to clear left floats
• right to clear right floats
• both to clear both left and right floats
• none (default) disables clearing

When we talked about positioning, I mentioned that you can use the z-index property to control the Z axis positioning of elements.

It’s very useful when you have multiple elements that overlap each other, and you need to decide which one is visible, as nearer to the user, and which one(s) should be hidden behind it.

This property takes a number (without decimals) and uses that number to calculate which elements appear nearer to the user, in the Z axis.

The higher the z-index value, the more an element is positioned nearer to the user.

When deciding which element should be visible and which one should be positioned behind it, the browser does a calculation on the z-index value.

The default value is auto , a special keyword. Using auto , the Z axis order is determined by the position of the HTML element in the page - the last sibling appears first, as it's defined last.

By default elements have the static value for the position property. In this case, the z-index property does not make any difference - it must be set to absolute , relative or fixed to work.

The element with class .my-second-div will be displayed, and behind it .my-first-div .

Here we used 10 and 20, but you can use any number. Negative numbers too. It’s common to pick non-consecutive numbers, so you can position elements in the middle. If you use consecutive numbers instead, you would need to re-calculate the z-index of each element involved in the positioning.

CSS Grid is the new kid in the CSS town, and while not yet fully supported by all browsers, it’s going to be the future system for layouts.

CSS Grid is a fundamentally new approach to building layouts using CSS.

Keep an eye on the CSS Grid Layout page on caniuse.com ( https://caniuse.com/#feat=css-grid ) to find out which browsers currently support it. At the time of writing, April 2019, all major browsers (except IE, which will never have support for it) are already supporting this technology, covering 92% of all users.

CSS Grid is not a competitor to Flexbox. They interoperate and collaborate on complex layouts, because CSS Grid works on 2 dimensions (rows AND columns) while Flexbox works on a single dimension (rows OR columns).

Building layouts for the web has traditionally been a complicated topic.

I won’t dig into the reasons for this complexity, which is a complex topic on its own. But you can think yourself as a very lucky human because nowadays you have 2 very powerful and well supported tools at your disposal:

• CSS Flexbox

These 2 are the tools to build the Web layouts of the future.

Unless you need to support old browsers like IE8 and IE9, there is no reason to be messing with things like:

• Table layouts
• clearfix hacks
• display: table hacks

In this guide there’s all you need to know about going from zero knowledge of CSS Grid to being a proficient user.

The CSS Grid layout is activated on a container element (which can be a div or any other tag) by setting display: grid .

As with flexbox, you can define some properties on the container, and some properties on each individual item in the grid.

These properties combined will determine the final look of the grid.

The most basic container properties are grid-template-columns and grid-template-rows .

grid-template-columns and grid-template-rows

Those properties define the number of columns and rows in the grid, and they also set the width of each column/row.

The following snippet defines a grid with 4 columns each 200px wide, and 2 rows with a 300px height each.

Here’s another example of a grid with 2 columns and 2 rows:

Automatic dimensions

Many times you might have a fixed header size, a fixed footer size, and the main content that is flexible in height, depending on its length. In this case you can use the auto keyword:

Different columns and rows dimensions

In the above examples we made regular grids by using the same values for rows and the same values for columns.

You can specify any value for each row/column, to create a lot of different designs:

Another example:

Adding space between the cells

Unless specified, there is no space between the cells.

You can add spacing by using those properties:

• grid-column-gap
• grid-row-gap

or the shorthand syntax grid-gap .

The same layout using the shorthand:

Spanning items on multiple columns and/or rows

Every cell item has the option to occupy more than just one box in the row, and expand horizontally or vertically to get more space, while respecting the grid proportions set in the container.

These are the properties we’ll use for that:

• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end

The numbers correspond to the vertical line that separates each column, starting from 1:

The same principle applies to grid-row-start and grid-row-end , except this time instead of taking more columns, a cell takes more rows.

Shorthand syntax

Those properties have a shorthand syntax provided by:

• grid-column

The usage is simple, here’s how to replicate the above layout:

Another approach is to set the starting column/row, and set how many it should occupy using span :

More grid configuration

Using fractions.

Specifying the exact width of each column or row is not ideal in every case.

A fraction is a unit of space.

The following example divides a grid into 3 columns with the same width, 1/3 of the available space each.

Using percentages and rem

You can also use percentages, and mix and match fractions, pixels, rem and percentages:

Using repeat()

repeat() is a special function that takes a number that indicates the number of times a row/column will be repeated, and the length of each one.

If every column has the same width, you can specify the layout using this syntax:

This creates 4 columns with the same width.

Or using fractions:

Specify a minimum width for a row

Common use case: Have a sidebar that never collapses more than a certain amount of pixels when you resize the window.

Here’s an example where the sidebar takes 1/4 of the screen and never takes less than 200px:

You can also set just a maximum value using the auto keyword:

or just a minimum value:

Positioning elements using grid-template-areas

By default elements are positioned in the grid using their order in the HTML structure.

Using grid-template-areas you can define template areas to move them around in the grid, and also to span an item on multiple rows / columns instead of using grid-column .

Here’s an example:

Despite their original order, items are placed where grid-template-areas define, depending on the grid-area property associated to them.

Adding empty cells in template areas

You can set an empty cell using the dot . instead of an area name in grid-template-areas :

Fill a page with a grid

You can make a grid extend to fill the page using fr :

An example: header, sidebar, content and footer

Here is a simple example of using CSS Grid to create a site layout that provides a header op top, a main part with sidebar on the left and content on the right, and a footer afterwards.

Here’s the markup:

and here’s the CSS:

I added some colors to make it prettier, but basically it assigns to every different tag a grid-area name, which is used in the grid-template-areas property in .wrapper .

When the layout is smaller we can put the sidebar below the content using a media query:

See on CodePen

These are the basics of CSS Grid. There are many things I didn’t include in this introduction but I wanted to make it very simple, so you can start using this new layout system without making it feel overwhelming.

Flexbox, also called Flexible Box Module, is one of the two modern layouts systems, along with CSS Grid.

Compared to CSS Grid (which is bi-dimensional), flexbox is a one-dimensional layout model . It will control the layout based on a row or on a column, but not together at the same time.

The main goal of flexbox is to allow items to fill the whole space offered by their container, depending on some rules you set.

Unless you need to support old browsers like IE8 and IE9, Flexbox is the tool that lets you forget about using

Let’s dive into flexbox and become a master of it in a very short time.

At the time of writing (Feb 2018), it’s supported by 97.66% of the users. All the most important browsers have implemented it for years, so even older browsers (including IE10+) are covered:

While we must wait a few years for users to catch up on CSS Grid, Flexbox is an older technology and can be used right now.

Enable Flexbox

A flexbox layout is applied to a container, by setting

The content inside the container will be aligned using flexbox.

Container properties

Some flexbox properties apply to the container, which sets the general rules for its items. They are

• flex-direction
• justify-content
• align-items

Align rows or columns

The first property we see, **flex-direction** , determines if the container should align its items as rows, or as columns:

• flex-direction: row places items as a row , in the text direction (left-to-right for western countries)
• flex-direction: row-reverse places items just like row but in the opposite direction
• flex-direction: column places items in a column , ordering top to bottom
• flex-direction: column-reverse places items in a column, just like column but in the opposite direction

Vertical and horizontal alignment

By default, items start from the left if flex-direction is row, and from the top if flex-direction is column.

You can change this behavior using justify-content to change the horizontal alignment, and align-items to change the vertical alignment.

Change the horizontal alignment

**justify-content** has 5 possible values:

• flex-start : align to the left side of the container.
• flex-end : align to the right side of the container.
• center : align at the center of the container.
• space-between : display with equal spacing between them.
• space-around : display with equal spacing around them

Change the vertical alignment

**align-items** has 5 possible values:

• flex-start : align to the top of the container.
• flex-end : align to the bottom of the container.
• center : align at the vertical center of the container.
• baseline : display at the baseline of the container.
• stretch : items are stretched to fit the container.

A note on baseline :

baseline looks similar to flex-start in this example, due to my boxes being too simple. Check out this Codepen to have a more useful example, which I forked from a Pen originally created by Martin Michálek . As you can see there, item dimensions are aligned.

By default, items in a flexbox container are kept on a single line, shrinking them to fit in the container.

To force the items to spread across multiple lines, use flex-wrap: wrap . This will distribute the items according to the order set in flex-direction . Use flex-wrap: wrap-reverse to reverse this order.

A shorthand property called flex-flow allows you to specify flex-direction and flex-wrap in a single line, by adding the flex-direction value first, followed by flex-wrap value, for example: flex-flow: row wrap .

Properties that apply to each single item

Up to this point, we’ve seen the properties you can apply to the container.

Single items can have a certain amount of independence and flexibility, and you can alter their appearance using those properties:

• flex-shrink

Let’s see them in detail.

Moving items before / after another one using order

Items are ordered based on the order they are assigned. By default every item has order 0 and the appearance in the HTML determines the final order.

You can override this property using order on each separate item. This is a property you set on the item, not the container. You can make an item appear before all the others by setting a negative value.

Vertical alignment using align-self

An item can choose to override the container align-items setting, using **align-self** , which has the same 5 possible values of align-items :

Grow or shrink an item if necessary

The default for any item is 0.

If all items are defined as 1 and one is defined as 2, the bigger element will take the space of two “1” items.

The defaut for any item is 1.

If all items are defined as 1 and one is defined as 3, the bigger element will shrink 3x the other ones. When less space is available, it will take 3x less space.

If set to auto , it sizes an item according to its width or height, and adds extra space based on the flex-grow property.

If set to 0, it does not add any extra space for the item when calculating the layout.

If you specify a pixel number value, it will use that as the length value (width or height depends on if it’s a row or a column item)

This property combines the above 3 properties:

and provides a shorthand syntax: flex: 0 1 auto

Tables in the past were greatly overused in CSS, as they were one of the only ways we could create a fancy page layout.

Today with Grid and Flexbox we can move tables back to the job they were intended to do: styling tables.

Let’s start from the HTML. This is a basic table:

By default it’s not very attractive. The browser provides some standard styles, and that’s it:

We can use CSS to style all the elements of the table, of course.

Let’s start with the border. A nice border can go a long way.

We can apply it on the table element, and on the inner elements too, like th and td :

If we pair it with some margin, we get a nice result:

One common thing with tables is the ability to add a color to one row, and a different color to another row. This is possible using the :nth-child(odd) or :nth-child(even) selector:

This gives us:

If you add border-collapse: collapse; to the table element, all borders are collapsed into one:

Centering things in CSS is a task that is very different if you need to center horizontally or vertically.

In this post I explain the most common scenarios and how to solve them. If a new solution is provided by Flexbox I ignore the old techniques because we need to move forward, and Flexbox has been supported by browsers for years, IE10 included.

Center horizontally

Text is very simple to center horizontally using the text-align property set to center :

The modern way to center anything that is not text is to use Flexbox:

any element inside #mysection will be horizontally centered.

Here is the alternative approach if you don’t want to use Flexbox.

Anything that is not text can be centered by applying an automatic margin to left and right, and setting the width of the element:

the above margin: 0 auto; is a shorthand for:

Remember to set the item to display: block if it's an inline element.

Center vertically

Traditionally this has always been a difficult task. Flexbox now provides us a great way to do this in the simplest possible way:

any element inside #mysection will be vertically centered.

Center both vertically and horizontally

Flexbox techniques to center vertically and horizontally can be combined to completely center an element in the page.

The same can be done using CSS Grid :

Lists are a very important part of many web pages.

CSS can style them using several properties.

list-style-type is used to set a predefined marker to be used by the list:

We have lots of possible values, which you can see here https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type with examples of their appearance. Some of the most popular ones are disc , circle , square and none .

list-style-image is used to use a custom marker when a predefined marker is not appropriate:

list-style-position lets you add the marker outside (the default) or inside of the list content, in the flow of the page rather than outside of it

The list-style shorthand property lets us specify all those properties in the same line:

In this section we’re going to first introduce media types and media feature descriptors, then we’ll explain media queries.

Media types

Used in media queries and @import declarations, media types allow us to determine on which media a CSS file, or a piece of CSS, is loaded.

We have the following media types

• all means all the media
• print used when printing
• screen used when the page is presented on a screen
• speech used for screen readers

screen is the default.

In the past we had more of them, but most are deprecated as they proved to be ineffective ways of determining device needs.

We can use them in @import statements like this:

We can load a CSS file on multiple media types separating each with a comma:

The same works for the link tag in HTML:

We’re not limited to just using media types in the media attribute and in the @import declaration. There's more.

Media feature descriptors

First, let’s introduce media feature descriptors . They are additional keywords that we can add to the media attribute of link or the the @import declaration, to express more conditionals over the loading of the CSS.

Here’s the list of them:

• device-width
• device-height
• aspect-ratio
• device-aspect-ratio
• color-index
• orientation

Each of them has a corresponding min- and max- , for example:

• min-width , max-width
• min-device-width , max-device-width

Some of those accept a length value which can be expressed in px or rem or any length value. It's the case of width , height , device-width , device-height .

Notice that we wrap each block using media feature descriptors in parentheses.

Some accept a fixed value. orientation , used to detect the device orientation, accepts portrait or landscape .

scan , used to determine the type of screen, accepts progressive (for modern displays) or interlace (for older CRT devices).

Some others want an integer.

Like color which inspects the number of bits per color component used by the device. Very low-level, but you just need to know it's there for your usage (like grid , color-index , monochrome ).

aspect-ratio and device-aspect-ratio accept a ratio value representing the width to height viewport ratio, which is expressed as a fraction.

resolution represents the pixel density of the device, expressed in a resolution data type like dpi .

Logic operators

We can combine rules using and :

We can perform an “or” type of logic operation using commas, which combines multiple media queries:

We can use not to negate a media query:

Important: not can only be used to negate an entire media query, so it must be placed at the beginning of it (or after a comma).

Media queries

All those above rules we saw applied to @import or the the link HTML tag can be applied inside the CSS, too.

You need to wrap them in a @media () {} structure.

and this is the foundation for responsive design .

Media queries can be quite complex. This example applies the CSS only if it’s a screen device, the width is between 600 and 800 pixels, and the orientation is landscape:

Feature queries are a recent and relatively unknown ability of CSS, but a well supported one.

We can use it to check if a feature is supported by the browser using the @supports keyword.

I think this is especially useful, at the time of writing, for checking if a browser supports CSS grid, for example, which can be done using:

We check if the browser supports the grid value for the display property.

We can use @supports for any CSS property, to check any value.

We can also use the logical operators and , or and not to build complex feature queries:

Filters allow us to perform operations on elements.

Things you normally do with Photoshop or other photo editing software, like changing the opacity or the brightness, and more.

You use the filter property. Here's an example of it applied on an image, but this property can be used on any element:

You can use various values here:

brightness()

Drop-shadow(), grayscale(), hue-rotate().

Notice the parentheses after each option, because they all require a parameter.

means the image will be 50% transparent, because opacity() takes one value from 0 to 1, or a percentage.

You can also apply multiple filters at once:

Let’s now talk about each filter in detail.

Blurs an element content. You pass it a value, expressed in px or em or rem that will be used to determine the blur radius.

opacity() takes one value from 0 to 1, or a percentage, and determines the image transparency based on it.

0 , or 0% , means totally transparent. 1 , or 100% , or higher, means totally visible.

CSS also has an opacity property. filter however can be hardware accelerated, depending on the implementation, so this should be the preferred method.

drop-shadow() shows a shadow behind the element, which follows the alpha channel. This means that if you have a transparent image, you get a shadow applied to the image shape, not the image box. If the image does not have an alpha channel, the shadow will be applied to the entire image box.

It accepts a minimum of 2 parameters, up to 5:

• offset-x sets the horizontal offset. Can be negative.
• offset-y sets the vertical offset. Can be negative.
• blur-radius , optional, sets the blur radius for the shadow. It defaults to 0, no blur.
• spread-radius , optional, sets the spread radius. Expressed in px , rem or em
• color , optional, sets the color of the shadow.

You can set the color without setting the spread radius or blur radius. CSS understands the value is a color and not a length value.

Makes the element have a gray color.

You pass one value from 0 to 1, or from 0% to 100%, where 1 and 100% mean completely gray, and 0 or 0% mean the image is not touched, and the original colors remain.

Makes the element have a sepia color.

You pass one value from 0 to 1, or from 0% to 100%, where 1 and 100% mean completely sepia, and 0 or 0% mean the image is not touched, and the original colors remain.

Invert the colors of an element. Inverting a color means looking up the opposite of a color in the HSL color wheel. Just search “color wheel” in Google if you have no idea what that means. For example, the opposite of yellow is blue, the opposite of red is cyan. Every single color has an opposite.

You pass a number, from 0 to 1 or from 0% to 100%, that determines the amount of inversion. 1 or 100% means full inversion, 0 or 0% means no inversion.

0.5 or 50% will always render a 50% gray color, because you always end up in the middle of the wheel.

The HSL color wheel is represented in degrees. Using hue-rotate() you can rotate the color using a positive or negative rotation.

The function accepts a deg value.

Alters the brightness of an element.

0 or 0% gives a total black element. 1 or 100% gives an unchanged image.

Values higher than 1 or 100% make the image brighter up to reaching a total white element.

Alters the contrast of an element.

0 or 0% gives a total gray element. 1 or 100% gives an unchanged image.

Values higher than 1 or 100% give more contrast.

Alters the saturation of an element.

0 or 0% gives a total grayscale element (with less saturation). 1 or 100% gives an unchanged image.

Values higher than 1 or 100% give more saturation.

This filter allows to apply a filter defined in an SVG file. You point to the SVG file location.

SVG filters are out of the scope of this piece, but you can read more on this Smashing Magazine post: https://www.smashingmagazine.com/2015/05/why-the-svg-filter-is-awesome/

Transforms allow you to translate, rotate, scale, and skew elements, in the 2D or 3D space. They are a very cool CSS feature, especially when combined with animations.

2D transforms

The transform property accepts those functions:

• translate() to move elements around
• rotate() to rotate elements
• scale() to scale elements in size
• skew() to twist or slant an element
• matrix() a way to perform any of the above operations using a matrix of 6 elements, a less user friendly syntax but less verbose

We also have axis-specific functions:

• translateX() to move elements around on the X axis
• translateY() to move elements around on the Y axis
• scaleX() to scale elements in size on the X axis
• scaleY() to scale elements in size on the Y axis
• skewX() to twist or slant an element on the X axis
• skewY() to twist or slant an element on the Y axis

Here is an example of a transform which changes the .box element width by 2 (duplicating it) and the height by 0.5 (reducing it to half):

[transform-origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin) lets us set the origin (the (0, 0) coordinates) for the transformation, letting us change the rotation center.

Combining multiple transforms

You can combine multiple transforms by separating each function with a space.

3D transforms

We can go one step further and move our elements in a 3D space instead of in a 2D space. With 3D, we are adding another axis, Z, which adds depth to our visuals.

Using the perspective property you can specify how far the 3D object is from the viewer.

perspective-origin determines the appearance of the position of the viewer, how are we looking at it in the X and Y axis.

Now we can use additional functions that control the Z axis, and that add up to the other X and Y axis transforms:

• translateZ()

and the corresponding shorthands translate3d() , rotate3d() and scale3d() as shorthands for using the translateX() , translateY() and translateZ() functions and so on.

3D transforms are a bit too advanced for this handbook, but are a great topic to explore on your own.

CSS Transitions are the simplest way to create an animation in CSS.

In a transition, you change the value of a property, and you tell CSS to slowly change it according to some parameters, towards a final state.

CSS Transitions are defined by these properties:

The transition property is a handy shorthand:

Example of a CSS Transition

This code implements a CSS Transition:

See the example on Glitch https://flavio-css-transitions-example.glitch.me

When hovering the .one and .three elements, the purple circles, there is a transition animation that eases the change of background, while the yellow circles do not, because they do not have the transition property defined.

Transition timing function values

transition-timing-function allows you to specify the acceleration curve of the transition.

There are some simple values you can use:

• ease-in-out

This Glitch shows how these work in practice.

You can create a completely custom timing function using cubic bezier curves . This is rather advanced, but basically any of those functions above are built using bezier curves. We have handy names as they are common ones.

CSS Transitions in Browser DevTools

The Browser DevTools offer a great way to visualize transitions.

This is Chrome:

This is Firefox:

From those panels you can live edit the transition and experiment in the page directly without reloading your code.

Which Properties you can Animate using CSS Transitions

A lot! They are the same you can animate using CSS Animations, too.

Here’s the full list:

• border-bottom
• border-bottom-color
• border-bottom-left-radius
• border-bottom-right-radius
• border-bottom-width
• border-left
• border-left-color
• border-left-width
• border-radius
• border-right
• border-right-color
• border-right-width
• border-top-color
• border-top-left-radius
• border-top-right-radius
• border-top-width
• caret-color
• column-count
• column-rule
• column-rule-color
• column-rule-width
• column-width
• grid-auto-columns
• grid-auto-flow
• grid-auto-rows
• grid-template-areas
• grid-template-columns
• grid-template-rows
• grid-template
• outline-color
• outline-offset
• outline-width
• perspective
• perspective-origin

CSS Animations are a great way to create visual animations, not limited to a single movement like CSS Transitions, but much more articulated.

An animation is applied to an element using the animation property.

spin is the name of the animation, which we need to define separately. We also tell CSS to make the animation last 10 seconds, perform it in a linear way (no acceleration or any difference in its speed) and to repeat it infinitely.

You must define how your animation works using keyframes . Example of an animation that rotates an item:

Inside the @keyframes definition you can have as many intermediate waypoints as you want.

In this case we instruct CSS to make the transform property to rotate the Z axis from 0 to 360 grades, completing the full loop.

You can use any CSS transform here.

Notice how this does not dictate anything about the temporal interval the animation should take. This is defined when you use it via animation .

A CSS Animations Example

I want to draw four circles, all with a starting point in common, all 90 degrees distant from each other.

You can see them in this Glitch: https://flavio-css-circles.glitch.me

Let’s make this structure (all the circles together) rotate. To do this, we apply an animation on the container, and we define that animation as a 360 degree rotation:

See it on https://flavio-css-animations-tutorial.glitch.me

You can add more keyframes to have funnier animations:

See the example on https://flavio-css-animations-four-steps.glitch.me

The CSS animation properties

CSS animations offers a lot of different parameters you can tweak:

The animation property is a shorthand for all these properties, in this order:

This is the example we used above:

JavaScript events for CSS Animations

Using JavaScript you can listen for the following events:

• animationstart
• animationend
• animationiteration

Be careful with animationstart , because if the animation starts on page load, your JavaScript code is always executed after the CSS has been processed, so the animation is already started and you cannot intercept the event.

Which Properties You Can Animate using CSS Animations

A lot! They are the same you can animate using CSS Transitions, too.

The default browser stylesheet is the set of rules that browsers have to apply to give some minimum style to elements.

Most of the time those styles are very useful.

Since every browser has its own set, it’s common to find a common ground.

Rather than removing all defaults, like one of the CSS reset approaches does, the normalizing process removes browser inconsistencies, while keeping a basic set of rules you can rely on.

Normalize.css http://necolas.github.io/normalize.css is the most commonly used solution for this problem.

You must load the normalizing CSS file before any other CSS.

CSS is resilient. When it finds an error, it does not act like JavaScript which packs up all its things and goes away altogether, terminating all the script executions after the error is found.

CSS tries very hard to do what you want.

If a line has an error, it skips it and jumps to the next line without any error.

If you forget the semicolon on one line:

the line with the error AND the next one will not be applied, but the third rule will be successfully applied on the page. Basically, it scans all until it finds a semicolon, but when it reaches it, the rule is now font-size: 20px color: black; , which is invalid, so it skips it.

Sometimes it’s tricky to realize there is an error somewhere, and where that error is, because the browser won’t tell us.

This is why tools like CSS Lint exist.

Vendor prefixes are one way browsers use to give CSS developers access to newer features not yet considered stable.

Before going on, keep in mind that this approach is declining in popularity. People now favour using experimental flags , which must be enabled explicitly in the user’s browser.

Why? Because developers, instead of considering vendor prefixes as a way to preview features, sometimes ship them in production — something considered harmful by the CSS Working Group.

Mostly because once you add a flag and developers start using it in production, browsers are in a bad position if they realise something must change. With flags, you can’t ship a feature unless you can push all your visitors to enable that flag in their browser (just joking, don’t try).

That said, let’s see what vendor prefixes are.

I specifically remember them for working with CSS Transitions in the past. Instead of just using the transition property, you had to do this:

Now you just use

since the property is now well supported by all modern browsers.

The prefixes used are:

• -webkit- (Chrome, Safari, iOS Safari / iOS WebView, Android)
• -moz- (Safari)
• -ms- (Edge, Internet Explorer)
• -o- (Opera, Opera Mini)

Since Opera is Chromium-based and Edge will soon be too, -o- and -ms- will probably soon go out of fashion. But as we said, vendor prefixes as a whole are going out of fashion, too.

Writing prefixes is hard, mostly because of uncertainty. Do you actually need a prefix for one property? Several online resources are outdated, too, which makes it even harder to do right. Projects like Autoprefixer can automate the process in its entirety without us needing to find out if a prefix is needed any more, or the feature is now stable and the prefix should be dropped. It uses data from caniuse.com, a very good reference site for all things related to browser support.

If you use React or Vue, projects like create-react-app and Vue CLI, two common ways to start building an application, use autoprefixer out of the box, so you don't even have to worry about it.

Even though we increasingly stare at our screens, printing is still a thing.

Even with blog posts. I remember one time back in 2009 I met a person that told me he made his personal assistant print every blog post I published (yes, I stared blankly for a little bit). Definitely unexpected.

My main use case for looking into printing usually is printing to a PDF. I might create something inside the browser, and I want to make it available as PDF.

Browsers make this very easy, with Chrome defaulting to “Save” when trying to print a document and a printer is not available, and Safari has a dedicated button in the menu bar:

Some common things you might want to do when printing is to hide some parts of the document, maybe the footer, something in the header, the sidebar.

Maybe you want to use a different font for printing, which is totally legit.

If you have a large CSS for print, you’d better use a separate file for it. Browsers will only download it when printing:

CSS @media print

An alternative to the previous approach is media queries. Anything you add inside this block:

is going to be applied only to printed documents.

HTML is great because of links. It’s called HyperText for a good reason. When printing we might lose a lot of information, depending on the content.

CSS offers a great way to solve this problem by editing the content, appending the link after the < ;a> tag text, using:

I target a[href*='//'] to only do this for external links. I might have internal links for navigation and internal indexing purposes, which would be useless in most of my use cases. If you also want internal links to be printed, just do:

Page margins

You can add margins to every single page. cm or in is a good unit for paper printing.

@page can also be used to only target the first page, using @page :first , or only the left and right pages using @page :left and @page: right .

Page breaks

You might want to add a page break after some elements, or before them. Use page-break-after and page-break-before :

Those properties accept a wide variety of values .

Avoid breaking images in the middle

I experienced this with Firefox: images by default are cut in the middle, and continue on the next page. It might also happen to text.

and wrap your images in a p tag. Targeting img directly didn't work in my tests.

This applies to other content as well, not just images. If you notice something is cut when you don’t want, use this property.

Debug the printing presentation

The Chrome DevTools offer ways to emulate the print layout:

Once the panel opens, change the rendering emulation to print :

I hope this article helped you get up to speed with CSS and get an overview of the main features you can use to style your pages and apps. I wrote it to help you get comfortable with CSS and get you quickly up to speed with using this awesome tool that lets you create stunning designs on the Web, and I hope I achieved with this goal.

Read more posts .

If you read this far, thank the author to show them you care. Say Thanks

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started