How to use CSS to set HTML-Front-end Q&A-php.cn

Home

Web Front-end

Front-end Q&A

How to use CSS to set HTML

Apr 26, 2023 pm 04:00 PM

HTML is the basic structure of web pages, while CSS provides support for the style of web pages. Through CSS settings, we can beautify and customize web pages. Therefore, it is a very important step for web developers to be familiar with the setting method of CSS. In this article, we will explore how to use CSS to set HTML.

1. CSS style basics

Before using CSS to set HTML styles, there are several basic concepts that need to be understood:

CSS style selector

CSS style selector refers to the CSS code used to select specific HTML tags. Common CSS style selectors include tag selectors, class selectors, ID selectors, attribute selectors, etc.

CSS properties and property values

CSS properties refer to the style properties to be set. The CSS attribute value is the specific value of the attribute.

For example, to set the color of HTML text, we can use the "color" attribute to set it, and the attribute value is the specific color code, such as: "color: #ff0000;" means setting the text color to red.

CSS style priority

When the same HTML tag has multiple CSS style codes setting it, there will be a problem with CSS style priority.

In CSS, priority can be divided into four levels. The priority from high to low is: ID selector, class selector, label selector and universal selector. That is, the style set by the ID selector has the highest priority, and the style set by the universal selector has the lowest priority.

If there are multiple label styles of the same level, the priority will be determined based on the position of the CSS style code.

2. How to set HTML with CSS style

Set HTML tag style

One of the simplest ways to set HTML style is to directly add HTML tags Add CSS style properties. For example, add a style to the h1 tag:

&lt;h1 style=&quot;color: #ff0000; font-size:28px;&quot;&gt;Hello World!&lt;/h1&gt;

Copy after login

Although this method is simple, it is not flexible enough. The code can also become too verbose if multiple tags need to be styled.

Use internal style sheets

Internal style sheets refer to writing CSS style code in the <style> tag at the head of the HTML file , set the style of HTML tags through tag selectors. For example:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Internal CSS Example&lt;/title&gt;
        &lt;style&gt;
            h1{
                color: #ff0000;
                font-size: 28px;
            }
        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;h1&gt;Hello World!&lt;/h1&gt;
    &lt;/body&gt;
&lt;/html&gt;

Copy after login

Using an external style sheet

External style sheet refers to writing the CSS style code in a separate CSS file, and then using the ## of the HTML tag The #<link> tag refers to it. This method can make the web page code clearer and more concise, and less likely to be repeated. For example:

refers to the

style.css style file in the index.html file:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;External CSS Example&lt;/title&gt;
        &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style.css&quot;&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;h1&gt;Hello World!&lt;/h1&gt;
    &lt;/body&gt;
&lt;/html&gt;

Copy after login

in the

style.css Set the style in the file:

h1{
    color: #ff0000;
    font-size: 28px;
}

Copy after login

The class selector means to set the CSS style for the specified HTML tag by adding the class attribute to the HTML tag. . For example:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Class Selector Example&lt;/title&gt;
        &lt;style&gt;
            .red-text{
                color: #ff0000;
            }
        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;h1 class=&quot;red-text&quot;&gt;Hello World!&lt;/h1&gt;
        &lt;p class=&quot;red-text&quot;&gt;This is a test paragraph.&lt;/p&gt;
    &lt;/body&gt;
&lt;/html&gt;

Copy after login

The ID selector refers to setting the CSS style for the specified HTML tag by adding the id attribute to the HTML tag.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;ID Selector Example&lt;/title&gt;
        &lt;style&gt;
            #my-heading{
                color: #ff0000;
            }
        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;h1 id=&quot;my-heading&quot;&gt;Hello World!&lt;/h1&gt;
    &lt;/body&gt;
&lt;/html&gt;

Copy after login

Attribute selectors refer to selecting and setting CSS styles by specifying attributes in HTML tags. For example:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Attribute Selector Example&lt;/title&gt;
        &lt;style&gt;
            a[href^="https"]{
                color: blue;
            }
        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;p&gt;Visit my website at &lt;a href=&quot;https://example.com&quot;&gt;example.com&lt;/a&gt;.&lt;/p&gt;
        &lt;p&gt;Visit my blog at &lt;a href=&quot;http://blog.example.com&quot;&gt;blog.example.com&lt;/a&gt;.&lt;/p&gt;
    &lt;/body&gt;
&lt;/html&gt;

Copy after login

In the above code,

a[href^="https"]Select all tags whose href attribute value starts with "https"<a> , set their font color to blue.

The pseudo-class selector refers to setting the CSS style for the specified HTML tag state. For example,

:hover can add style settings when the mouse hovers over the specified label.

The pseudo-element selector refers to setting the CSS style for a part of the content in the HTML tag (such as the first line of the paragraph).

&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Pseudo-class and Pseudo-element Selector Example&lt;/title&gt;
        &lt;style&gt;
            a:hover{
                color: blue;
            }
            p::first-line{
                font-size: 24px;
            }
        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;p&gt;This is the first line.
        This is the second line.
        This is the third line.&lt;/p&gt;
        &lt;a href=&quot;#&quot;&gt;This is a link.&lt;/a&gt;
    &lt;/body&gt;
&lt;/html&gt;

Copy after login

In the above code,

:hoverselect to set a blue font for the <a> label when the mouse hovers over it. ::first-lineSet the font size of the first line of the paragraph to 24px.

3. Summary

This article introduces how to set HTML styles through CSS, including directly adding styles to HTML tags, using internal style sheets, using external style sheets, using class selectors, and using ID selectors, using attribute selectors, pseudo-classes and pseudo-element selectors. By choosing different methods, we can be more flexible with styling in different situations. At the same time, understanding the concept of CSS style priority is also one of the foundations of using CSS styles to set HTML.

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

Statement of this Website

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