Previous task
Introduction to HTML and CSS8/13
Back to the list of tasks
  1. 1. Let's Go!
  2. 2. CSS in action
  3. 3. Consolidation
  4. 4. HTML basics
  5. 5. Single HTML tags
  6. 6. Attributes of HTML tags
  7. 7. Looking for errors in HTML
  8. 8. Basics of CSS
  9. 9. Other ways to connect CSS
  10. 10. CSS selectors
  11. 11. CSS classes
  12. 12. CSS properties and values
  13. 13. Looking for errors in CSS
Nest task
  • Courses
  • Sign up
  • Log in

Loading...
It will be ready in a few seconds.

  • Theory
  • Theory

Basics of CSS

CSS is a language for controlling the appearance of an HTML document. With CSS you can set the display parameters of any tag: width and height, indents, font color and size, background and so on.

CSS is an acronym for "Cascading Style Sheets". CSS is usually referred to simply as "styles".

The easiest way to apply styles to a tag is to use the style attribute. For example:

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

In this example, the paragraph is set to a red font color. This way of setting styles is called "inline styles".

The syntax of such styles is very simple: property: value;. And there can be several properties.

Now let's make a mini outline of the course and mark in green the topics we have already practiced. We will use inline styles for styling.

  • index.html
HTML
<!DOCTYPE html> <html> <head> <title>Basics of CSS</title> </head> <body> <h1>Course outline</h1> <p style="color: green;">Paired tags.</p> <p>Single tags.</p> <p>Tag attributes.</p> <p>Inline styles.</p> <p>External Styles.</p> <p>Styling by class.</p> </body> </html>

The code has changed, click "Update" or enable autorun.

You have moved to another page

Click inside the mini-browser to highlight this window.

100%
GoalsCompleted
0

    Using the style attribute:

    1. Make the text color of the first three paragraphs color: green;,
    2. and the last three color: red;.

    © 2023-2024, codehero.pro