What are CSS Styles?

CSS Styles or Cascading Style Sheets

In Web design CSS Styles are a conjunction of styles that give the overall look to your website, these are either embedded within the HTML page (called in-line styles) or linked to from a separate file.  Without these styles your website would just have a plain HTML design, which is mainly colours and the default look from your browser that is given to tables, headings, links, lists, breaks and so on.

CSS Styles from top to bottom

When you write your CSS Styles you might often find that they are not working as desired, these might be fixed by looking for duplicate styles, CSS styles degrade so if the first line of code targets a heading 1 for example and then line ten targets heading 1 again the latter will override the first heading one style see below:

h1{

font-size: 22px;

font-family: Arial;

color: red;

}

h1{

font-size: 18px;

font-family: Century Gothic;

color: blue;

}

The image below shows an example of how the coding looks in actual HTML.

Image 1.1

image1

So instead of seeing hello world! typed in red you will see it like hello world! in blue, this will fix many issues that arise when creating your styles.  See images 1.2 and 1.3 below.

Image 1.2

hellored

 

Image 1.3

helloblue

But I want both styles? you might ask.

Ok, the way to do it is to add a class to your style.  Classes are used to give you more control over you design, classes might be used several times within a page while ID’s are recommended to be used only once, classes are defined by a  full stop “.” and ID’s by a hash tag “#” see below

h1 .my-first-class{

font-size: 21px;

font-family: Arial;

color: red;

}

h1 .my-second-class{

font-size: 18px;

font-family: Century Gothic;

color: blue;

}

The image below shows an example of how the coding looks in actual HTML.

Image 1.4

image2

The way to apply it to your website is simply by editing your HTML page find your heading 1 tag and add either one like so:

<h1>hello world!</h1> <- no style normal link, a style can be applied but will be the same without a class to differ.

<h1 class=”my-first-class”>hello world!</h1> and

<h1 class=”my-second-class”>hello world!</h1> without the full stop.  Like these you can have many styles for your headings within a page.

The image below shows an example of how the coding looks in actual HTML.

Image 2.0

image3

These are the basics of CSS Styles and you should read basic HTML design to apply these examples to your work if you have difficulties.

 

Other posts that may interest you:

20 Incredibly Funny Print Ads
Free Vector Icons Set
The Colour System Explained
Best Free Google Fonts

 

 

Leave a Reply

Your email address will not be published.

Post Navigation