Markup language - web application CSS style

Click here to return to the 123WORDPRESS.COM HTML Tutorial section. To view the CSS tutorial, please click here.
Above: Markup language - streamlined tags . Chapter 10 Applying CSS
In the first part, the main focus is on examples of markup syntax, and we also explore how to apply CSS to tags to design and specify style details. In the second chapter, we will discuss several ways to apply CSS to a document, a website, or even a single tag. In addition, we will discuss how to hide CSS content from earlier versions of browsers, so that we can use advanced techniques without affecting the markup structure that can be read by all browsers and devices.
In the "Extended Skills" unit at the end of the chapter, we will introduce how to switch fonts, colors, and create multiple themes without writing scripts - replacing style sheets. How to apply CSS to a file?
We'll now explore four different ways to apply CSS to your document. Each method has its own advantages and disadvantages, and each method may be the best choice depending on the situation. Each method demonstrated here uses legal XHTML 1.0 Transitional syntax, the <html> tag, and the <head> configuration.
Let's start with Method A. Method A: <style> tag

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Applying CSS</title>
<style type="text/css">
<![CDATA[
...CSS declarations go here...
]]>
</style>
</head>

This approach is also called inline style sheets, which allows you to write all CSS declarations directly in the (X)HTML file. The <style> tag is located in the <head> of the page and can contain any styles you need.
Specifying text/css for the type attribute ensures that the browser understands the style language we are using and cannot be omitted. We also use the CDATA comment syntax recommended by the W3C to hide this content from browsers that cannot handle style rules (http://www.w3.org/TR/xhtml1/#h-4.8).

: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Applying CSS</title>
<link rel="stylesheet" type="text/css" href="styles.css" _fcksavedurl=""styles.css"" />
</head>

Method B demonstrates how to link to an external style sheet: put all CSS declarations in a separate document, and then reference its contents using the <link> tag in the (X)HTML <head>.
We specify the location of the document with the href attribute, which can be a relative path (like in the example above) or an absolute path (fill in the full "http://" location of the style sheet). Also note that <link> is a single tag, or an empty tag, and must be closed with a / at the end. Separate documents = easy maintenance There is an obvious advantage to putting all CSS rules in a file separate from the markup content: any style changes for the entire website can be made to this file, without having to repeat the CSS declaration for each page as in method A.
Of course, this is critical for large-scale websites, where hundreds or even thousands of pages can share the same styles within a single document. An additional advantage of downloading a linked external style sheet is that the document is usually only downloaded once, and the browser will use the cache afterwards, saving the required download time when repeatedly viewing the same page or other pages that reference the same style sheet. Still not completely hidden Like method A, method B is still likely to be interpreted by old browsers that only support partial CSS features, and any styles designed for the latest browsers may cause chaos in browsers that do not support it.
Hmm... this is the second time I mention this problem, the next method must solve it, right? Method C: @import

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Applying CSS</title>
<style type="text/css">
<![CDATA[
@import "styles.css";
]]>
</style>
</head>

Similar to method B, using @import you can import CSS definitions from external files using either relative paths (like in the example above) or absolute paths.
Method C has the same advantages as using the <link> tag. Since the style sheet is placed in an external document, modifying and updating a single document can change the entire website, and it can be done simply and quickly. The external style sheet will be cached by the browser, saving download time for all pages that import the same style sheet. Hide and Seek The major benefit of using method C is that Netscape versions below 4.X do not support the @import syntax, so the referenced CSS content will be "hidden". This is definitely a useful technique because we can use it to write advanced CSS syntax to handle design details such as layout, allowing the latest browsers that can handle it to display them, while also allowing old browsers to ignore these syntaxes.
The problem with Netscape 4.x is that it thinks its CSS support is as good as the browsers that actually support it. So, with the exception of Netscape 4.x, we let the browser decide for itself whether to display the correct effect.
This is the key point when designing a website with standards. Try to separate the structural markup code from the display mode, and provide layout details and other styles for supported browsers. Old browsers can easily read and display the structural content, but will not process the advanced CSS rules hidden for them. Turn on the style and turn off the style. Look at Figure 10-1 and 10-2, and compare them. This is my personal website using full CSS, and then turn off the display effect of CSS (which should be very close to the display effect of old browsers). The structure without CSS is still very obvious and easy for everyone to read and use. If we don’t hide the CSS needed to display the layout, users of old versions of browsers may get a mess of content that is difficult to read.

Figure 10-1 My personal website, using CSS

Figure 10-2 The same page, without CSS, may be displayed like this by an old browser. Combining Method B and Method C to Apply Multiple Style Sheets Sometimes it is useful to include many sub-style sheets in one document. For example, you can put all layout rules in one document and font settings in another document. For large, complex designs, this can make it easier to maintain a large number of rules. Chameleon Effect When I was working on the Fast Company magazine website, I wanted to change the website's colors every month to match the cover image of the current issue of the magazine. To simplify regular changes, I put all color-related CSS rules in one document and put other rules that would not be changed every month in another document.
It is much easier and faster to cover all colors every month, without having to slowly find the content that needs to be changed in the hundreds of other rules that make up the design. Just change this document and the color of the entire website will change immediately. How to do it? Combine method B and method C to introduce multiple style sheets. The method is to use the <link> tag in the <head> of the page to reference the CSS main document, just like the demonstration of method B, link to styles.css.
The content of styles.css simply contains a few @import rules to import other CSS files as needed.
For example, if you want to import three style sheets, one for layout, one for fonts, and one for colors, then the contents of styles.css might look like this:

/Old browsers won't understand these import rules/
@import url("layout.css");
@import url("fonts.css");
@import url("colors.css");

In this way, you can use the same <link> tag throughout the site, only referencing the styles.css file. This document can continue to import other style sheets using the @import rule. New style sheets can be added to this document and will work for the entire site.
This makes it very easy to update and replace CSS. For example, if you suddenly want to split your CSS into 4 files down the road, you only need to change the @import rule of this document without having to modify all the XHTML markup source code. When hiding CSS from older browsers with the @import rule of method C, there is another trick that can be used. That is to use the CSS cascading effect, use method A or method B to provide the lo-fi effect supported by both old and new browsers, and then use @import to provide advanced effects for other supported browsers.
Older browsers will only get the content they support, while newer browsers will get all the styles they want.
Next, let's take a look at what the code for this technique looks like:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Applying CSS</title>
<link rel="stylesheet" type="text/css" href="lofi.css" _fcksavedurl=""lofi.css"" />
<style type="text/css">
@import "hifi.css";
</style>
</head>

Here lofi.css should contain basic CSS rules, such as link color and font size, while hifi.css should contain advanced rules, such as layout, positioning, background images, etc.
We can deliver both Lo-Fi and Hi-Fi versions of the styles without having to write scripts or any other way to identify the browser version on the server side. Order is important The order in which the <link> and <style> tags are specified in the markup source code is important. The CSS Cascade refers to the precedence of rules, which is determined by the order in which they appear.
For example, since most recent browsers support both approaches, they will download all stylesheets and apply all styles in them. At this time, the style rules in hifi.css will override the styles specified by lofi.css for the same tag. Why? Because hifi.css appears after lofi.css in the markup source.
Old browsers will ignore hifi.css because they don't support @import rules, so they will only use the styles defined in lofi.css. Embrace the Cascading Feature Take advantage of the CSS cascading feature in various ways. For example, if your entire website uses an external CSS for layout, positioning, fonts, colors, etc., you should @import this style sheet on each page to hide these rules from old browsers.
If you have a page on your website that you want to share layout and positioning settings, but you need to adjust fonts or colors. On this page (which is different from other pages on the website), you can still import the CSS main document, and after completing the import, we immediately import a second CSS document that defines special styles for this page. Any rules in the second CSS file will take precedence and override the style rules specified in the first CSS file for the same tag.
Let's look at an example. The master.css file contains the entire website structure, fonts and other CSS rules, while the custom.css file is only referenced on a specific page and overrides the style settings of several special tags.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Applying CSS</title>
<style type="text/css">
@import "master.css";
@import "custom.css";
</style>
</head>

Since custom.css appears second in the markup source code, the styles it specifies for the same tag will override those specified in master.css.
For example, suppose in main.css we require the <h1> tag to use a red serif font, and the <h2> tag to use a blue serif font.

h1 {
font-family: Georgia, serif;
color: red;
}
h2 {
font-family: Georgia, serif;
color: blue;
}

On a specific page, we only want to change the style settings of the <h1> tag and use the style of <h2>. Then in custom.css, we only need to declare a new style for <h1>.

h1 {
font-family: Verdana, sans-serif;
color: orange;
}

This declaration will override the declaration in master.css (because custom.css is imported after it). If the page imports master.css first and then imports custom.css, the <h1> tag will use the orange Verdana font, while the <h2> tag will still use the blue serif font. This is because the latter declaration in master.css is not overwritten by custom.css.
The CSS cascade is a great tool for sharing common styles, allowing you to override only the rules that need to be modified.

Method D: Inline styles

<h1 style="font-family: Georgia, serif; color: orange;">This is a Title</h1>

This is the fourth CSS application method we have come into contact with - inline style. Almost any tag can be added with a style attribute, allowing you to apply CSS style rules directly to the tag, just like the example above.
Since inline styles are at the bottom of the cascade, they override all external style declarations, as well as rules declared in the <style> tag in the <head>.
This is a simple way to add styles everywhere on the page, but it comes at a price. Styles are tied to tags If you rely too much on method D when styling your page, you will not be able to separate the content from the presentation. When you go back and modify it, you must dig into the markup source code. Putting the CSS into a separate file makes it much easier to maintain.
Abusing method D is no different from polluting markup source code with display tags like <font>. These design details should always be placed elsewhere. Use them with caution in real situations. Of course, there are opportunities to use inline styles. When you need to add styles to a page but cannot access external files or modify the <head>, it can save your life, or temporarily apply styles when you don't plan to share them with other tags.
For example, if you have a page on your site that announces a charity sale and will be taken down later, and you want to style that page uniquely, you might want to inline those style rules in the markup rather than adding them to a permanent style sheet.
Let’s do it, but be aware that these styles cannot be easily changed or applied across the page to the entire site.
Previous Page 1 2 3 Next Page Read More

<<: Summary of several error logs about MySQL MHA setup and switching

>>: Ideas and codes for realizing magnifying glass effect in js

Detailed explanation of the usage of NULL and NOT NULL when creating tables in MySQL

Markup language - web application CSS style

Detailed explanation of the usage of NULL and NOT NULL when creating tables in MySQL

How to modify the group to which a user belongs in Linux

MySQL batch removes spaces in a certain field

Example code for implementing verification code login in SMS API in Node

Web standards learning to understand the separation of structure and presentation

Use button trigger events to achieve background color flashing effect

Solution to abnormal connection table caused by inconsistent MySQL character sets

MySQL Best Practices: Basic Types of Partition Tables

Teach you how to monitor Tomcat's JVM memory through JConsoler

Detailed explanation of Vue's ref attribute

Recommend

HTML implements a fixed floating semi-transparent search box on mobile

Vue state management: using Pinia instead of Vuex

Summary of some tips on MySQL index knowledge

nuxt.js multiple environment variable configuration

How to configure Nginx to distinguish between PC or mobile phone access to different domain names

How to install Docker and configure Alibaba Cloud Image Accelerator

HTML dynamically loads css styles and js scripts example

How to deploy a simple c/c++ program using docker

Let's talk about my understanding and application of React Context

MySQL database must know sql statements (enhanced version)

Detailed explanation of the encapsulation and use of the Vue image magnifier component

Steps to enable MySQL database monitoring binlog

Simply understand the writing and execution order of MySQL statements

How to change the domestic source of Ubuntu 20.04 apt

How to create your own image using Dockerfile