How To Style HTML with CSS

67.7k views

Cascading Style Sheets (CSS) is the styling language of the web, and is used to design and control the visual representation of Hypertext Markup Language (HTML) on a web page. With CSS, you can manage everything from font to layout to animations on your web page. This series will lead the reader through CSS exercises that demonstrate the building blocks of the language and the fundamental design principles needed to make a user-friendly web site.

  • Cascading Style Sheets, better known as CSS, is the language for visual style and design on the web. With it, you can apply styles directly to Hypertext Markup Language (HTML) to lay out a webpage, adjust font and color, create complex animations, and much more. This tutorial will focus on applying CSS to HTML, cascade, and specificity, which are foundational aspects of CSS and will prepare you for using CSS effectively in your web projects.
  • Selecting the right element is the basis of writing CSS code as a web developer. Whenever you need to adjust how an element on a webpage looks, using selectors is key. This tutorial will build your skillset and help you develop visually rich websites by showing you how to select the right element in a given scenario. You will begin by using the type selector to select HTML elements to style. Then, you will combine selectors to identify and apply styles more precisely.
  • In this tutorial you will learn about web typography, the art of styling text. You will start the tutorial by writing an HTML structure with headings h1 to h6, then apply apply multiple text-related CSS properties, including font-family, font-size, and color. You will also load custom fonts from Google Fonts, a third-party font-hosting service.
  • Every HTML element is organized in a rendered HTML document as a rectangular shape, and the box model is the rule set a browser uses to determine an element’s size and how it interacts with other elements. In this tutorial you will use the margin, padding, border, width, and height properties, which are the primary properties the box model uses. You will also work with the box-sizing properties to understand how the box model can be changed.
  • There are a lot of size units to choose from when styling HTML with CSS. These units help determine how big or small text appears, how wide a container is, or how much space is between columns. In this tutorial you will learn about the the pixel (px), percent (%), em, and rem units. You will use these units in conjunction with several properties, including font-size, padding, border, margin, width, and max-width to learn the differences and strengths of each unit.
  • February 22, 2021
    Web typesetting, the art of laying out text, is about controlling the content to present the reader with a pleasant and efficient reading experience. This tutorial will teach you how to use the CSS properties that are most effective at laying out HTML text content. You will use properties like line-height, letter-spacing, and text-transform to optimize for reading and define a content hierarchy by giving headings prominence.
  • With CSS, there are four ways to generate colors, and each has its own unique strength. This tutorial will show you how to use color keywords, hexadecimal color values, the rgb() color format, and lastly the hsl() color format. You will use all four approaches with the same set of HTML to experience how each color format works with the same content. Throughout the tutorial, you will use the color, border, and background-color properties to apply these color formats to the HTML.
  • In this tutorial, you will use the :hover, :active, and :focus user actions and the :visited location pseudo-classes to create CSS styles. You will use and as the interactive elements in the tutorial. In addition to working with these four distinct states, you will use the transition property to animate the styles between these states of interactivity.
  • Writing CSS selectors most often involves setting a condition and locating the element in the HTML that fulfills that condition as true. To gain more control over the selected elements, you can create specific identifiers in the HTML and apply them in the CSS. In this tutorial, you will use the ID, class, and attribute selectors to scope styles to intentionally written HTML.
  • In this tutorial, you will run through an example of styling a element. The first half will focus on a common table layout that uses the browser’s default styles for table elements. Browser defaults are the starting point of working with CSS, so it is important to know what they are. The second half will refactor the table to use unique styles for each section. By the end of the tutorial you will have built a table that has distinct styles for x-axis and y-axis data.