Basic CSS Syntax Flashcards

Use your keyboard's left and right arrows to navigate between flashcards. Hit enter to toggle the flashcard explanation. New to flashcards? Read my blog post on How to Use Flashcards for Effective Learning.

What do you know about...

Font-weight Property

The font-weight property is used to define the weight of text, with values like bold, normal, and more. In the example code, the p element is bold.

<p style="font-weight: bold;">This text is bold.</p>

What do you know about...

Display Property

The display property is used to define how an HTML element is displayed, with values like none, block, inline, and more. In the example code, the p element has a display value of none, which means it is hidden from view.

<p style="display: none;">This text is hidden.</p>

What do you know about...

Height Property

The height property is used to define the height of an HTML element, with values like 200px, 50%, auto, and more. In the example code, the div element has a height of 200 pixels.

<div style="height: 200px;">
  <p>This box has a height of 200 pixels.</p>
</div>

What do you know about...

Universal Selector

The universal selector is used to select all HTML elements, using the * symbol. In the example code, all HTML elements have their color set to blue using the universal selector in the stylesheet.

<style>
   * {
   color: blue;
   }
</style>

What do you know about...

Width Property

The width property is used to define the width of an HTML element, with values like 50%, 100px, auto, and more. In the example code, the div element has a width of 50% of its parent element.

<div style="width: 50%;">
  <p>This box has a width of 50% of its parent element.</p>
</div>

What do you know about...

Inline CSS

Inline CSS is used to add CSS styles directly to an HTML element, using the style attribute. In the example code, the p element has its color set to blue using inline CSS.

<p style="color: blue;">This text is blue.</p>

What do you know about...

Line-height Property

The line-height property is used to define the height of a line of text, as a multiple of the font size. In the example code, the p element has a line height of 1.5 times the font size.

<p style="line-height: 1.5;">This text has a line height of 1.5.</p>

What do you know about...

Border Property

The border property is used to define the border of an HTML element, with values like solid, dashed, dotted, and more. In the example code, the div element has a 1 pixel solid black border.

<div style="border: 1px solid black;">
  <p>This box has a solid black border.</p>
</div>

What do you know about...

Descendant Selector

The descendant selector is used to select HTML elements that are descendants of another HTML element, using a space between the two selectors. In the example code, the p element inside the div element has its color set to blue using the descendant selector in the stylesheet.

<div>
   <p>This paragraph is a descendant of the div element.</p>
</div>

<style>
   div p {
   color: blue;
   }
</style>

What do you know about...

Margin Property

The margin property is used to define the margin of an HTML element, which is the space outside the border. In the example code, the div element has a margin of 10 pixels.

<div style="margin: 10px;">
  <p>This box has a margin of 10 pixels.</p>
</div>

What do you know about...

Internal CSS

Internal CSS is used to add CSS styles to an HTML document using a <style> tag in the <head> section. In the example code, the p element has its color set to blue using internal CSS.

<head>
   <style>
      p {
      color: blue;
      }
   </style>
</head>
<body>
   <p>This text is blue.</p>
</body>

What do you know about...

External CSS

External CSS is used to add CSS styles to an HTML document using an external stylesheet file. In the example code, the HTML document links to an external stylesheet file called "style.css", which contains styles for the p element.

<head>
   <link rel="stylesheet" href="style.css">
</head>
<body>
   <p>This text has styles from an external stylesheet file.</p>
</body>

What do you know about...

Box Model

The box model is used to define the layout and sizing of HTML elements. In the example code, the div element has a width of 200 pixels, a height of 100 pixels, 10 pixels of padding, a 1 pixel solid black border, and 10 pixels of margin.

<div style="width: 200px; height: 100px; padding: 10px; border: 1px solid black; margin: 10px;">
   <p>This box has padding, a border, and margin.</p>
</div>

What do you know about...

Child Selector

The child selector is used to select HTML elements that are direct children of another HTML element using the > symbol between the two selectors. In the example code, only the p element that is a direct child of the div element has its color set to blue using the child selector in the stylesheet.

<div>
   <p>This paragraph is a direct child of the div element.</p>
   <span>This span is also a direct child of the div element.</span>
</div>

<style>
   div > p {
   color: blue;
   }
</style>

What do you know about...

Text-align Property

The text-align property is used to define the horizontal alignment of text, with values like left, right, center, and more. In the example code, the p element is centered.

<p style="text-align: center;">This text is centered.</p>

What do you know about...

Font-family Property

The font-family property is used to define the font family of text, with values like Arial, Times New Roman, Helvetica, and more. In the example code, the p element is in the Arial font.

<p style="font-family: Arial, sans-serif;">This text is in the Arial font.</p>

What do you know about...

Class Selector

The class selector is used to select HTML elements with a specific class attribute, using the . symbol followed by the class value. In the example code, the p element with the class attribute "my-class" has its color set to blue using the class selector in the stylesheet.

<p class="my-class">This paragraph has a class attribute.</p>

<style>
   .my-class {
   color: blue;
   }
</style>

What do you know about...

Position Property

The position property is used to define the positioning of an HTML element, with values like static, relative, absolute, and more. In the example code, the div element has a position value of relative, and its child p element is positioned 50 pixels from the top and left of the parent element.

<div style="position: relative; top: 50px; left: 50px;">
  <p>This box is positioned relative to its parent element.</p>
</div>

What do you know about...

Attribute Selector

The attribute selector is used to select HTML elements with a specific attribute or attribute value, using square brackets around the attribute name and value. In the example code, the a element with an href attribute of "https://example.com" has its color set to blue using the attribute selector in the stylesheet.

<a href="https://example.com">This link goes to Example.com.</a>
<style>
   [href="https://example.com"] {
   color: blue;
   }
</style>

What do you know about...

Padding Property

The padding property is used to define the padding of an HTML element, which is the space inside the border. In the example code, the div element has a padding of 10 pixels.

<div style="padding: 10px;">
  <p>This box has a padding of 10 pixels.</p>
</div>

What do you know about...

Color Property

The color property is used to define the color of text, with values like red, green, blue, and more. In the example code, the p element has red text.

<p style="color: red;">This text is red.</p>

What do you know about...

Font-size Property

The font-size property is used to define the size of text, in pixels or other units. In the example code, the p element has a font size of 24 pixels.

<p style="font-size: 24px;">This text has a font size of 24 pixels.</p>

What do you know about...

Background-color Property

The background-color property is used to define the background color of an HTML element, with values like blue, yellow, white, and more. In the example code, the div element has a blue background color.

<div style="background-color: blue;">
  <p>This box has a blue background color.</p>
</div>

What do you know about...

Text-decoration Property

The text-decoration property is used to define the decoration of text, with values like underline, overline, line-through, and more. In the example code, the p element is underlined.

<p style="text-decoration: underline;">This text is underlined.</p>

What do you know about...

ID Selector

The ID selector is used to select an HTML element with a specific ID attribute, using the # symbol followed by the ID value. In the example code, the p element with the ID attribute "my-paragraph" has its color set to blue using the ID selector in the stylesheet.

<p id="my-paragraph">This paragraph has an ID attribute.</p>

<style>
   #my-paragraph {
   color: blue;
   }
</style>

More Flashcards

More Frontend Developer Resources

Web Development Courses

Master the art of crafting beautiful and functional websites with my comprehensive frontend web development courses.

Build professional projects for your portfolio
Master CSS, HTML and JavaScript
Learn to use popular frontend frameworks and libraries such as Vue.js, React.js, Bootstrap and Tailwind CSS

View Courses

Web Development Quizzes

Test and enhance your frontend web development skills with interactive quizzes, designed to sharpen your knowledge and boost your confidence.

Flexible study option that you can access anytime
Helps you identify areas that need improvement.
Topics such as HTML, CSS, JavaScript, responsive design, accessibility, and more

View Quizzes

Frontend Developer Challenges

Challenge yourself to master frontend web development skills with practical coding challenges, designed to enhance your problem-solving abilities.

Suitable for frontend web developers of all levels
Encourages you to think outside the box
A great way to practice and apply your knowledge in a real-world context

View Challenges

Free Website Templates

Jumpstart your frontend web development projects with professionally designed templates, perfect for achieving a modern website in no time.

Saves you time and effort by providing ready-to-use templates
Strong foundation for building your own custom websites
Perfect for learners who want to experiment with different designs and layouts

View Free Templates

Frontend HTML Snippets

Elevate your frontend web development projects expertly crafted code snippets, designed to save you time and enhance your workflow.

Saves you time and effort by providing ready-to-use code
Wide range of components, such as navbar, carousel, modal, and more
Library of HTML code snippets to streamline your frontend web development workflow

View Snippets

Frontend Tech Terminology

Master the essential tech terms of frontend web development and gain the confidence to communicate effectively with my comprehensive resource.

Suitable for learners of all levels
Comprehensive glossary of frontend web development terms
Covers key concepts and terminology related to HTML, CSS, JavaScript, responsive design, accessibility, and more

View Terms

Bootstrap Utility API Guide

Unlock the full potential of Bootstrap with my comprehensive guide to its utility API, and elevate your frontend web development projects.

A comprehensive guide to Bootstrap's utility API
Provides practical examples and code snippets
A valuable resource for building responsive and accessible websites with Bootstrap

View Bootstrap Utility API