• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.
    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

Read Me What is CSS?

Malcolm

Administrator
Administrator
Verified
In a recent post, I mentioned that HTML was used to create the structure of a webpage (this thread can be located here). However, if we would just use HTML to code our website, we would get an ugly looking website and would be very unattractive for the viewer viewing your website. That’s where CSS comes in, CSS stands for Cascading Style Sheets and is used to style the appearance of an HTML document – this may include font colour, background colour, font-size, define sizes of images, and many more.

To use CSS, you can use one of the following methods; an external style – This is where you write CSS in a separate document under the file extension .css and then reference it within your HTML document. An internal stylesheet – this is when you create your CSS within an HTML tag <style></style>. Then we have inline styles – Inline style is done by adding the style attribute to the HTML element followed by CSS properties.

Examples of the above methods are down below.

External Style Method (Recommended):

External Style Link Reference:
<!-- Within the <head> tag.-->
<head>
    <title>Hello World!</title>
    <link href="css/stylesheet.css" rel="stylesheet" type="text/css"/>
</head>

External Style - CSS example:
h1, h2, h3, h4 {
    color: red;
}

body {
    background-color: grey;
}

8

Internal Style - Within HTML:
<!-- within the <head> tag-->
<head>
    <style>
        h1, h2,h3,h4 {
            color: blue;
        }
        body {
            background-color: yellow;
        }
    </style>
</head>

9

Inline Style -:
<!-- within the HTML element tag -->
<body style="background-color: purple;"></body>
<h2 style="color: pink;"> Table </h2>
<h3 style="color: orange;">Ordered List</h3>
<h4 style="color: blue;">Unordered List</h3>

12
 
Last edited:

Tommy

Coder
Yes they are CSS and HTML codes

but you need to move CSS codes into a file and call it from html site without writing it in-line codes like that.

Thanks for your helpful post!
 

Malcolm

Administrator
Administrator
Verified
Yes they are CSS and HTML codes

but you need to move CSS codes into a file and call it from html site without writing it in-line codes like that.

Thanks for your helpful post!
I agree! External CSS codes are much better!
 

Malcolm

Administrator
Administrator
Verified
Sure, even you can optimize CSS for better loading.
It called as magnify CSS and there are some online tools out there to do this :)
I'll have a look at it. Thanks for sharing. Is this like a web tool that automatically generates it?
 

edenwax

Active Coder
Sure, even you can optimize CSS for better loading.
It called as magnify CSS and there are some online tools out there to do this :)

I think you mean minify CSS. You can also do it to JavaScript.

Also: note about inline CSS, please never do this in production. Always try to use external css documents as it keeps all styling in one centralized place.
 

JoyFreak

New Coder
Great post! Thanks for sharing! I actually taught myself CSS and very rarely used tutorials or online.. only when I got stuck. CSS is pretty self-explanatory.
 

TopSilver

Active Coder
Community Partner
Great work. Yeah I usually use external CSS myself. I like making external style sheets on my projects but sometimes inline can also come in handy on platforms such as Xenforo 2 I've noticed. I rarely find myself using CSS on the same html page between <style></style> tags I find that it makes the file messy and external keeps it properly structured.
 
Top Bottom