ss samples - style.css in Kross

samples - sytle.css in Kross

illustrations illustrations

Samples

Font

class="font-tertiary"

paragraph by font-teritiary

class="font-secondary"

paragraph by font-secondary

Color

background color

paragraph by bg-primary

paragraph by bg-gray

paragraph by bg-dark

text color

paragraph by bg-primary

paragraph by text-gray

paragraph by text-dark

paragraph by text-light

paragraph by text-white

Header

This is h1

This is h2

This is h3

This is h4

This is h5
This is h6

Paragraph

normal <p>tag

This is normal paragraph

class="paragraph"

This is by <div class="paragraph">

<p-lg>tag

This is by <p-lg>tag

List

ul or ol tag is specified as "list-style-type: none" in css/style.css. If you want to add list style, comment out the line of "list-style-type: none" or add custom definition for list

<ul>tag

  • This is in <ul>tag
  • This is in <ul>tag

<ol>tag

  1. This is in<ol>tag
  2. This is in<ol>tag

blockquote

<blockquote>tag

This sentence is in blockquote. Is this useful?

Content

class="content"

This is by <p class="content">. you can see 20px margin-bottom.

class="content" <strong>

This is by <p class="content"><strong>xxxx</strong></p>

Advises

Customize CSS for short description

If you are bothered by writing everytime about the same style, consider to add original css definition like:

css/style.css 
  h3.my-header {
  background: #41228e
  color: #ffffff
  font-family: "BwNistaInt-xBd"
  }
xxxx.html 
  <h3 class="my-header"<This is my original header</h3>
display

This is my original header

This example is only adopted in h3 tag

References



▲