Jan 23, 2019

How to Use CSS in HTML

Hypertext Markup Language (HTML) and Cascading Style Sheets (CSS) are essential for creating Web pages. Whether you're considering pursuing a career as a Front-End Web Developer, a Mobile Web Specialist, or a programmer, it's important to understand these core technologies and how to use CSS in HTML for efficiently creating and modifying attractive Web pages.

Understanding HTML and CSS

HTML is the programming language that defines the structure of a Web page, making it possible to publish text and images. CSS is the programming language for defining the appearance of a Web page such as the layout, font types, and background color. CSS and HTML are completely separate, so you have the option of creating multiple pages and then controlling the appearance of all of those pages using a single CSS file. This separation of site structure and presentation makes maintenance and modifications simpler and ensures consistency of design across a brand. CSS also reduces the load time on pages and makes your HTML code cleaner and easier to read.

Adding CSS in HTML

There are three ways to add CSS to HTML:

  • Inline: It's possible to add CSS to specific HTML elements by using the style attribute. For example, inline CSS lets you set the color of a single line of text on the page. Using CSS in this manner may be useful for precise modifications to individual components, but if used extensively, altering a page layout becomes a laborious process.
  • Internal: Adding internal CSS involves creating a style element within the head section of the HTML page. You only need to define the properties of each part of the page once within that element. For example, defining the size and color of headers in the head section sets all of the headers on the page.
  • External: Using external CSS involves creating a separate CSS file, which is a plain text file saved with the .css extension. To access the external file, you link to it in the head section of your HTML page. The benefit of an external file is that it works with multiple pages, and even multiple sites, simply by adding a link to each Web page that needs to access it. If you want to make a modification, you only make a single change in the CSS file, which immediately applies the change across all of the linked pages.

Expanding Your Knowledge

Now you know the basics of how to use CSS in HTML; but this is just the beginning. A solid understanding of HTML and CSS is essential for creating websites, and some formal training with certification at the end is a great way to ensure you have the fundamental skills to pursue a career. Browse the Udacity Catalog to learn more about a wide range of software development and coding courses that provide the programming know-how you need.