Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • 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.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • 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
Code Plus
Company Plus
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):

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

CSS:
h1, h2, h3, h4 {
    color: red;
}

body {
    background-color: grey;
}

8

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

9

HTML:
<!-- 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:
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!
 
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?
 
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.
 
I agree! Using inline CSS makes the HTML document more confusing and crowded.
 
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.
 
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.
 
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.
 
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.
 
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.)
 
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):

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

[CODE lang="css" title="External Style - CSS example"]
h1, h2, h3, h4 {
color: red;
}

body {
background-color: grey;
}[/CODE]


[CODE lang="html" title="Internal Style - Within HTML"]<!-- within the <head> tag-->
<head>
<style>
h1, h2,h3,h4 {
color: blue;
}
body {
background-color: yellow;
}
</style>
</head>[/CODE]


[CODE lang="html" title="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>
[/CODE]

CSS stands for cascading style sheet. It basically controls the style of the webpage and how it appears on the screen. CSS handles the layout of the webpage and the external file is stored in the CSS file.
 
Most common use of CSS to design a webpage and make it attractive. When you are using external CSS you can assign same class to different pages which helps you to write code for single time but whenever you are writing inline CSS you have write code multiple time for same CSS. So External CSS is easy and best for use.
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom