1# CSS
2
3
4Cascading Style Sheets (CSS) is a language used to describe the HML page structure. All HML components have default styles. You can customize styles for these components using CSS to design various pages.
5
6
7## Style Import
8
9CSS files can be imported using the **\@import** statement. This facilitates module management and code reuse.
10
11
12## Style Declaration
13
14The **.css** file with the same name as the **.hml** file in each page directory describes the styles of components on the HML page, determining how the components will be displayed.
15
161. Internal style: The **style** and **class** attributes can be used to specify the component style. Sample code:
17
18   ```html
19   <!-- index.hml -->
20   <div class="container">
21     <text style="color: red">Hello World</text>
22   </div>
23   ```
24
25
26   ```css
27   /* index.css */
28   .container {
29     justify-content: center;
30   }
31   ```
32
332. External style files: You need to import the files. For example, create a **style.css** file in the **common** directory and import the file at the beginning of **index.css**.
34
35   ```css
36   /* style.css */
37   .title {
38     font-size: 50px;
39   }
40   ```
41
42
43   ```css
44   /* index.css */
45   @import '../../common/style.css';
46   .container {
47     justify-content: center;
48   }
49   ```
50
51
52## Selectors
53
54A CSS selector is used to select elements for which styles need to be added to. The following table lists the supported selectors.
55
56| Selector   | Example                   | Description                                 |
57| ------ | --------------------- | ------------------------------------- |
58| .class | .container            | Selects all components whose **class** is **container**.            |
59| \#id   | \#titleId             | Selects all components whose **id** is **titleId**.                 |
60| ,      | .title, .content | Selects all components whose **class** is **title** or **content**.|
61
62Example:
63
64
65```html
66<!-- Pagelayoutexample.hml -->
67<div id="containerId" class="container">
68  <text id="titleId" class="title">Title</text>
69  <div class="content">
70    <text id="contentId">Content</text>
71  </div>
72</div>
73```
74
75
76```css
77/* Page style xxx.css */
78/* Set the style for the components whose class is title. */
79.title {
80  font-size: 30px;
81}
82/* Set the style for the components whose id is contentId. */
83#contentId {
84  font-size: 20px;
85}
86/* Set padding for all components of the title or content class to 5 px. */
87.title, .content {
88  padding: 5px;
89}
90
91```
92
93
94## Pseudo-classes
95
96A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected elements.
97
98
99
100| Name      | Available Components                               | Description                                      |
101| -------- | ----------------------------------- | ---------------------------------------- |
102| :active  | <br>input[type="button"]           | Selects the element activated by a user, for example, a pressed button. Only the **background-color** and **background-image** attributes can be set for the pseudo-class selector on lite wearables.|
103| :checked | input[type="checkbox", type="radio"]| Selects the element whose **checked** attribute is **true**. Only the **background-color** and **background-image** attributes can be set for the pseudo-class selector on lite wearables.|
104
105The following is an example for you to use the **:active** pseudo-class to control the style when a user presses the button.
106
107
108```html
109<!-- index.hml -->
110<div class="container">
111  <input type="button" class="button" value="Button"></input>
112</div>
113```
114
115
116```css
117/* index.css */
118.button:active {
119  background-color: #888888;/* After the button is activated, the background color is changed to #888888. */
120}
121```
122
123
124## Precompiled Styles
125
126Precompilation is a program that uses specific syntax to generate CSS files. It provides variables and calculation, helping you define component styles more conveniently. Currently, Less, Sass, and Scss are supported. To use precompiled styles, change the suffix of the original **.css** file. For example, change **index.css** to **index.less**, **index.sass**, or **index.scss**.
127
128- The following **index.less** file is changed from **index.css**.
129
130  ```css
131  /* index.less */
132  /* Define a variable. */
133  @colorBackground: #000000;
134  .container {
135      background-color: @colorBackground; /* Use the variable defined in the .less file. */
136  }
137  ```
138
139- Reference a precompiled style file. For example, if the **style.scss** file is located in the **common** directory, change the original **index.css** file to **index.scss** and import **style.scss**.
140
141  ```css
142  /* style.scss */
143  /* Define a variable. */
144  $colorBackground: #000000;
145  ```
146
147  Reference the precompiled style file in **index.scss**:
148
149
150  ```css
151  /* index.scss */
152  /* Import style.scss. */
153  @import '../../common/style.scss';
154  .container {
155    background-color: $colorBackground; /* Use the variable defined in style.scss. */
156  }
157  ```
158
159
160  >  **NOTE**
161  >
162  >  Place precompiled style files in the **common** directory.
163