README.md

Basic CSS

Introduction to Basic CSS

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 section, you'll see how adding CSS styles to the elements of your CatPhotoApp can change it from simple text to something more.

• 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
• Cascading CSS variables
• Change a variable for a specific area
• Use a media query to change a variable

---

Credits to FreeCodeCamp