There are three main ways to embed CSS styles into html: 1. Set the tag's attribute, called inline style; 2. Use the tag in the <head> tag of HTML, called embedded style; </p> <p>3. Create and Linking external CSS files, called external style sheets. </p> <p>Basic style sheets usually modify the appearance of HTML tags such as <body> and <p>. When using CSS files or stylesheets in header files, we can also define style classes and apply them to any element using the <code>class="?"</code> attribute, but this is beyond the scope of this simple guide. </p> <p><strong>Inline style</strong></p> <p> Features: </p> <p>1) Inline style is placed in the HTML element in the code. </p> <p>2) When using inline styles, the styles will only affect the elements you select. </p> <p>3), inline styles have no selectors</p> <p>Note: Inline styles defined in HTML only apply to the tags they are added to. <br></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false"><p style="color:red;">Some red text</p></pre><div class="contentsignin">Copy after login</div></div><p>Advantages: </p><p>1. Very useful if you want to test and preview changes. </p><p>2. Very useful for quick repair. </p><p>3. Reduce HTTP requests. </p><p>Disadvantages: </p><p>Inline CSS must be applied to every element. </p><p><strong>Embedded style</strong></p><p>Features: </p><p>1), placed in the style tag<style type ="text/css"> < ;/ style> written in the head section of the web page. </p><p>2), the style written will be used only for the web page you use it on. </p><p>3), embedded styles are also called "internal styles" </p><p>The styles defined in the header will be applied to the entire page. The example below will make all h1 tags in the page display the title in red. <br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false"><head> <style type="text/css"> h1 { color: red; } Copy after loginAdvantages: 1. The style sheet only affects one page. 2. Internal style sheets can use classes and IDs. 3. No need to upload multiple files. HTML and CSS can be in the same file. Disadvantages: 1. Increase page loading time. 2. It only affects one page - useless if you want to use the same CSS on multiple documents. External Style SheetsLike HTML files, CSS files are plain text and usually have a .css file extension; they can be linked via specific tags into the HTML file. Features:1), written in a separate document and then attached to various Web documents2), modifying it can affect all pages you call 3), easy to modify For example, the content of the style.css file can be as follows: body { background-color: beige; color: #000080;} h1 { color: red;}Copy after loginThen you can use The header is introduced to take effect. Copy after loginAdvantages: 1. The size of the HTML page is smaller and the structure is clearer. 2. Faster loading speed. 3. The same .css file can be used on multiple pages. Disadvantages: The page may not render correctly until external CSS is loaded.
