html

Getting Started Guide of CSS – Introduction

Cascading style sheets (CSS) is a computer-based high-level language, which is used to design HTML-based web pages. The designing of a page includes layouts, colors, font size, writing styles, and they maintain the page design. In this article, you will learn about the most powerful styling language, and you will also learn how CSS rules to HTML. CSS styling properties are embedded with the HTML tags. CSS is not markup or procedural language; it is a declarative language that defines its own rules according to the styling of attributes.

CSS Syntax

The syntax of CSS comprises of a selector and declaration block and the declaration block contains the properties and their values. As shown in the given example

h1 {
  text-align: right;
}

In this example “h1” is a selector, “text-align” is a property, and “right” is the value of the mentioned property.

CSS Selector

Just like HTML has tags same as CSS has selectors, which are used to access the HTML elements and style them internally or using an external CSS file. These selectors are used to apply the specific CSS properties on selected HTML elements.

An element can be selected using elements name, id, and class name. For example, to access an element with the class name, put a dot (.) before the class name as shown in the given example.

.center {
  text-align: right;
  color: green;
}

According to the above example, HTML elements with “center” class will be right-aligned and has green color.

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  text-align: right;
  color: green;
}
</style>
</head>
<body>
    <p class="center">CSS class is implemented.</p>
</body>
</html>

How to implement CSS on HTML?

There are three ways for the implementation of CSS on an HTML file:

  • Inline
  • internal and
  • external.

Inline CSS Styling

In inline styling, CSS properties are fixed within the HTML tags by using the style attribute such as shown in the given example.

<p style= "color: green;"> This tag is used for paragraphs. </p>

The given style property makes the specific paragraph green. By using the inline CSS styling you can only apply this styling on specific elements.

However, this inline CSS styling is not recommended because it increases the complexity of code.

Internal CSS Styling

The internal CSS stylingcan be applied on whole web page because it is embedded into head section on an HTML page with a <style> element and we can simply access any elelmtn using CSS selectors. As shown in the given example.

Example

<!DOCTYPE html>
<html>
<head>
<<style>
body {background-color: grey;}
p    {color: blue;}
h1   {color: black;}
</style>
</head>
<body>

<h1>Heading</h1>
<p>Paragraph</p>

</body>
</html>

External CSS Styling

In external CSS styling, a sperate CSS file is created with the extension of .css that linked with the HTML file by adding its link in head section. Multiple HTML pages can be use this external file at the same time. An example of external CSS style file is given below.

Example

style.css

body {
  background-color: green;
}
h1 {
  color: red;
}
p {
  color: black;
}

index.html

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
 
<h1>Heading </h1>
<p>Paragraph</p>
</body>
</html>

Comments in CSS

In every programming language comments are not displayed on browser however, they can help to elaborate and understand the code at the time of editing.

In CSS a comment is write between these signs ( /* and */ ). Pattern of a comment is also shown in the given example:

/* This is a comment */
h1 {
  color: red;
}

Conclusion

CSS stands for cascading style sheets and it is used to design HTML-based web pages. By using CSS styling, the designing of a page including layouts, colors, font size, and much more things can be done. In this post the introduction of CSS, syntax of CSS, working of CSS with HTML files and how to write comments in CSS is explained with the help of examples.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.