Class 6 Exam  >  Class 6 Notes  >  CSS for Beginners  >  CSS Comments & Colors

CSS Comments & Colors | CSS for Beginners - Class 6 PDF Download

CSS Comments

  • CSS comments are not displayed in the browser, but they can help document your source code.
  • Comments are used to explain the code, and may help when you edit the source code at a later date.
  • Comments are ignored by browsers.

A CSS comment is placed inside the <style> element, and starts with /* and ends with */:
Example

/* This is a single-line comment */

p {

  color: red;

}

  • You can add comments wherever you want in the code:

Example

p {

  color: red;  /* Set text color to red */

}

  • Comments can also span multiple lines: 

Example

/* This is

a multi-line

comment */

p {

  color: red;

}

HTML and CSS Comments

  • From the HTML tutorial, you learned that you can add comments to your HTML source by using the <!--...--> syntax.

In the following example, we use a combination of HTML and CSS comments:

<!DOCTYPE html>

<html>

<head>

<style>

p {

  color: red; /* Set text color to red */

}

</style>

</head>

<body>

<h2>My Heading</h2>

<!-- These paragraphs will be red -->

<p>Hello World!</p>

<p>This paragraph is styled with CSS.</p>

<p>CSS comments are not shown in the output.</p>

</body>

</html>

CSS Colors


Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.

CSS Color Names
In CSS, a color can be specified by using a predefined color name:
CSS Comments & Colors | CSS for Beginners - Class 6

CSS/HTML support 140 standard color names.

CSS Background Color


You can set the background color for HTML elements:
CSS Comments & Colors | CSS for Beginners - Class 6CSS Comments & Colors | CSS for Beginners - Class 6

Example

<h1 style="background-color:DodgerBlue;">Hello World</h1>

<p style="background-color:Tomato;">Lorem ipsum...</p>

CSS Text Color


You can set the color of text:

CSS Comments & Colors | CSS for Beginners - Class 6

Example

<h1 style="color:Tomato;">Hello World</h1>

<p style="color:DodgerBlue;">Lorem ipsum...</p>

<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

CSS Border Color


You can set the color of borders:

CSS Comments & Colors | CSS for Beginners - Class 6

CSS Color Values


In CSS, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values:
Same as color name "Tomato":
CSS Comments & Colors | CSS for Beginners - Class 6

Same as color name "Tomato", but 50% transparent:
CSS Comments & Colors | CSS for Beginners - Class 6

Example

<h1 style="background-color:rgb(255, 99, 71);">...</h1>

<h1 style="background-color:#ff6347;">...</h1>

<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>

<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

The document CSS Comments & Colors | CSS for Beginners - Class 6 is a part of the Class 6 Course CSS for Beginners.
All you need of Class 6 at this link: Class 6
10 videos|41 docs|23 tests

Top Courses for Class 6

10 videos|41 docs|23 tests
Download as PDF
Explore Courses for Class 6 exam

Top Courses for Class 6

Signup for Free!
Signup to see your scores go up within 7 days! Learn & Practice with 1000+ FREE Notes, Videos & Tests.
10M+ students study on EduRev
Related Searches

CSS Comments & Colors | CSS for Beginners - Class 6

,

ppt

,

Extra Questions

,

practice quizzes

,

mock tests for examination

,

Important questions

,

past year papers

,

CSS Comments & Colors | CSS for Beginners - Class 6

,

Objective type Questions

,

shortcuts and tricks

,

study material

,

Exam

,

Semester Notes

,

video lectures

,

Free

,

pdf

,

Summary

,

Previous Year Questions with Solutions

,

Viva Questions

,

MCQs

,

Sample Paper

,

CSS Comments & Colors | CSS for Beginners - Class 6

;