I'm a full-stack developer working with JavaScript and its associated runtimes for the past 7 years. I love to play with code and make something useful out of it! You can find me on social media, I'm quite active there :)


Mehul Mohan

Get the basic concepts of CSS3 on your tips with a set of easy to follow labs in this classroom

Change the Color of Text

Use CSS Selectors to Style Elements

Use a CSS Class to Style an Element

Style Multiple Elements with a CSS Class

Change the Font Size of an Element

Set the Font Family of an Element

Import a Google Font

Specify How Fonts Should Degrade

Size Your Images

Add Borders Around Your Elements

Add Rounded Corners with border-radius

Make Circular Images with a border-radius

Give a Background Color to a div Element

Set the id of an Element

Use an id Attribute to Style an Element

Adjust the Padding of an Element

Adjust the Margin of an Element

Add a Negative Margin to an Element

Add Different Padding to Each Side of an Element

Add Different Margins to Each Side of an Element

Use Clockwise Notation to Specify the Padding of an Element

Use Clockwise Notation to Specify the Margin of an Element

Use Attribute Selectors to Style Elements

Understand Absolute versus Relative Units

Style the HTML Body Element

Inherit Styles from the Body Element

Prioritize One Style Over Another

Override Styles in Subsequent CSS

Override Class Declarations by Styling ID Attributes

Override Class Declarations with Inline Styles

Override All Other Styles by using Important

Use Hex Code for Specific Colors

Use Hex Code to Mix Colors

Use Abbreviated Hex Code

Use RGB values to Color Elements

Use RGB to Mix Colors

Use CSS Variables to change several elements at once

Create a custom CSS Variable

Use a custom CSS Variable

Attach a Fallback value to a CSS Variable

Improve Compatibility with Browser Fallbacks

Inherit CSS Variables

Change a variable for a specific area

Use a media query to change a variable

Cascading Style Sheets (CSS) tell the browser how to display the text and other content that you write in HTML.

Note that CSS is case-sensitive so be careful with your capitalization.

CSS has been adopted by all major browsers and allows you to control:

* color
* fonts
* positioning
* spacing
* sizing
* decorations
* transitions

There are three main ways to apply CSS styling. You can apply inline styles directly to HTML elements with the `style` attribute. Alternatively, you can place CSS rules within `style` tags in an HTML document. Finally, you can write CSS rules in an external style sheet, then reference that file in the HTML document. Even though the first two options have their use cases, most developers prefer external style sheets because they keep the styles separate from the HTML elements. This improves the readability and reusability of your code.

The idea behind CSS is that you can use a selector to target an HTML element in the DOM (Document Object Model) and then apply a variety of attributes to that element to change the way it is displayed on the page.

In this classroom, you'll see how adding CSS styles to the elements of your CatPhotoApp can change it from simple text to something more.

Basic CSS3 Exercises

Basic CSS3 Exercises

Goals

Description

Plan Zero

Plan 1337