What is the difference between inline, internal, and external CSS?

Inline: styles directly on an element via the style attribute. Internal: styles inside a tag in the . External: styles in a separate .css file linked via .

What is a pseudo-class in CSS, and give an example.

A keyword added to a selector to style an element in a specific state, e.g. :hover (mouse over) or :focus (input focused).

What does the z-index CSS property control?

The stacking order of overlapping positioned elements — higher values appear in front of lower values.

IT and Tech Certifications 20 flashcards ~10 min

Web Development Fundamentals (HTML & CSS)

Study this deck View all cards

About this deck

HTML and CSS are the foundation of every website, and this deck of 20 flashcards covers the essential building blocks for beginners. You'll start with HTML document structure and semantic elements, then move into CSS fundamentals — selectors, specificity, and the box model that governs how every element's spacing works. The deck covers modern layout tools including flexbox and grid, responsive design principles and media queries, and positioning concepts like relative versus absolute. It finishes with practical details that matter for accessibility and SEO, including alt text, the viewport meta tag, and pseudo-classes like :hover. Ideal for anyone starting a web development course or building their first website, this deck focuses on the terminology and concepts that come up constantly in tutorials, documentation and coding interviews, giving you a solid foundation before moving on to JavaScript and frameworks.

Ready to test yourself?

Flip through all 20 cards in interactive study mode.

Launch study mode

All flashcards

Click any question to reveal the answer.

HyperText Markup Language — the standard language for structuring content on the web.

Cascading Style Sheets — used to control the visual presentation (layout, colours, fonts) of HTML content.

, then containing (metadata, title) and (visible page content).

An element that clearly describes its meaning/purpose to both browsers and developers, e.g.

is a block-level element (starts on a new line, takes full width). is an inline element (flows within text, only as wide as its content).

A pattern used to target and select specific HTML elements to apply styles to, e.g. by tag, class (.classname), or ID (#idname).

A class (.name) can be applied to multiple elements and reused. An ID (#name) must be unique to a single element per page.

The set of rules determining which CSS style takes precedence when multiple rules target the same element; IDs > classes > tag selectors.

Every element is a box composed of, from inside out: content, padding, border, and margin.

padding is space inside an element's border, between the border and its content. margin is space outside the border, separating the element from others.

Turns an element into a flex container, enabling powerful one-dimensional alignment and distribution of its child elements.

Turns an element into a grid container, enabling two-dimensional layout control over rows and columns of child elements.

A design approach ensuring a website displays and functions well across different screen sizes and devices.

A CSS rule that applies styles conditionally based on device characteristics, e.g. @media (max-width: 768px) { ... } for smaller screens.

relative positions an element relative to its normal position. absolute positions it relative to its nearest positioned ancestor, removing it from normal document flow.

Provides alternative text describing the image, used by screen readers and displayed if the image fails to load — important for accessibility and SEO.

controls how a page scales on mobile devices, essential for responsive design.

Inline: styles directly on an element via the style attribute. Internal: styles inside a