Comment style in html

How to Style Comment Box Using CSS

While creating different types of forms you will need to give styling to them to have a more attractive impact on users who are going to fill the form. We will discuss the following aspects of styling forms:

How to Change the Background Color of Your Comment Box?

If you want to change the background color of your comment box, first define a class for the element for giving style to it, then use the CSS background-color property to define your preferred color. Also, set the CSS width, height, and padding properties to have a well-structured comment box.

Example of changing the background color of the comment box:

html> html> head> title>Title of the document title> style> .comment < width: 40%; height: 100px; padding: 10px; background-color: #d0e2bc; > style> head> body> form action="/form/submit" method="POST"> textarea class="comment">Type your comment here. textarea> br> input type="submit" name="submit" value="Send"> form> body> html>

Result

You can also change the text color and size for your comment box. For that purpose use the color and font CSS properties.

Example of changing the text color and size within the comment box:

html> html> head> title>Title of the document title> style> .comment < width: 40%; height: 100px; padding: 10px; background-color: #d0e2bc; font: 1.4em/1.6em cursive; color: #095484; > style> head> body> form action="/form/submit" method="POST"> textarea class="comment"> Type your comment here. textarea> br> input type="submit" name="submit" value="Send"> form> body> html>

How to Add a Background Image to Your Comment Box?

For setting a background image to your comment box you will need to add the background-image CSS property to the style of your element.

Example of adding a background image to the comment box:

html> html> head> title>Title of the document title> style> .comment < width: 40%; height: 100px; padding: 10px; background-image: url("/uploads/media/default/0001/01/a1d4caa225542c577689287a36f4209808b08c19.jpeg"); font: 1.4em/1.6em cursive; color: #095484; > style> head> body> form action="/form/submit" method="POST"> textarea class="comment"> Type your comment here. textarea> br> input type="submit" name="submit" value="Send"> form> body> html>

You can easily resize the comment box according to what picture size you want. For that purpose, just change the values of width and height properties and set them to be the same or smaller to the image size. Alternatively, you can use the background-size property to define the size of the background image.

How to Add Borders to Your Comment Box?

For adding border to your comment box you just need to use the CSS shorthand border property. Choose your preferred border-style from here.

You can also define the border-width, border-style and border-color properties separately for your comment box.

Example of adding borders to the comment box:

html> html> head> title>Title of the document title> style> .comment < width: 40%; height: 100px; padding: 10px; border: 3px dashed #8ebf42; background-color: #d0e2bc; font: 1.4em/1.6em cursive; color: #095484; > style> head> body> form action="/form/submit" method="POST"> textarea class="comment">Type your comment here. textarea> br> input type="submit" name="submit" value="Send"> form> body> html>

Use the border-left CSS property if you want to have only a left border for your comment box.

Use the border-right, border-top, border-bottom properties correspondingly for having a specific border side.

Example of adding a left border to the comment box:

html> html> head> title>Title of the document title> style> .comment < width: 40%; height: 100px; padding: 10px; border-left: 6px solid #095484; background-color: #d0e2bc; font: 1.4em/1.6em cursive; color: #095484; > style> head> body> form action="/form/submit" method="POST"> textarea class="comment"> Type your comment here. textarea> br> input type="submit" name="submit" value="Send"> form> body> html>

Источник

CSS Comments

CSS comments are not displayed in the browser, but they can help document your source code.

CSS Comments

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 element, and starts with /* and ends with */ :

Example

You can add comments wherever you want in the code:

Example

Comments can also span multiple lines:

Example

/* This is
a multi-line
comment */

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:

Example

My Heading

Hello World!

This paragraph is styled with CSS.

CSS comments are not shown in the output.

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Comments

A CSS comment is used to add explanatory notes to the code or to prevent the browser from interpreting specific parts of the style sheet. By design, comments have no effect on the layout of a document.

Syntax

Comments can be placed wherever white space is allowed within a style sheet. They can be used on a single line, or traverse multiple lines.

Examples

/* A one-line comment */ /* A comment which stretches over several lines */ /* The comment below is used to disable specific styling */ /* span < color: blue; font-size: 1.5em; >*/ 

Notes

Specifications

See also

• CSS key concepts:
  • CSS syntax
  • At-rules
  • Specificity
  • Inheritance
  • Box model
  • Layout modes
  • Visual formatting models
  • Margin collapsing
  • Values
    • Initial values
    • Computed values
    • Used values
    • Actual values

    Found a content problem with this page?

    This page was last modified on Jul 17, 2023 by MDN contributors.

    Your blueprint for a better internet.

    MDN

    Support

    Our communities

    Developers

    Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
    Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

    Источник

    CSS Comment Example – How To Comment Out CSS

    

    Comments are used in CSS to explain a block of code or to make temporary changes during development. The commented code doesn’t execute.

    Both single and multi-line comments in CSS begin with /* and end with */ , and you can add as many comments to your stylesheet as you like. For example:

    /* This is a single line comment*/ .group:after < content: ""; display: table; clear: both; >/* This is a multi-line comment */

    You can also make your comments more readable by stylizing them:

    /* *** * SECTION FOR H2 STYLE *** * A paragraph with information * that would be useful for someone * who didn't write the code. * The asterisks around the paragraph * help make it more readable. *** */

    Organizing CSS with comments

    In larger projects, CSS files can quickly grow in size and become difficult to maintain. It can be helpful to organize your CSS into distinct sections with a table of contents to make it easier to find certain rules in the future:

    /* * CSS TABLE OF CONTENTS * * 1.0 - Reset * 2.0 - Fonts * 3.0 - Globals * 4.0 - Color Palette * 5.0 - Header * 6.0 - Body * 6.1 - Sliders * 6.2 - Imagery * 7.0 - Footer */ /*** 1.0 - Reset ***/ /*** 2.0 - Fonts ***/ /*** 3.0 - Globals ***/ /*** 4.0 - Color Palette ***/ /*** 5.0 - Header ***/ /*** 6.0 - Body ***/ h2 < font-size: 1.2em; font-family: "Ubuntu", serif; text-transform: uppercase; >/*** 5.1 - Sliders ***/ /*** 5.2 - Imagery ***/ /*** 7.0 - Footer ***/

    A little bit more about CSS: CSS Syntax and Selectors

    When we talk about the syntax of CSS, we’re talking about how things are laid out. There are rules about what goes where, both so you can write CSS consistently and a program (like a browser) can interpret it and apply it to the page correctly.

    There are two main ways to write CSS.

    Inline CSS

    Specifics on CSS Specificity: CSS Tricks

    Inline CSS applies styling to a single element and its children, until another style overriding the first is encountered.

    To apply inline CSS, add the “style” attribute to an HTML element that you’d like to modify. Inside quotes, include a semicolon-delimited list of key/value pairs (each in turn separated by a colon) indicating styles to set.

    Here’s an example of inline CSS. The words “One” and “Two” will have a background color of yellow and text color of red. The word “Three” has a new style that overrides the first, and will have a background color of green and text color of cyan. In the example, we’re applying styles to tags, but you can apply a style to any HTML element.

    Internal CSS

    While writing an inline style is a quick way to change a single element, there’s a more efficient way to apply the same style to many elements of the page at once.

    The internal CSS has its styles specified in the tag, and it is embedded in the tag.

    Here’s an example that has a similar effect as the “inline” example above, except the CSS has been extracted to its own area. The words “One” and “Two” will match the div selector and be red text on a yellow background. The words “Three” and “Four” will match the div selector too, but they also match the .nested_div selector which applies to any HTML element that references that class. This more specific selector overrides the first, and they end up appearing as cyan text on a green background.

     div < color: red; background: yellow; >.nested_div 
    One 
    Two
     
    Three
     
    Four
     

    The selectors shown above are extremely simple, but they can get quite complex. For example, it’s possible to apply styles only to nested elements; that is, an element that’s a child of another element.

    Here’s an example where we’re specifying a style that should only be applied to div elements that are a direct child of other div elements. The result is that “Two” and “Three” will appear as red text on a yellow background, but “One” and “Four” will remain unaffected (and most likely black text on a white background).

     div > div 
    One 
    Two
     
    Three
     
     
    Four
     

    External CSS

    All the styling has its own document which is linked in the tag. The extension of the linked file is .css

    Источник