Document

Cascading 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.

Style Import

PhonePC/2in1TabletTVWearableLite Wearable

CSS files can be imported using the @import statement. This facilitates module management and code reuse.

Style Declaration

PhonePC/2in1TabletTVWearableLite Wearable

The .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.

Internal style: The style and class attributes can be used to specify the component style. Sample code:
Collapse
Word wrap
Dark theme
Copy code
```

<div class="container">
  <text style="color: red">Hello World</text>
</div>
```
Collapse
Word wrap
Dark theme
Copy code
```
/* index.css */
.container {
  justify-content: center;
}
```
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.
Collapse
Word wrap
Dark theme
Copy code
```
/* style.css */
.title {
  font-size: 50px;
}
```
Collapse
Word wrap
Dark theme
Copy code
```
/* index.css */
@import '../../common/style.css';
.container {
  justify-content: center;
}
```

Selectors

PhonePC/2in1TabletTVWearableLite Wearable

A CSS selector is used to select elements for which styles need to be added to. The following table lists the supported selectors.

Expand

Selector	Example	Description
.class	.container	Selects all components whose class is container.
#id	#titleId	Selects all components whose id is titleId.
,	.title, .content	Selects all components whose class is title or content.

Example:

Collapse
Word wrap
Dark theme
Copy code
<!-- Pagelayoutexample.hml -->
<div id="containerId" class="container">
  <text id="titleId" class="title">Title</text>
  <div class="content">
    <text id="contentId">Content</text>
  </div>
</div>

Collapse
Word wrap
Dark theme
Copy code
/* Page style xxx.css */
/* Set the style for the components whose class is title. */
.title {
  font-size: 30px;
}
/* Set the style for the components whose id is contentId. */
#contentId {
  font-size: 20px;
}
/* Set padding for all components of the title or content class to 5 px. */
.title, .content {
  padding: 5px;
}

Pseudo-classes

PhonePC/2in1TabletTVWearableLite Wearable

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected elements.

Expand

Name	Available Components	Description
:active	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 mini-system wearables.
: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 mini-system wearables.

The following is an example for you to use the :active pseudo-class to control the style when a user presses the button.

Collapse
Word wrap
Dark theme
Copy code
<!-- index.hml -->
<div class="container">
  <input type="button" class="button" value="Button"></input>
</div>

Collapse
Word wrap
Dark theme
Copy code
/* index.css */
.button:active {
  background-color: #888888;/* After the button is activated, the background color is changed to #888888. */
}

Precompiled Styles

PhonePC/2in1TabletTVWearableLite Wearable

Precompilation 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.

The following index.less file is changed from index.css.

Collapse
Word wrap
Dark theme
Copy code
/* index.less */
/* Define a variable. */
@colorBackground: #000000;
.container {
    background-color: @colorBackground; /* Use the variable defined in the .less file. */
}

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.
Collapse
Word wrap
Dark theme
Copy code
```
/* style.scss */
/* Define a variable. */
$colorBackground: #000000;
```
Reference the precompiled style file in index.scss:
Collapse
Word wrap
Dark theme
Copy code
```
/* index.scss */
/* Import style.scss. */
@import '../../common/style.scss';
.container {
  background-color: $colorBackground; /* Use the variable defined in style.scss. */
}
```
NOTE

Place precompiled style files in the common directory.