How to add CSS styles to HTML-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

How to add CSS styles to HTML

藏色散人

Jan 20, 2021 am 09:14 AM

csshtml

How to add CSS styles to HTML: 1. Add CSS styles inline; 2. Put the CSS code in the head part of a specific page through inline; 3. Use link externally. tag, just link the external css file into HTML.

How to add CSS styles to HTML

The operating environment of this tutorial: Windows 10 system, HTML5&&CSS3 version, DELL G3 computer.

Recommended: "HTML Video Tutorial"

When learning the front-end, we should know that css adds various styles to html tags to tell the browser, so How to display the content inside these tags. Since css is used to add various styles to HTML, how to add css styles to HTML?

htmlThere are three ways to add css styles, namely inline (using the style attribute, used within a specific HTML tag), and inline (the style tag places the css code in the head part of a specific page) , External linking (use the link tag to link external css files into HTML).

1. Inline style

Use the style attribute to set CSS styles within specific HTML tags.

It is recommended not to use inline CSS because each HTML tag needs to be styled separately. If you only use inline CSS, it may become very difficult to manage the website. However, it can be useful in certain situations. For example, in situations where you don't have access to CSS files or only need to apply styles to a single element. An example of an HTML page with inline CSS is as follows:

<!DOCTYPE html>
<html>
  <body style="background-color:black;">
    <h1 id="Hostinger-nbsp-Tutorials">Hostinger Tutorials</h1>
    <p style="color:white;">Something usefull here.</p>
   </body>
</html>

2. Inline

Inline css style is to place css code on a specific page in the

section. Inline CSS needs to be placed between the tags.

Classes and IDs can be used to reference CSS code, but they are only active on that specific page. CSS styles embedded in this way are downloaded every time the page loads, which can improve loading speeds. Using inline style sheets is useful in some situations, such as sending someone a page template. It's much easier to see a preview since everything is in one page.

An example of an internal style sheet:

<head>
  <style type="text/css">
    p {color:white; font-size: 10px;}
    .center {display: block; margin: 0 auto;}
    #button-go, #button-back {border: solid 1px black;}
  </style>
</head>

3. External link

The external link is to use the link tag element to reference the external CSS file (.css file) to In HTML pages, references need to be placed in the

section of the page.

This is the most convenient way to add CSS to html pages. This way, any changes you make to the external CSS files will be reflected on your website.

An example of an external style sheet:

<head>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>

And style.css contains all style rules. For example:

.xleftcol {
   float: left;
   width: 33%;
   background:#809900;
}
.xmiddlecol {
   float: left;
   width: 34%;
   background:#eff2df;
}

Most websites today use external style sheets, which are styles that are written in separate documents and then attached to various web documents. External style sheets will affect any files they are connected to, meaning if you have a 20 page website and every page uses the same style sheet, when changes need to be made you can simply edit the style sheet to complete those pages. Makes long-term site management easier.

The above is the detailed content of How to add CSS styles to HTML. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

The Versatility of HTML: Applications and Use CasesApr 30, 2025 am 12:03 AM

HTML is not only the skeleton of web pages, but is more widely used in many fields: 1. In web page development, HTML defines the page structure and combines CSS and JavaScript to achieve rich interfaces. 2. In mobile application development, HTML5 supports offline storage and geolocation functions. 3. In emails and newsletters, HTML improves the format and multimedia effects of emails. 4. In game development, HTML5's Canvas API is used to create 2D and 3D games.

What is the root tag in an HTML document?Apr 29, 2025 am 12:10 AM

TheroottaginanHTMLdocumentis.Itservesasthetop-levelelementthatencapsulatesallothercontent,ensuringproperdocumentstructureandbrowserparsing.

Are the HTML tags and elements the same thing?Apr 28, 2025 pm 05:44 PM

The article explains that HTML tags are syntax markers used to define elements, while elements are complete units including tags and content. They work together to structure webpages.Character count: 159

What is the significance of <head> and <body> tag in HTML?Apr 28, 2025 pm 05:43 PM

The article discusses the roles of <head> and <body> tags in HTML, their impact on user experience, and SEO implications. Proper structuring enhances website functionality and search engine optimization.

What is the difference between <strong>, <b> tags and <em>, <i> tags?Apr 28, 2025 pm 05:42 PM

The article discusses the differences between HTML tags , , , and , focusing on their semantic vs. presentational uses and their impact on SEO and accessibility.

Please explain how to indicate the character set being used by a document in HTML?Apr 28, 2025 pm 05:41 PM

Article discusses specifying character encoding in HTML, focusing on UTF-8. Main issue: ensuring correct display of text, preventing garbled characters, and enhancing SEO and accessibility.

What are the various formatting tags in HTML?Apr 28, 2025 pm 05:39 PM

The article discusses various HTML formatting tags used for structuring and styling web content, emphasizing their effects on text appearance and the importance of semantic tags for accessibility and SEO.

What is the difference between the 'id' attribute and the 'class' attribute of HTML elements?Apr 28, 2025 pm 05:39 PM

The article discusses the differences between HTML's 'id' and 'class' attributes, focusing on their uniqueness, purpose, CSS syntax, and specificity. It explains how their use impacts webpage styling and functionality, and provides best practices for

See all articles