Styling body tag css

Body tag style by using CSS in a webpage

We can use body tag to define style of our page by using different styles like background color , background image with fixed and repeat styles. This style saves our effort and code and we can manage easily the style of our website by editing the external cascade style sheet.

We will discuss various style properties and how they are to be used in external style sheet file.

Let us start with top margin of the page.

Now the page will be flushed with the top bar of the browser window as we have given top margin as 0

Background color of the page

We can specify the background color of the page and this color will be used throughout the page. So the unused space at left and right bottom of the page will be filled with background color specified in style sheet.

Using background image.

We can use any background image for the page by using style sheet for the body tag. We need to tell before that we are going to use image by saying url.

As you have seen in above demo page the background image is repeated many times. If we want to display the background image once only then we can add this code for not repeating the image at background

As we have seen above the background image is positioned at left top location of the page. We can position it based on our requirement. This line of code will position it at left side centre of the page

So we can place the background image at different places by using style of body tag. You have seen how to use no-repeat and display the iamge once only, now we will try not to fix the background image in all the direction and allow it to repeat in either x ( horizontal ) or y ( vertical ) direction. Here is the code

Fixing background image without scrolling along with the page

In the above example you can easily change the direction to vertical by changing the code to repeat-y . Now we will learn how to fix the background image in one location. Here as we scroll up or down the background image will be fixed at the centre. There will be no scrolling of the image. This technique is used for watermarked logo you want to be fixed through out the page at the background. Let us try this code here.

body < background-color: #cfcfcf; margin-top: 0.0em; background-image:url(plus_logo.jpg); background-repeat: no-repeat; background-position: center center; background-attachment: fixed;>

plus2net.com

Источник

This is a heading

This is a paragraph.

The element contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.

Note: There can only be one element in an HTML document.

Browser Support

Global Attributes

Event Attributes

More Examples

Example

Add a background image to a document (with CSS):

Hello world!

Visit W3Schools.com!

Example

Set the background color of a document (with CSS):

Hello world!

Visit W3Schools.com!

Example

Set the color of text in a document (with CSS):

Hello world!

This is some text.

Visit W3Schools.com!

Example

Set the color of unvisited links in a document (with CSS):

Example

Set the color of active links in a document (with CSS):

Example

Set the color of visited links in a document (with CSS):

Related Pages

Default CSS Settings

Most browsers will display the element with the following default values:

Example

body <
display: block;
margin: 8px;
>

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.

Источник

How To Style the Body of a Website With CSS

In this tutorial, you will style the body of a webpage with a CSS rule. You will use this rule to apply and style a background image and set the font family for the webpage. You will also create a style rule that changes the color of all hyperlinked text to a color that better matches the demonstration website’s color palette.

This exercise will be used to recreate the style of the demonstration site but you can apply and modify the same rules used here for other HTML/CSS website projects.

Prerequisites

To follow this tutorial, make sure you have set up the necessary files and folders as instructed in a previous tutorial in this series How To Set Up You CSS and HTML Practice Project.

For this tutorial, we suggest you use the background image from the demonstration site which you can download from this link. You may use another image as your background, but make that sure that the image is large enough to fill the screen.

Note: To download the background image of the demonstration site, visit this link and click CTRL + Left Click (on Macs) or Right Click (on Windows) on the image and select “Save Image As” and save it as background-image.jpeg to your «image’ folder.

Once you have selected an image, make sure it’s saved as “background-image.jpeg” in your images folder. You are now ready to proceed to the next step.

Adding a Background Image To Your Website With CSS

To declare style rules for the body of a webpage, you will need to create a CSS rule for the body tag selector. These rules will then be applied to all elements that are placed inside the opening and closing tags that you added to the index.html file in the earlier tutorial How To Set Up Your CSS and HTML Website Project.

To add a background image to your site, create a CSS rule using the tag selector. Erase everything in your styles.css file (if you have been following along with this series) and add the following ruleset:

/* General Website Style rules */ body  font-family: "Helvetica", Sans-Serif; background-image: url("../images/background-image.jpeg"); > 

Take note of the highlighted file path, which tells the browser where to locate the background image. If you have changed the name or location of the image then you will need to adjust the file path here accordingly.

Let’s pause briefly to understand each of the declarations in this ruleset:

• /* General Website Style rules */ is a CSS comment, which is not displayed by the browser. Like HTML comments, CSS comments are useful for explaining and organizing your code for future reference. Notice that CSS comments open and close with /* and */ tags instead of tags used for HTML comments.
• The font-family: «Helvetica», Sans-Serif; declaration sets the font family (Helvetica) and generic font family (Sans-Serif) for all the text on the webpage. (Note that you can specify different font families for text content on the same webpage by adding CSS rules later on). The generic font family is given as a backup in case the first font family isn’t available and the browser needs to pick a back up font. You can explore other fonts by replacing “Helvetica” with other font names, such as Times , Courier , or Palatino .
• The background-image: url(» ../images/background-image.jpeg ;») declaration tells the browser to add a background image to the webpage using the file found with the specified file path. Note that you have prepended ../ to the file path name to tell the browser to locate the images folder in the directory above the directory that contains the file you are working in ( styles.css ).

Save your styles.css file and load the index.html page in your browser. For instructions on loading an HTML file, please visit our tutorial step How To View An Offline HTML File In Your Browser.

You should receive a page with no content except for the background image:

If you don’t receive an image, check to make sure your file path is correct and that there are no errors in your index.html file and styles.css file.

Changing the Color of Hyperlinked Text

Next, we’ll add a CSS rule that changes the color of all hyperlinked text to a color that better matches the website color palette.

At the bottom of your styles.css file, add the following ruleset:

Conclusion

You should now have a webpage with a large background image. In addition, you declared a font family that will be applied when you begin to add text content. Using rulesets like these allow you to change the font and background image of a webpage by creating a ruleset for the body tag selector. Finally, you created a style rule that specifies the color of any hyperlinked text you add to the page.

In the next tutorial, you’ll recreate the header section of the demonstration website.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Tutorial Series: How To Build a Website With CSS

This tutorial is part of a series on creating and customizing this website with CSS, a stylesheet language used to control the presentation of websites. You may follow the entire series to recreate the demonstration website and gain familiarity with CSS or use the methods described here for other CSS website projects.

Before proceeding, we recommend that you have some knowledge of HTML, the standard markup language used to display documents in a web browser. If you don’t have familiarity with HTML, you can follow the first ten tutorials of our series How To Build a Website With HTML before starting this series.

Источник

HTML style Attribute

The Night Watch

Militia Company of District II under the Command of Captain Frans Banninck Cocq, also known as The Shooting Company of Frans Banning Cocq and Willem van Ruytenburch, but commonly referred to as The Night Watch (Dutch: De Nachtwacht), is a 1642 painting by Rembrandt van Rijn. It is in the collection of the Amsterdam Museum but is prominently displayed in the Rijksmuseum as the best-known painting in its collection. The Night Watch is one of the most famous Dutch Golden Age paintings. The painting is famous for three things: its colossal size, the dramatic use of light and shadow (tenebrism), and the perception of motion in what would have traditionally been a static military group portrait. The painting was completed in 1642, at the peak of the Dutch Golden Age.

 
The Night Watch
 
Militia Company of District II under the Command of Captain Frans Banninck Cocq, also known as The Shooting Company of Frans Banning Cocq and Willem van Ruytenburch, but commonly referred to as The Night Watch (Dutch: De Nachtwacht), is a 1642 painting by Rembrandt van Rijn. It is in the collection of the Amsterdam Museum but is prominently displayed in the Rijksmuseum as the best-known painting in its collection. The Night Watch is one of the most famous Dutch Golden Age paintings.
 
The painting is famous for three things: its colossal size, the dramatic use of light and shadow (tenebrism), and the perception of motion in what would have traditionally been a static military group portrait. The painting was completed in 1642, at the peak of the Dutch Golden Age.
 
 
 
Toggle style   

Code explanation

Browser support

Источник