Styles are tags used to describe the specifics of how an element should look and behave. They are roughly based on CSS.

Styles can be applied through a few different methods:

1. Inline

When constructing an element, the 'style' key can be set to a table that contains tags and their values. For example:

{
	type = "p",
	text = "Hello World!",
	style = {
		text_color = Color3.new(1, 0, 0),
		text_size = 12
	}
}

2. Sheets (tables)

Style sheets can be used to easily apply styles to entire websites, individual pages, or even specific elements. Sheets are tables that store style data intended to be used by multiple elements at a time.

Using a sheet is as simple as doing the following:

return {
	style = {}, -- Style data goes here
	header = {}, -- Header elements go here
	body = {}, -- Body elements go here
	footer = {} -- Footer elements go here
}

Sheets can be stored as modules and placed inside a website's style folder.
For the following example, assume that the site as a style module named "my_sheet"

	style = "my_sheet", -- The page builder module will grab the contents of the "my_sheet" ModuleScript
	header = {}, -- Header elements go here
	-- etc etc

Website Defaults

Both pages and an entire website can have style sheets. For a website to have a universal style sheet, a style module must be named "default".

Page/Site Conflicts

In the event where a website has a default style sheet and a page has a style sheet, any conflicts between the two will be won by the page sheet:

-- WEBSITE DEFAULT:
	p = {
		text_color = Color3.fromRGB(128, 128, 127),
		text_transparency = 0.5
	}

-- PAGE'S SHEET:
	p = {
		text_color = Color3.new(1, 1, 0),
		text_size = 8
	}

-- RESULT:
	p = {
		text_color = Color3.new(1, 1, 0), -- The page won this
		text_size = 8, -- Because the site sheet didn't have this, there was no contest
		text_transparency = 0.5 -- Because this was not included on the page sheet, the page sheet forfeits the would-be conflict
	}

Sheet Data

Style sheets contain data in a few forms:

A. Element types

Creating a style for all of an element:

Style = {
	p = { -- This will apply to all 'p' (text) elements for the page and/or website that uses this sheet
		text_color = Color3.fromRGB(128, 128, 127),
		text_size = 15
	}
}

B. Section types

These tables will apply their style tags to all elements in a given section (header, body, or footer)

Style = {
	body = { -- This will apply to all elements in the body section of the page that uses this sheet or, if this is the website's defaults sheet, all body sections on all pages.
		text_color = Color3.fromRGB(128, 128, 127),
		text_size = 15
	}
}

C. Custom tags

Creating a style with a custom name:

Style = {
	_imp = { -- Custom tags must start with an underscore
		text_color = Color3.new(0, 0, 1),
		text_size = 60
	}
}

-- Now let's see what an element using this would look like:
{
	type = "p",
	text = "Hello World!",
	style = "imp" -- The underscore is not used here; think of the underscore as being like a period before a tag in CSS
}

In the above example, an _imp tag in both the page's style sheet and the website's defaults style sheet would be used with style data in the page's sheet taking priority over the page's.

D. Page Index

The "page" index of a style table will have its tags applied to all elements on that page, regardless of if that tag actually works on the element. Any tags that do not work on an element are simply ignored by the element.

{
	page = {
		background_color = Color3.new(0, 0, 0)
	}
}

Section styles take priority over the page style, and element styles take priority over a page's style. For a complete order of priorities, see the bottom of this page.

Universal Style Tags

Certain tags can be applied to almost all elements. Note that all other tags can be added to the style guide for all elements, however not all style tags have an application for all elements.

Universal tags:

-- Defaults included as comments
background_color : Color3 -- (1, 1, 1)
outline = {
	line_join_mode : Enum.LineJoinMode -- Miter
	thickness : number -- 0 
	color : Color3 -- (0, 0, 0)
},
style_descends : boolean | number -- false

If style_descends is true or a number, child elements will inherit the style of the parent. If style_descends is specifically true, it it will apply to all descendants. This behavior can be cut off by having an element's style.style_descends tag expressly set to false. If style_descends is a number, the style will descend for that many generations. Once again, if an element's style.style_descends tag is expressly set to false, the style will not descend to it or its children.

Section Defaults

Here are the default style tags for the header, body, and page style sections:

	header = {
		text_size = 24,
		minimum_height = 40,
		background_color = Color3.new(0, 0, 0),
		text_color = Color3.new(1, 1, 1)
	}

	body = {
		minimum_height = 290
	}

	footer = {
		minimum_height = 30,
		background_color = Black,
		text_color = White
	}

All three sections also have the following tags as defaults. These tags impact the background of each section and cannot be passed down to child elements via the style_descends tag.

	image = nil,
	image_color = Color3.new(1, 1, 1),
	image_transparency = 0,
	resample_mode = Enum.ResamplerMode.Default,
	scale_type = Enum.ScaleType.Tile,
	tile_size = UDim2.new(1, 0, 0, 100),
	slice_scale = 1,
	slice_center = Rect.new(Vector2.new(10, 10), Vector2.new(90, 90))

Style Priority Order

Because there are so many layers to styles and how they are applied, here's a helpful list to help you visualize the order of priority. The higher on the list, the higher the priority.

1. Inline / [Page] Custom tag
2. [Website] Custom tag
3. [Page] Element type
4. [Page] Section type
5. [Page] "page" index
6. [Website] Element type
7. [Website] Section type
8. [Website] "page" index
9. [Fallback defaults] Element type
10. [Fallback defaults] Section type
11. [Fallback defaults] "page" index

Quiz

For this exercise, the fallback defaults (9-11) will be ignored. Consider the following: