CSS Reference

CSS Reference

TesseraUI implements a subset of CSS 3 focused on layout, visual styling, and animations. Unsupported properties are silently ignored.

Comments: Both single-line and multiline CSS comments are supported.

/* This is a valid
   multiline comment */
.panel { background: #1A1208; }

---

Stylesheet loading

For a template loaded as yourmod:ui/my_screen, TesseraUI automatically loads:

assets/yourmod/ui/my_screen.html
assets/yourmod/ui/my_screen.css

You can also share CSS between templates directly from HTML:

<col>
  <link rel="stylesheet" href="yourmod:ui/shared.css"/>
  <h2 class="screen-title">Settings</h2>
</col>

Relative links resolve beside the current template:

<link rel="stylesheet" href="shared.css"/>

Cascade order is:

1. Global styles registered from Java with TesseraTemplate.addGlobalStylesheet(...)
2. HTML <link rel="stylesheet" href="..."> stylesheets, in document order
3. The companion CSS file, e.g. my_screen.css

The local companion CSS wins over linked/global CSS when specificity is equal.

---

Selectors

/* Tag selector */
button { }

/* Class selector */
.my-panel { }

/* ID selector */
#main-title { }

/* Descendant combinator */
.toolbar button { }

/* Child combinator */
.toolbar > button { }

/* Multiple selectors */
h1, h2, h3 { font-size: 9px; }

/* Pseudo-states */
button:hover    { background: #7C5A2E; }
button:active   { background: #9C7A4E; }
input:focus     { border-color: #F0B27A; }
button:disabled { opacity: 0.4; }

/* nth-child */
tr:nth-child(even) { background: #1e2433; }

---

CSS Variables

:root {
  --accent:    #B87333;
  --bg:        #1A1208;
  --text:      #F3E7D3;
}

.panel  { background: var(--bg);     }
.title  { color:      var(--accent); }
.body   { color:      var(--text);   }

---

@media queries

Adapt layout to Minecraft's GUI-scaled viewport width (changes with the GUI Scale setting):

/* Default: narrow layout */
.sidebar { display: none; }

/* Wide viewports (GUI Scale 1 on a large monitor) */
@media (min-width: 521px) {
  .sidebar { display: flex; }
}

---

Layout properties

Property	Values	Notes
display	flex, none	none removes the element from layout
flex-direction	row, column	Default depends on tag (<row> = row, <col> = column)
justify-content	flex-start, center, flex-end, space-between, space-around	Main-axis alignment
align-items	flex-start, center, flex-end, stretch	Cross-axis alignment
align-self	same as align-items	Per-child override
flex	<grow> [<shrink> [<basis>]]	Shorthand
flex-grow	number	Share of free space to absorb
flex-shrink	number	Share of overflow to absorb
flex-basis	px or auto	Initial main-axis size
flex-wrap	wrap, nowrap	Whether to wrap to next line
order	integer	Layout order (lower = first)
z-index	integer	Stacking order
gap	px	Space between children
padding	px (1–4 values)	Inner spacing (all sides, or T/R/B/L)
padding-top, padding-right, padding-bottom, padding-left	px	Individual sides
margin	px (1–4 values)	Outer spacing
margin-top	px or auto	auto pushes element to end of column; a more-specific rule can reset it to a px value
margin-right, margin-bottom, margin-left	px	Individual sides
width	px or %	Fixed or relative width
height	px or %	Fixed or relative height
min-width, max-width	px or %	Width constraints
min-height, max-height	px or %	Height constraints
width: calc(...)	e.g. calc(100% - 20px)	Computed width
height: calc(...)	e.g. calc(50% - 4px)	Computed height
box-sizing	border-box, content-box	How width/height are measured
overflow	hidden, scroll, auto, visible	Clip content
position	relative, absolute	absolute removes from normal flow
top, left, right, bottom	px	Offset for position: absolute
grid-template-columns	e.g. 2fr 1fr, 100px auto	Column widths for <grid>

---

Visual properties

Property	Values	Notes
background, background-color	color	Panel fill colour
color	color	Text colour
border	<px> [solid] <color>	All-sides border
border-color	color	Border colour override
border-top-color	color	Individual side
border-bottom-color	color
border-left-color	color
border-right-color	color
border-radius	px	Rounded corners
opacity	0.0 – 1.0	Panel and text transparency
corner-dot-size	px	Decorative corner dots
corner-dot-color	color	Dot colour (defaults to border colour)

---

Text properties

Property	Values	Notes
font-family	font name	Must be registered in a resource pack
font-size	px	Default: 7 px
font-weight	bold, 700, normal, 400
text-align	left, center, right
text-transform	uppercase, lowercase, none
text-decoration	underline, strikethrough, none
white-space	normal, nowrap	normal enables word-wrap

---

Animation properties

See CSS Animations for the full guide.

Property	Example
transition	background 250ms ease-out, border-color 250ms ease-out
animation	pulse 1500ms ease-in-out infinite

---

Color formats

/* Named colors */
color: white;
color: black;
color: transparent;

/* 3-digit hex (expands to 6-digit, alpha = FF) */
color: #F80;

/* 6-digit hex (alpha = FF) */
color: #FF8800;

/* 8-digit hex (AARRGGBB — Minecraft / Java format) */
color: #80FF8800;   /* 50% transparent orange */

/* rgb() */
color: rgb(255, 128, 0);

/* rgba() — alpha is a float in [0, 1]; values outside this range are clamped */
color: rgba(255, 128, 0, 0.5);   /* 50% transparent orange */
color: rgba(255, 128, 0, 1.0);   /* fully opaque — same as rgb() */
color: rgba(255, 128, 0, 0.0);   /* fully transparent */

Available named colors: white, black, red, green, lime, blue, yellow, gray/grey, silver, orange, purple, cyan, magenta, pink, brown, navy, teal, gold, copper, maroon, olive, aqua, fuchsia, indigo, violet, coral, salmon, khaki, beige, transparent.

---

Inheritance

The following properties are inherited by child elements (unless overridden):

• color
• font-size
• font-family
• font-weight
• white-space