Site Building
Topic

HTML and CSS

Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications, and Cascading Style Sheets (CSS) is a style sheet language used to affect the presentation of a document written in a markup language. Together they are the foundational languages for how browsers display web pages. Most people who build websites through code, or with a content management system like Drupal, should be familiar with the basics of HTML and CSS since these are the main languages of web sites.

Example tasks

  • Create a basic web page with HTML
  • Style HTML with CSS to change its default appearance

Confidence

This is a non-Drupal topic and is the foundation of web development, so the resources available are widespread and generally kept up-to-date.

Drupalize.Me resources

Theming

CSS in Drupal

Topic
Theming, Module Development
Drupal 8, 9, 10, and 11
More information

Cascading Style Sheets (CSS) files are added as an asset library through a theme’s libraries configuration file. HTML attributes, including classes and IDs, are commonly added in template files with Twig.

Guides

Not sure where to start? Our guides provide useful learning tracks for all skill levels.

Navigate guides

External resources

  • HTML Spec
    • The Living Standard for HTML. All other resources will be using this as a reference, so it's a great idea to refer to it often and use other resources for further explanations, examples, and ideas on how to go about learning HTML.
  • Learn HTML & CSS (codecademy.com)
    • A great way to learn the basics using their built-in code editor so you can practice directly in the site.
  • HTMLDog (htmldog.com)
    • This website is focused on HTML, CSS, and has a bonus of JavaScript. In addition to tutorials, they have a wealth of examples and resources.
  • Learn Sass (codecademy.com)
    • Another Codecademy course that teaches what a CSS Prepocessor is and how to use one of the most popular ones, Sass.
  • Front-end web developer guide (developer.mozilla.com)
    • This is MDN's learning pathway for front-end developers.
  • HTML: HyperText Markup Language (developer.mozilla.org)
    • This MDN page lists a number of different resources for learning various aspects of HTML.
  • CSS: Cascading Style Sheets (developer.mozilla.org)
    • A landing page for various MDN resources for learning CSS.
  • Structuring the web with HTML (developer.mozilla.org)
    • MDN's guide for newcomers to HTML.
  • Learn to style HTML using CSS (developer.mozilla.org)
    • MDN's guide for newcomers to CSS.
  • Web Platform Docs (webplatform.github.io)
    • This has great documentation on the HTML and CSS specifications, how different browsers meet those specifications today, and what the future looks like. It's also a collaboration between some of the biggest names in technology, including Facebook, Google, Microsoft, Apple, and Mozilla.
  • Front-End Developer Handbook 2019 (frontendmasters.com)
    • This is a great overall resource for all things on the front-end, not just HTML and CSS. If you want to really learn about the wide world of front-end, this is a great place to explore.