CSS

CSS stands for Cascading Style Sheet.
selector {property: value;}

CSS is a computer language that when combined with the language Html is the code behind Website pages.

While Html dictates what appears where on the page such as words, photographs, links etc.
It is the CSS that lists the style commands, telling a Web Browser how to display elements.

It controls things like background colour, text colours, fonts, size etc.
It is saved as a file ending in .css

There are 3 ways to apply CSS to a Html Webpage.

1. External CSS Style Sheet linked to in the <head></head> section of the Html document.
externalcss




This separates the CSS from the Html.
The advantage of this is that you can style all the pages of your website from single entries on one document.
(I had to insert the above code as a photo as the WordPress editor will not allow it as text without corrupting and deleting some of it.)

2. List the CSS in the <head> section of the Html document

<head>
<style type=”text/css”>
selector {property:value;}
selector {property:value; property:value; property:value; }
.divstylename {property:value;}
#dividname {property:value;}
</style>
</head>

This keeps the CSS and Html in the same document.
The advantage is that you don’t have to toggle between different Html and CSS documents to check the styling.
The disadvantage is that you need to include the CSS in every single Html document.

3. Use Inline Styling within the Html document.

<body>

<selector style=”property: value;”></selector>
</body>

This method directly mixes the CSS in with the Html code.
The most common use of this is in WYSIWYG (what you see is what you get) editors.
They use the
<span></span> tags to style small sections of text to change their colour, make them bold, adjust the text size, style etc.

<span style=”property: value;”>Text goes here</span>

A handy thing to know is that sometimes a CSS rule can over ridden by a similar rule elsewhere. To overcome this we can (add a space after the value and before the ;  ) insert !important

body { background: #ff0000 !important ; }