Intro to CSS Concepts

Learning objective: By the end of this lesson, learners will know how to use CSS to style HTML pages, keeping the website’s content separate from its design.

What is CSS?

CSS (Cascading Style Sheets) is a web technology that formats and styles HTML documents. It also provides stylistic behaviors using CSS animations. CSS controls a web page’s layout, colors, fonts, and other visual aspects.

CSS enables us to separate a document’s structure & content (HTML) from its presentation (CSS). This concept of separation of concerns is widespread throughout software development. It helps make programs more maintainable and can provide better code reuse.

Why use CSS?

There are many reasons to use CSS, including:

• Styling pages: This one is clear - CSS is how we apply style to web content. It allows brands to apply their signature style to a page. When at its best, it creates memorable user experiences.
• Consistency: CSS can create consistent styles across multiple pages on a single site. This creates a professional and polished look and feel.
• Accessibility: CSS can make web pages more accessible by presenting information in better ways. It can also draw attention to essential elements. Use caution though; not being thoughtful when applying styles can just as easily render a site inaccessible.
• Animations, transitions, and more: CSS offers more advanced features, which can elevate a site’s presentation when used sparingly.