CSS – Colourful your page

What is CSS

CSS stands for Cascading Style Sheet. CSS is a powerful tool that helps you “paint” a website. Imagination, if we said HTML is an essential skeleton of a website, CSS would be the other things that build up the full body.

The page without CSS
The page without CSS
The page with CSS
The page with CSS

How to write the CSS

CSS is easy to write and understand. Following example is the basic syntax of CSS. For more detail, “.className” and “#idName” are the name of class and ID that assigned inside HTML’s tag.

<html>
<body>
    <div class="className" ></div>
    <div id="idName" ></div>
</body>
</html>
.className, 
#idName {
/*
CSS rules;
*/
}

How to connect CSS and HTML page

There are three ways for connecting CSS file with HTML file including external, internal and inline. The first way is external stylesheet which is the most used in the real world. We create a “.css” file, then using <link> tag in HTML file as the below example for connecting.

<html>
     <head>
         <link href="./style.css" rel="stylesheet" type="text/css">
     </head>
</html>

Another way is internal stylesheet, we will use <style></style> block inside HTML page to mark CSS content. For example:

<html>
    <style>
     /*
      CSS rules
      */
     </style>
    <head></head>
    <body></body>
</html>

Inline stylesheet is the less using style, although it is useful in some cases, it is really hard for maintaining and organizing your code. We can rule CSS’s properties in the HTML’s tag. For example:

<div class="className" style="CSS rule"></div>

How to learn CSS

There are many resources on the Internet that you can follow, such as w3school, codecademy or freecodecamp, etc. Those pages give you the basic knowledge about CSS and it’s relatives.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Create a website or blog at WordPress.com

Up ↑

%d bloggers like this: