Jasmine Website Starter CSS Styles

The CSS Styles section highlights the CSS which is shipped as part of both JWS templates, within the folder called CSS which contains the file style.css

The section is split into four areas:

Core Styles

This is a visual demonstration of how the HTML elements are being styled from our JWS template CSS.

Styles Layout

An explanation with visual diagrams of the properties that control the HTML layout elements added in the CSS file.

Style Variables

A guide to what CSS variables are, how they're used and how we use them within our template style.css file.

Styling Extras

Are a collection of CSS tips and extras specifically aimed at usable properties within our JWS template CSS.

If you want an overview of CSS in more detail please check out our docs CSS intro section.

Exploring the Core Styles

Please feel free to explore the HTML & CSS of this page with the browsers devtools inspect feature, not sure how to do this then checkout our docs Browser Dev Tools page.

Typography

This is a paragraph where some words can be emphasised maybe even strongly emphasised, then again you could just simply make them bolder or even have some idiomatic text the choice is yours.

Perhaps you need to add a Link (This one goes to JasmineDesign.com) to another page or website.

It can also be useful to lower numbers or letters below the font line, so we can mark footnotes1 , write maths variables x1 or chemistry formulas C8H10N4O2 .

Likewise we can higher numbers, letters or even words when we want to show ordinal numbers 1st , equations E=mc2 or abbreviations Mlle .

Headings

Here we have six heading options that are in descending order of importance and size. To have a valid webpage you don't need to use all 6 of these headings, though making sure they are used in descending order is vital.

For example this page has one h1, one h2 and several h3 headings down the page with a couple of h4 headings between the h3, which is valid. But if we only had a h1, h3 and h4 headings with no h2 this would be invalid.

<h1>h1 heading</h1>

<h2>h2 heading</h2>

<h3>h3 heading</h3>

<h4>h4 heading</h4>

<h5>h5 heading</h5>

<h6>h6 heading</h6>

We have used made up styled headings here to demonstrate their hierarchy, as we didn't want multiple <h1>'s to invalidate our page structure. Though if you do a right click and View page source you will see commented out examples of how the heading element tags should look within the HTML page.

Blockquote

This text is quoted. A block of quoted text like this is particularly useful when presented as a pull-quote within an article of text.

Page & Text Divides

If we want to put a visible divide between text we can add a hr which looks this ↓

Form Elements

This is a form Error Message.

* required field.

We can also have a form Error Message appear below the form.

Details Disclosure Element

A little bit more about.

If you can see these words then this section is expanded!

Address Element

ayeup@someones_email.address Tel: 00000 000000

List Types

We can list information either with an <ol> ordered list or <ul> unordered list.

Ordered List

  1. This is an ordered List
  2. Ordered list items usually display with a preceding marker
  3. Such as a number, roman numeral or letter
  4. An ordered list item can also have a sub list item
    1. This is a list inside a list
    2. which has its own order
  5. The next list item will carry on the original order

Unordered List

  • This is an unordered list
  • It usually displays items as a bulleted list
  • Commonly used list types are discs, circles, squares or nothing anything at all
  • An unordered list item can also have a sub list item
    • This is a list inside a list
    • which can have a different list type to the main list
  • All List items can also contain links

Figure, Figcaption & Pre

    ___________________________
< Mooove along nothing to see here >
    ---------------------------
        \  (^__^)
         \  (oo)\_______
            (__)\       )\
                ||----w | \
                ||     ||  *
                ``     ``
A cow saying, "Mooove along nothing to see here." The cow is illustrated using preformatted text characters.

Code, Var & Samp

code

Represents a fragment of computer code <html lang="en"> displaying it in a monospace font.

If you wanted your code block to have Syntax highlighting then you would need to add a JavaScript library like PrismJS as we have on our JWS Styles Variables page.

var

Represents a variable in either a mathematical expression or programming context.

The volume of a box is l x w x h, where l represents the length, w the width and h the height of the box.

samp

Represents a sample or quoted output from another program or computing system.

Keyboard not found
Press F1 to continue

Keyboard Input Element

Please now click the Return Key

Tables

The table header
The table body with two columns
And second row with two columns

Page Last Edited: