Introduction To CSS; A Comprehensive explanation to beginners.

In the world of programming, there are a lot of languages that bring color to it. One of such languages, a styling sheet, is called CSS. This article is an introduction to CSS, primarily for beginners to grasp the idea of it.

NEXT

What does CSS even mean? That may be one of the questions lurking in your curious minds, and this article answers every lurking question in your mind. Keep reading to complete your knowledge quest!

The first thing to know about CSS is that it stands for Cascading Style Sheet and is used to design markup languages such as HTML or XML tags. The specification specifies how HTML documents should look when rendered while considering their physical and visual appearance. Simply put, it allows web designers to apply a style to their HTML tags. Cool right? Keep reading; there is more!

CSS is used on almost all web pages available today, describing web page presentations. This presentation includes colors, layout, and fonts, making web pages presentable to their users.

What To Know About Using CSS

You can write (CSS) in an HTML file in three ways. These three ways include;

External Style Sheets: This uses the link tag in the document head. The styles are applied, and references are added using the <link> tag in the head tag. The file is saved with .css extension. A duplicate style is removed and is uniquely applied to each document. Here’s an example:

<head>
 <link rel="stylesheet" type="text/css" href="name of the Css file">
</head>

Inline Styling: These are the style tags in the document body. You simply write all your CSS rules in the body section within the HTML tags. Previously, this was the only way to apply styles, and this was inefficient since it duplicated many styles, was self-contained, and each element had its style. Here’s an example:

<h3 style=” color:blue”> Say hello to David </h3>
<p style =” color: pink”> I smiled, and he did not </p>

Internal style Attributes: The style attribute within the HTML header tag. Simply write the rules in the head section of the HTML. By referencing the HTML Ids and classes, styles can be applied within the HTML file, and the same styles are removed and are uniquely applied to a single document. Here is an example:

<head>
 < style>
      h3{
          color:blue;
        }
 </style>  
</head>
<body>
    <h3> Say hello to David</h3>
</body>

Know Your CSS Selectors.

The selector is used to pick elements you want to apply CSS.
There are three simple selectors, which include;

  • Element Selector
  • ID Selector
  • Class Selector

  Element Selector

The element selector helps select HTML elements by using their name.
The example below is how to use it.

h1
     {
      Colour: blue;
     }

Above, the heading tag is selected, and the color property is changed to blue. So, whatever you write in this tag will have the text color blue.

ID Selector

The ID selector is an attribute used to select an HTML element and pick a specific or unique feature. Remember to use ID only when a document can only contain an item of this type – E.g., pageTitle, mainNavigationBar
The example below is how to use it.

#unique
     {
      Colour: blue;
     }
<h1 id=”unique”> Hi </p>

Above, the ID was selected and changed the color property to blue. So, whatever you write in this tag will have the text color blue.

 Class Selector

The HTML element that targets a specific component class is selected using this attribute. Remember to use class when a document contains or will contain many items of this type – E.g., blog entry, name-list, proper name.
The example below is how to use it.

.group
     {
      Colour: blue;
     }
<h1 class=”group”> Hi </p>

Above, the class was selected and changed the color property to blue. So, whatever you write in this tag will have the text color blue.

What’s the fuss about CSS? Why should anyone use? The benefits of this language would make you fall in love! Here are three reasons why you should use CSS!

CSS solved a major HTML problem. HTML was not to provide tags to format a web page. Can you imagine that? HTML was solely created to describe the content of a web page. Example;

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

So, tags like and color attributes were features of the HTML 3.2 specification but yet did not work out for web developers because the development of large websites, where fonts and color information have to be added to every single page, was a tediously long and expensive process. To help tackle this problem, the World Wide Web Consortium (W3C) invented CSS and removed style formatting from the HTML page!

CSS saves time! Since the style definitions are saved in external CSS files, it is possible to change the entire website by changing just one file. Amazing right? There would be no need for back and forths or multiple edits. All that is required is to edit one file.
CSS provides more attributes. These attributes are more detailed than plain HTML to define the look and feel of the website. In other words, CSS has more features that would make your web page look pretty.

Conclusion

Did you know that for many mobile and web applications, CSS is used along with HTML and JavaScript to create user interfaces? You can easily control fonts, text, and lists displayed with CSS. Applying styles to tags that appear only within other tags is possible by using the CSS check-in method.
CSS can be a bit complex but is sincerely not difficult to learn. The only drawback is that due to its detail, it can be overwhelming. The best and the easiest way to learn css is to practise as you rea. but if you want to master CSS, it may take some time.

NEXT