• 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
Staff Team
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!
 

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.
 
D

Deleted member 38

Guest
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.
 

Hassapiko

Coder
While CSS is nice and even fun to play about with, I find it to sometimes be a bit frustrating(particularly with aligning elements) and if I recall correctly, I've had to rewrite entire chunks of HTML or CSS files just to get what I want to work(or was that C?)

On the topic of where in a file CSS should be placed, I do also recall finding multiple stylesheets for different pages. I can't remember whereabouts I found such choice of layout, but as with regular programming, I believe it's good to break things up into smaller files - the same goes for CSS.
 

Malcolm

Administrator
Administrator
Staff Team
While CSS is nice and even fun to play about with, I find it to sometimes be a bit frustrating(particularly with aligning elements) and if I recall correctly, I've had to rewrite entire chunks of HTML or CSS files just to get what I want to work(or was that C?)
Hahaha it can be a pain but after some practice, you'll get the hang of it. I used to struggle with creating 4 columns side by side now it's just so easy, it's like second nature for me. Now that sounds like every other language 😂

On the topic of where in a file CSS should be placed, I do also recall finding multiple stylesheets for different pages. I can't remember whereabouts I found such choice of layout, but as with regular programming, I believe it's good to break things up into smaller files - the same goes for CSS.
It's a great idea to break files down as it will help you with finding things much quicker and on top of that, it makes it a lot more organized.
 

Hassapiko

Coder
Hahaha it can be a pain but after some practice, you'll get the hang of it. I used to struggle with creating 4 columns side by side now it's just so easy, it's like second nature for me. Now that sounds like every other language 😂
Even after practicing the most basic of CSS, I remember the CSS not rendering - again, after practicing the most basic of CSS. I haven't used it in a long time now, so God knows how much trouble I'll have with it now.

It's a great idea to break files down as it will help you with finding things much quicker and on top of that, it makes it a lot more organized.
Exactly. This is especially true if you're working on a program written in languages like C, C++, or Java. Functions are just one way of breaking things into smaller pieces, but files help to separate things into order(e.g. a player character might have their mechanics split into files based on what that mechanic is: one for movement, one for shooting, one for inventory, etc.)
 

Top