CSS Language Overview - ProgrammerTech


CSS Language Overview

  • Share this:
CSS Language Overview

What is CSS language?

CSS is an abbreviation of the English term Cascading Style Sheet, which has been translated as 'flowing style sheets'. Whereas HTML is concerned with describing the elements of web documents, CSS is concerned with improving the look and feel of these elements.

And CSS is a descriptive language that gives websites a beautiful look that will distinguish it from other sites, and it is considered friendly to the HTML language. The basis of all web page elements and CSS is the basis of the design and appearance of the site, without CSS websites will remain as plain text on white backgrounds.


CSS Language Features

  1. Determines the lines, margins, and spacing of the web site elements.
  2. You specify the color and size of the elements.
  3. Colors can be applied to the backgrounds through them.
  4. With CSS, it is possible to animate the elements and get many movements in the website.
  5. CSS is a time saver as you can only write CSS code once and then reuse it on multiple HTML pages.
  6. Provides possibilities to modify the small details of the site.
  7. Optimizing the look of the website and its compatibility with different screen sizes such as tablets, computers, mobile phones...etc.
  8. Compatible with multiple devices and systems.


CSS language working principle

In order to understand the basics of how CSS works, you must first understand a little about HTML, as web page elements will be units with square shapes, and each of these squares contains multiple elements, and the size and shape of these squares are customized by CSS .

In CSS, properties are applied to all the elements that the programmer gives them a Class or Id, for example in the HTML code, if one selector is assigned to more than one element on a web page and a shape and properties are assigned to it, all the elements carrying it will take the same properties.


Characteristics of the CSS programming language

  1. Various HTML and CSS options and codes can be combined to create integrated themes.
  2. Flexibility and ease of use and application.
  3. It is case sensitive, for example I named Class A and typed it as a, so the formatting will not be applied.
  4. Basic HTML is needed first because they go hand in hand.
  5. Control the dimensions and appearance of the web page from background styles, size, elements, alignment, font colors, and others.
  6. Consistency between the dimensions of the web page on the site, no matter how large the site is.
  7. Increasing the site's loading speed and reducing the costs of hosting the site.


The problem of web developers before the advent of CSS

When the html language was discovered, the main focus was on designing a language that describes the elements of web pages only, and there was no interest in the appearance and form of the content, and this task was left to the designers of web browsers, as each web browser was and still displays every element of the web The page has a default appearance, and this point was noticed later, and new tags were added, represented by the <font> tag, which is used to display font text of a certain type and size of color within the page. Which has hundreds and thousands of pages, which means that the process of formatting these pages takes a lot of time and effort, but fortunately, this problem has completely disappeared with the advent of CSS.


Basic rules for writing CSS code

Let's say we want the red color to be the background of the web page, this is done as follows:

Using HTML we can do this this way.

<body bgcolor="#FF0000">

With CSS, the same result can be achieved by typing commands.

body {background-color: #FF0000;}

We also noticed that CSS commands are similar to HTML and the example above shows the basic style of writing CSS.


Connecting CSS codes with HTML

There are three ways that we can use to activate CSS in the HTML page, that is, three ways to write a Style, and these methods will be explained in detail and we recommend that the focus and use of the third method because it is very popular with developers, which is to put the CSS codes in a separate file and these three methods she:

  1. Write them within HTML tags using the Style property.
  2. Write it in an HTML file using the Style tag.
  3. Write it in a separate file, any external file, and this is what we recommend.


Writing CSS code using Style in the body of the page

This is one of the ways to activate CSS in HTML and it is using style, for example we want to apply the red color as the background of the web page and this is like this:

<body style="background-color: #FF0000;">
	<p>Programmer Tech</p>

As we noticed, we wrote a style within the body tag and applied to it that we want the background of the entire web page in red, then we created a paragraph with the name of our site.


Writing CSS code using the style tag in the header of the page

This method is different in that it uses the <style> tag in the header before the </head> and we will apply the red color as the background of the entire page.

	<style type="text/css">
		body {background-color: #FF0000;}


Writing CSS code in a separate file from HTML

This is the preferred method for everyone, which is to put a link to an external file that contains CSS commands, and the external file is simply a text file that uses the css extension. Like other files, it can be placed in the site provider or the hard disk, and the link code is written in the header of the page before </ head>.

And it is through the link tag, which is the tag for fetching links from abroad, and through the href property, we fetch the path of the css file.

Let's say that the design file is any css file named style.css and it is located in the current working folder and here it can be called as follows.

css language


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

And if the CSS command file is located within a folder within the working folder, for example, the folder name is style, and the link will be as follows:

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

Here the folder name is style and the file name is style.css.

Then we go to the CSS command file and write the code to apply the red color to the entire page.

body {background-color: #FF0000;}

This idea can save a lot of time and effort. If you want to change the background color of a site containing 100 pages, the design file can save you a lot of time. You will not need to modify the 100 page, each file separately. The background can be changed in seconds by a line. One in the css command file.

Muhammad Alush

Muhammad Alush

إسمي محمد تركي العلوش من سورية من ريف حلب الشرقي 1994, محب للتقنية و التعلم الذاتي, و جميع خبراتي تعلمتها ذاتياً, و اللغات البرمجية التي أتقنها هي html, css, javascript, php, c, python بالإضافة إلى حبي الكبير لمجال الشبكات.

موقعي programmer-tech.com