Home > Article > Web Front-end > How to insert css style into html
How to insert css style into html
- 青灯夜游Original
- 2021-09-14 16:53:3414745browse
How to insert css style in html: 1. Use the style attribute to insert CSS code in a specific HTML tag; 2. Put the CSS code in the style tag pair in the head part of the document; 3. Put the CSS code in Into the external CSS file, use the link tag to introduce it into the html document.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
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:
<body style="background-color:black;">
<h1 style="color:white;padding:30px;">Hostinger Tutorials</h1>
<p style="color:white;">Something usefull here.</p>
</body>2. Inline
Inline css style is to place css code on a specific page in the 93f0f5c25f18dab9d176bd4f6de5d30e section. Inline CSS needs to be placed between the c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927 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.
<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 linkage
External linkage is to use the link tag element to refer to the external CSS file (.css file) into the HTML page. The reference needs to be placed In the 93f0f5c25f18dab9d176bd4f6de5d30e section of the page.
<head> <link rel="stylesheet" type="text/css" href="style.css" /> </head>
Explanation of each attribute:
The href attribute sets the address of the external style sheet file, which can be a relative address or an absolute address.
The rel attribute defines the associated document, which here indicates that the associated document is a style sheet.
The type attribute defines the type of imported file. Like the style element, text/css indicates a CSS text file.
Generally when defining the 2cdf5bf648cf2f33323966d7f58a7f3f tag, three basic attributes should be defined, among which href is a must-set attribute.
You can also add the title attribute in the link element to set the title of the optional style sheet. That is, when a web document imports multiple style sheets, you can select the style sheet file to be applied through the title attribute value.
Tip: In the Firefox browser, you can select the "View --> Page Style" option in the menu, and then the title attribute value will be displayed in the submenu. Just select a different title attribute value. Selectively apply required style sheet files. IE browser does not support this feature.
In addition, the title attribute is related to the rel attribute. According to the W3C organization's plan, future web documents will use multiple 2cdf5bf648cf2f33323966d7f58a7f3f elements to import different external files, such as style sheet files, script files, and themes. files, and can even include other customized supplementary files. After importing so many files of different types and names, you can use the title attribute to select. At this time, the role of the rel attribute becomes apparent. It can specify the imported file type to be applied when the web page file is initially displayed. Currently, it can only be associated with CSS. Style sheet type.
External styles are the best solution for CSS applications. A style sheet file can be referenced by multiple web pages. At the same time, a web page file can import multiple style sheets by repeatedly using the link element to import different style sheets. document.
Related recommendations: "css video tutorial"
The above is the detailed content of How to insert css style into html. For more information, please follow other related articles on the PHP Chinese website!