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.

This doc is part of
10 videos|41 docs|23 tests
Join course for free

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>

Download the notes
CSS Comments & Colors
Download as PDF
Download as PDF

CSS Border Color


You can set the color of borders:

CSS Comments & Colors | CSS for Beginners - Class 6

Take a Practice Test
Test yourself on topics from Class 6 exam
Practice Now
Practice Now

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
Are you preparing for Class 6 Exam? Then you should check out the best video lectures, notes, free mock test series, crash course and much more provided by EduRev. You also get your detailed analysis and report cards along with 24x7 doubt solving for you to excel in Class 6 exam. So join EduRev now and revolutionise the way you learn!
Sign up for Free Download App for Free
10 videos|41 docs|23 tests

Up next

10 videos|41 docs|23 tests
Download as PDF

Up next

Explore Courses for Class 6 exam
Related Searches

Viva Questions

,

Objective type Questions

,

ppt

,

CSS Comments & Colors | CSS for Beginners - Class 6

,

Exam

,

CSS Comments & Colors | CSS for Beginners - Class 6

,

Extra Questions

,

Previous Year Questions with Solutions

,

Important questions

,

shortcuts and tricks

,

past year papers

,

video lectures

,

Sample Paper

,

mock tests for examination

,

Summary

,

Free

,

practice quizzes

,

MCQs

,

pdf

,

study material

,

CSS Comments & Colors | CSS for Beginners - Class 6

,

Semester Notes

;