各問題を確認し、回答に必要な資料への解説をまとめます。
この試験のサンプル問題は、2021/11時点では英語のみ。

全部で8問で、この記事では1問目-4問目が対象。
Front-End Developer Specializationのサンプル問題について解説 2/2(#5-#8)

サンプル問題は、
https://www.outsystems.com/learn/certifications/
の、「Front-end Developer Specialist」項目のリンク「Exam Details」でダウンロードできる資料から。「Sample Exam」がついている方のファイルが該当します。

1 Architecture Canvasとパターン

カスタム作成したPattern (概ねWidgetのこと）を、Architecture Canvasでいうどのレイヤーに配置すべきかという問題。
Architecture CanvasはOutSystemsが推奨するアーキテクチャ設計用の図法かつ、それを利用した設計方法のことです。
モジュールを役割によって、3つのレイヤーに分類します。

レイヤーとサブレイヤーより、

• End-User Moduleレイヤー：再利用可能な部品は含まない。エンドユーザーに直接機能を提供する、UIとプロセス
• Core Moduleレイヤー（問題の選択肢ではCore Services）：再利用可能な部品。業務仕様を含むもの
• Foundation Moduleレイヤー：再利用可能な部品。業務仕様を含まないもの

OutSystemsでは、パターンは再利用性の高い一般的なUI部品を指しているため、正解は選択肢AのFoundation Moduleです。
なお、OutSystemsのアーキテクチャ設計を解説する動画コースの1つTypical Module Elementsの1:44あたりにも「UI Patterns or blocks」はFoundation Modulesの典型的な要素として挙げられています。

2 CSSの適用順序

OutSystemsでは以下の場所にCSSを設定できる。
CSSの詳細度より

1. グリッドのContainerウィジェットのシステムスタイルシート
2. ブロックスタイルシート
3. 基本テーマを含むテーマスタイルシート（指定された場合）
4. 画面またはメールスタイルシート
5. グリッド設定がThemeプロパティに定義されているテーマエクストラスタイルシート
6. スタイルエディタ使用時にService Studioによって生成されるスタイル
7. AttributesまたはExtended Propertiesで定義したインラインスタイル

適用順序は、上記の数字の低い方から。よってCSSの適用ルールから、数字が大きいものほど優先される。
細かい部分は無視して大まかにCSSの適用順序を考えると、Block > Theme > Screen > Style Editor（優先順位は逆）。

問題の画像を見ると、同じclassが、Block/Theme/Screenで記述されています。

• background-color: Blockからred -> Themeからblue -> Screenからblackが適用されるので、後勝ちのルールに従い、black
• color: Blockからblue -> Themeからwhiteが適用されるので、後勝ちのルールに従い、white

これに該当するのは、選択肢D「Background color will be black and the text color will be white.」

3 Service Studioプレビュー用のclass

この問題については1点注意があり、試験公開直後にダウンロードできたSample ExamのPDFには間違った回答が載っていました（現在は修正済み）。問題を解いて見るときは、新しいファイルをダウンロードしてください。

styleは通常、ブラウザでも、Service Studioでプレビューしたとき（UIのエディタで開いたとき）でも適用されます。
ところが、属性に「-servicestudio」というプレフィックスをつけたときは、その設定はService Studioでプレビューしたときにしか適用されません。

問題の設定を見ると（選択肢がborderばかり気にしているのでそこだけ抜粋）

.align-center {
    border-style: dashed;
    -servicestudio-border-width: 4px;
}

であるため

• ブラウザ： border-style: dashed; border-widthは指定無し
  • borderの幅は、デフォルト値があるようなので破線が表示される
• Service Studio： border-style: dashed;　かつ　border-width: 4px;
  • 幅4pxの破線が表示される

それぞれスクリーンショット（一部）で確認してみます。
ブラウザ：

Service Studio：

よって、ブラウザでもService Studioのプレビューでもborderが表示されているため、選択肢A「 The Container will have a border when rendered in the browser and in the Service Studio preview.」が正解。

4 CSSのロード順

Block, Screen, ThemeのStyle Sheetのロード順を問う問題。
2の引用の通り、Block > Theme > Screenの順でロードされます。

よって最後にロードされるのは、選択肢B「The Screen's Style Sheet」が正解。

他のSpecialization試験のサンプル問題

Architecture Specializationのサンプル問題についてメモ 1/2(#1-#5)
Architecture Specializationのサンプル問題についてメモ 2/2

Mobile Developer Specializationのサンプル問題について解説 1/2(#1-#4)
Mobile Developer Specializationのサンプル問題について解説 2/2(#5-#8)