Styling Page

How to use this page:

THIS PAGE IS STILL BEING UPDATED

First show an Example. Then write a description (if you need to). Last show the code used:
To create this box write... <code>Paste the actual code in here (convert into html)</code>

 



Basic Knowledge

  • Use “REM” in sizing (as will resize for users browser changes too)
  • Use http://www.html.am/html-editors/online-html-editor.cfm to convert html code to text
  • <hr> inserts a line between points
  • Defined Elements – <alert> is a defined element and in css you would have e.g alert {colour: #ffffff; etc} (no dot)
  • You can give any Element a class = in css you would have e.g .classname {color: #ffffff; etc}
    • <a class=”classname”>xxx</a> = hyperlink
    • <b class=”classname”>xxx</b> = bold text
    • <blockquote class=”classname”>xxx</blockquote> = blockquote
    • <br class=”classname”>xxx</br> = single line break
    • <button class=”classname”>xxx</button> = clickable button
    • <div class=”classname”>xxx</div> = section of document
    • <em class=”classname”>xxx</em> = emphasized / italic text
    • <form class=”classname”>xxx</form> = form for user input
    • <h1 to h6 class=”classname”>xxx</h1 to h6> = headings
    • <hr class=”classname”>xxx</hr> = line
    • <iframe class=”classname”>xxx</ifram> = inline frame
    • <img class=”classname”>xxx</img> = image
    • <input class=”classname”>xxx</input> = input control
    • <label class=”classname”>xxx</label> = label for input element
    • <li class=”classname”>xxx</li> = list item
    • <ol class=”classname”>xxx</ol> = ordered list
    • <p class=”classname”>xxx</p> = paragraph
    • <span class=”classname”>xxx</span> = section in a document (inline)
    • <strong class=”classname”>xxx</strong> = bold text
    • <table class=”classname”>xxx</table> = table
    • <tbody class=”classname”>xxx</tbody> = group of body content in a table
    • <td class=”classname”>xxx</td> = cell in a table
    • <tr class=”classname”>xxx</tr> = row in a table
    • <ul class=”classname”>xxx</ul> = unordered list
    • <video class=”classname”>xxx</video> = video or movie

This is a DIV

The <div> element is a block-level / single line element (also <p>,<form>,<h1>..)
<div style="background-color:red; color:white; padding:2px;">xxx</div>

This is a hidden DIV

The above is a hidden div
<div class="hide">xxx</div>


This is an example where the text here is in a SPAN and this is just normal text
The <span> is an inline element inside a paragraph (also <a>, <img>). An inline element does not start on a new line and only takes up as much width as necessary.
This is an example where <span style="color:red">the text here is in a SPAN</span> and this is just normal text<br />


Visit the Typography Section
This links to the Typography “section” of the page. Make sure you do not do ” in notepad as it does not work when pasted into wordpress!
Place this above where you want to link to:
<a name="Typography"></a>
or just use <h2 id="Typography">Typography</h2>
And this is the actual link on the same page:
<a href="#Typography">Visit the Typography Section</a>
You can also use this from another page by making the link:
<a href="http://anaestheticgroup.com.au/headings-and-styles/#Typography">Visit the Typography Section</a&gt



Typography

Font Family: Open Sans
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 ()[email protected]#$%^&*()_+{}|:”<>?~`-=[]\;’,./
Font is by default 16px
Download Font File


<H1> – Header Level 1

Next line text in here – different for different page classes

<H2> – Header Level 2

Next line text in here

<H3> – Header Level 3

Next line text in here

<H4> – Header Level 4

Next line text in here

<H5> – Header Level 5

Next line text in here

<H6> – Header Level 6

Next line text in here


This is using HTML when something starts on a new line.
This is using HTML when something starts on a new line.

This is a paragraph which has a <p> at the beginning. Lorem ipsum this is bold dolor sit amet, this is italic consectetur this is underlined text adipiscing elit. This is a link within a paragraph or body of text accumsan, massa et aliquet consequat, tortor libero scelerisque nibh, sed auctor est dui eget urna.

This is the second paragraph. This is the second paragraph. This is the second paragraph. This is the second paragraph. This is the second paragraph. This is the second paragraph. This is the second paragraph. This is the second paragraph. This is the second paragraph. This is the second paragraph. This is the second paragraph. This is the second paragraph. This is the second paragraph.

This is using HTML when something starts on a new line.
This is using HTML when something starts on a new line.
<p>This is a paragraph which has a <p> at the beginning. Lorem ipsum <strong>this is bold</strong> dolor sit amet, <em>this is&nbsp;italic</em> consectetur <span style="text-decoration: underline;">this is underlined text</span>&nbsp;adipiscing elit. <a href="http://#">This is a link within a paragraph or body of text</a>&nbsp;accumsan, massa et aliquet consequat, tortor libero scelerisque nibh, sed auctor est dui eget urna.</p>
<p>This is the second paragraph. This is the second paragraph. This is the second paragraph. This is the second paragraph. This is the second paragraph. This is the second paragraph. This is the second paragraph. This is the second paragraph. This is the second paragraph. This is the second paragraph. This is the second paragraph. This is the second paragraph. This is the second paragraph. </p>


This is a link on it’s own line

<p><a href="http://#">This is a link on it's own line</a></p>


Small Text
Bigger Text
uppercase text
<span class="small">Small Text</span>
<span class="big">Bigger Text</span>
<span class="uppercase">uppercase text</span>


Blue Text – add class to any element
Navy Text – add class to any element
Red Text – add class to any element
Green Text – add class to any element
<span class="blue">Blue Text - add class to any element</span>
<span class="navy">Navy Text - add class to any element</span>
<span class="navy">Red Text - add class to any element</span>
<span class="green">Green Text - add class to any element</span>


Text Left
Text Right

Text Center

<span class="text-left">Text Left</span>
<span class="text-right">Text Right</span>
<center>Text Center</center>


This text or image is aligned left

This section of text until the next paragraph is right aligned around the image. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec posuere odio. Phasellus odio lectus, ultrices non pretium ac, mollis id elit. Fusce tempor tellus non felis tempus vestibulum. Donec molestie purus sem. Suspendisse a neque quam. Etiam mollis volutpat odio, id euismod justo gravidakly. Aliquam erat volutpat. Phasellus faucibus venenatis.

<div class="alignleft">
<span style=“color:red”>This text or image is aligned left</span>
</div>
This section of text until the next paragraph is right aligned around the image. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec posuere odio. Phasellus odio lectus, ultrices non pretium ac, mollis id elit. Fusce tempor tellus non felis tempus vestibulum. Donec molestie purus sem. Suspendisse a neque quam. Etiam mollis volutpat odio, id euismod justo gravidakly. Aliquam erat volutpat. Phasellus faucibus venenatis.
<div class="clear"></div>

This text or image is aligned right

This section of text until the next paragraph is left aligned around the image. Maecenas luctus pellentesque vulputate. Pellentesque eu sem nibh, vel scelerisque enim. Morbi vehicula ligula non arcu facilisis consectetur. Praesent euismod, odio id varius consectetur, arcu dolor bibendum ligula, nec ultrices sem lectus volutpat neque. Tiam mollis volutpat odio, id euismod justo grada tincidunt feugiat ultricies.

<div class="alignright">
<span style=“color:red”>This text or image is aligned right</span>
</div>
This section of text until the next paragraph is left aligned around the image. Maecenas luctus pellentesque vulputate. Pellentesque eu sem nibh, vel scelerisque enim. Morbi vehicula ligula non arcu facilisis consectetur. Praesent euismod, odio id varius consectetur, arcu dolor bibendum ligula, nec ultrices sem lectus volutpat neque. Tiam mollis volutpat odio, id euismod justo grada tincidunt feugiat ultricies.
<div class="clear"></div>


“This is in a blockquote. This is in a blockquote. This is in a blockquote. This is in a blockquote. This is in a blockquote. This is in a blockquote. This is in a blockquote.”

<blockquote>"This is in a blockquote..." </blockquote>


  1. Numbered / Ordered List 1
  2. Numbered / Ordered List 2
  3. Numbered / Ordered List 3

<ol>
<li>Numbered / Ordered List 1</li>
<li>Numbered / Ordered List 2</li>
<li>Numbered / Ordered List 3</li>
</ol>

  • Bullet / Unordered List 1
  • Bullet / Unordered List 2
  • Bullet / Unordered List 3

<ul>
<li>Bullet / Unordered List 1</li>
<li>Bullet / Unordered List 2</li>
<li>Bullet / Unordered List 3</li>
</ul>



Colour

Our colour palette is key to brand recognition and design consistency.

Main Colours

TO DO

Background & Text Colours

TO DO

Extra Colours


White Container
Grey Container
Blue Container
Green Container
Orange Container
Aqua Container

<div class="white-container">White Container</div>
<div class="grey-container">Grey Container</div>
<div class="blue-container">Blue Container</div>
<div class="green-container">Green Container</div>
<div class="orange-container">Orange Container</div>
<div class="aqua-container">Aqua Container</div>
<div class="navy-container">Navy Container</div>

Containers are best for colouring a full page width space – BUT you should always include a wrap to centre section on page, then an eighty-percent so it looks nice and then if you want to break it down further use the Grid codes as further below.
<div class="grey-container">
<div class="wrap">
<div class="eighty-percent">
<div class="grid grid-pad">
<div class="col-1-2 mobile-col-1-1">Content Here</div>
<div class="col-1-2 hide-on-mobile">Content Here</div>
</div>
</div>
</div>
</div>


This is in an alert. This is in an alert. This is how a link appears in an alert. This is in an alert. This is in an alert. This is in an alert. This is in an alert. This is in an alert. This is in an alert.

This is a standard notice to inform the user of something or say go here to read more.
Success! Your form has been submitted or say go here to read more.
Error! Please do xyz or say go here to read more.

<alert>This is in an alert (basic alert) </alert>
<div class="alert">......</div>
<div class="alert alert-success">Success! ......</div>
<div class="alert alert-error">Error! .......</div>




To style a CSS or Style later on the page – eg remove menus BELOW this section use the below code in the HTML page section
<div style="clear: both;"></div>
<style>#site-footer-widgets { display: none; }</style>


Buttons

Buttons: 1-4 styles


Call To Action Button
Default Button Button 2 Button 3 Button 4
<button>Button element</button>
<a href="#" class="ctabutton">Call to action</a>
<a href="#" class="button">Default Button</a>
<a href="#" class="button button-2">Button 2</a>
<a href="#" class="button button-3">Button 3</a>
<a href="#" class="button button-4">Button 4</a>

Buttons: Colour styles

Default Button Button Grey Button Green Button Orange Button Aqua Button Navy Button Lime

<a href="#" class="button">Default Button</a>
<a href="#" class="button button-grey">Button Grey</a>
<a href="#" class="button button-green">Button Green</a>
<a href="#" class="button button-orange">Button Orange</a>
<a href="#" class="button button-aqua">Button Aqua</a>
<a href="#" class="button button-navy">Button Navy</a>
<a href="#" class="button button-lime">Button Lime</a>

Buttons: Sizes

Button XLarge Button Large Button Normal Button Small

<a href="#" class="button button-xlarge button-grey">Button XLarge</a>
<a href="#" class="button button-large button-orange">Button Large</a>
<a href="#" class="button">Button Normal</a>
<a href="#" class="button button-small button-green">Button Small</a>

Buttons: Block

Default Button
Button 2
Button 3
Button 4
X Large Button Lime

<a href="#" class="button button-block">Default Button</a>
<a href="#" class="button button-block button-2">Button 2</a>
<a href="#" class="button button-block button-3">Button 3</a>
<a href="#" class="button button-block button-4">Button 4</a>
<a href="#" class="button button-block button-lime button-xlarge">X Large Button Lime</a>

Buttons: Other

Ghost Button = where the button has white text and a white border so it must sit inside a coloured container:

<div class="blue-container">
<a class="ghost-button" href="https://anaestheticgroup.com.au/join-anaesthetic-group/demo-health-questionnaire/">Try the Demo</a>
</div>


Images

Logo for use on newsletters
https://www.corebb.com.au/wp-content/uploads/news/Core-Logo-Big-Clear80h.png
244 x 80 pixels – transparent. Perfect for newsletters


Core Business Brokers   Suite1A, Level 2, 802 Pacific Highway, Gordon 2072. 
P: (02) 9413 2977   F: (02) 9413 3818   E: [email protected]