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.

Go to the first lesson

Upcoming Lessons

Change the Color of TextUse CSS Selectors to Style ElementsUse a CSS Class to Style an ElementStyle Multiple Elements with a CSS ClassChange the Font Size of an ElementSet the Font Family of an ElementImport a Google FontSpecify How Fonts Should DegradeSize Your ImagesAdd Borders Around Your ElementsAdd Rounded Corners with border-radiusMake Circular Images with a border-radiusGive a Background Color to a div ElementSet the id of an ElementUse an id Attribute to Style an ElementAdjust the Padding of an ElementAdjust the Margin of an ElementAdd a Negative Margin to an ElementAdd Different Padding to Each Side of an ElementAdd Different Margins to Each Side of an ElementUse Clockwise Notation to Specify the Padding of an ElementUse Clockwise Notation to Specify the Margin of an ElementUse Attribute Selectors to Style ElementsUnderstand Absolute versus Relative UnitsStyle the HTML Body ElementInherit Styles from the Body ElementPrioritize One Style Over AnotherOverride Styles in Subsequent CSSOverride Class Declarations by Styling ID AttributesOverride Class Declarations with Inline StylesOverride All Other Styles by using ImportantUse Hex Code for Specific ColorsUse Hex Code to Mix ColorsUse Abbreviated Hex CodeUse RGB values to Color ElementsUse RGB to Mix ColorsUse CSS Variables to change several elements at onceCreate a custom CSS VariableUse a custom CSS VariableAttach a Fallback value to a CSS VariableImprove Compatibility with Browser FallbacksCascading CSS variablesChange a variable for a specific areaUse a media query to change a variable