A Detective Overview of CSS

by · Published · Updated

If you think of first two languages for developing a webpage, the first one is HTML and the second CSS.

HTML is the basic structure of a web-page and CSS is used for Styling, Designing, Formatting or Painting the HTML structure.

So, first comes the HTML which evolved immediately after the invention of WWW as well as Webpage Transmission Model in 1989 by Tim Berners-Lee. HTML arrived on the historic background, when necessity arose to discover a separate language in order to build up webpage.

CSS was not essentially associated with HTML. In other word, CSS or something was not thought to be of any use in any webpage making activity. It was in 1996 when CSS came into being in an unavoidable situation to remove limitations of html as the only developers’ language.

If you need fair understanding of what HTML is, follow the link below first-

What is CSS? Why was CSS necessary?

Introduction to CSS

CSS (Cascading Style Sheet) is additional Coding system inflicted upon HTML Content or Page that describes different styling information to give it desired Visual look. Look at the example below:

CODE

<p>This is the place to write paragraph</p>

Here p or Paragraph is an HTML element. When it is written in coding with tag sign, it is a TAG. Its Start Tag is <p> and Ending Tag is </p>. The text within Start Tag and Ending Tag is the Content. The whole code will be put in action behind the scene but only the Content part will be visible (will display) on Browser’s screen. Now let’s see how the content looks in Browser-

OUTPUT

This is the place to write paragraph

This is HTML, the example of pure HTML. We use no CSS in this code. Now let’s apply Style on this content by using CSS. Suppose, we want to-

  • color the content with purple
  • increase font-size to 30px
  • style it with Italic font

Now how can we apply these styling information with CSS? Look-

<p style="color:purple;font-size:30px;font-style:italic;">This is the place to write paragraph</p>

We put CSS for the above information inside Start Tag of the p element. Now see what happened; what is the result-

This is the place to write paragraph

Great! This is pure CSS. Now let’s explain what is what-

  • We’ve used ‘style’ attribute to write code regarding color, font-size and font-style the way CSS-rules permit us.
  • We’ve used three Property:Vale pair. Here color is Property and ‘purple’ is Value. Again, font-size is Property and ’30px’ is Value and so on.
  • We’ve inserted CSS inside Start tag. This method of applying CSS is called Inline CSS.

There are a number of Attributes and hundreds of Properties in CSS. There are situations where Inline CSS is neither applicable nor reasonable. There are also two other ways to apply CSS to an HTML Element or whole Document or whole Website. They are called Internal CSS and External CSS which we’ll clarify next step.

Anyhow, at the initial stage, before CSS appeared in the scenario, there existed different HTML Tags for formatting Content of any HTML Elements. How?

Consider the code below-

CODE

<p><font color="blue" size="30px">This is the place to write paragraph</font></p>

OUTPUT

This is the place to write paragraph

This is not CSS but all are HTML. Now think, if you attempt to change the fonts of all of your website containing thousands of Elements, How troublesome it would be!

When developers and inventors faced this problem on way to web language development, it drove them into frenzy.

It is to encounter this big problem that W3C introduced CSS. Now we know, we can change color, font, border, background– every style of a whole document or website by changing a short code on Internal and External CSS file.

What are Inline, Internal and External CSS?

CSS can be applied in three methods or scopes. Due to advantages of using CSS different ways; as it is easy to apply it at line or word level, so convenient to use for Element, Document, Page or whole website. Let’s explain-

  • Inline CSS: Inline CSS is applied as style Attribute with Start Tag of any HTML Elements. So Inline CSS can define and change the styling of Content for associated Element.
  • Internal CSS: Internal CSS is applied within <style> and </style> Tag located inside <head> and </head> Tag. Internal CSS can define and change any HTML Element as well as the whole page which the CSS Selector indicates to.
  • External CSS: External CSS is CSS code written out of HTML document in an External CSS file named with .css extension. This file (filename.css) is linked to the associated HTML Document by a code inserted within <head> and </head> tag. External CSS can define and change any Element, Document or whole Website as far as Selectors permit. Noted, the external CSS file and the regarded HTML file must be placed in the same Folder.

However this is just a simple impression about Inline, Internal and External CSS. For details follow the link below. Never miss it-

What can CSS do?

By CSS, You can-

  • style or format HTML Document
  • define or change the look and feel of the HTML Document
  • give structure to webpage
  • create website layout
  • Save time by using the same coding information repeatedly to unlimited different HTML Elements.
  • maintain your website-styling easily by using multiple external CSS files if needed.

How to start learning CSS

There are a number of basic CSS learning points throughout Internet. You can enter W3School, SoloLearn, Udemy or Linda.com and start practicing to master CSS on way to building web-developer career. Some of them are free and some are paid.

There are a number of CSS code editors such as Macromedia Dreamweaver, TextPad, Sublime Text, Notepad++. But at beginning level, it is wise to use a simple text editor like Notepad to write and edit CSS.

Just open the Notepad. On the black sheet, put an HTML infrastructure as shown below (see our HTML tutorial here)-

<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<style>
……………….
</style>
</head>
<body>
………………………
</body>
</html>

Now start adding HTML elements and tags and impose CSS code in relevant part (in any method- Inline, Internal or External). Save the file with .html extension. Now open the file with any Browser and enjoy the result as shown in example below-

<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<style>
p {
border-style:solid;
border-color:red;
color:darkgreen;
padding:4px;
}
</style>
</head>
<body>
<h2 style="color:navy;text-style:italic;font-size:25px;text-align:center;">This is my first Heading</h2>
<p> This is my second paragraph</p>
</body>
</html>

OUTPUT

This is my first Heading

This is my second paragraph

As CSS is a Client-side (browser-side) language, you can run on experimental CSS practicing just by Browser without the help of any Server.

What CSS resources are available here in Netplanter

Netplanter is committed to readers to publish well-refined CSS articles to make CSS learning transparent and enjoyable as well as to provide creative ready-made CSS resources to be used directly in real site. In a short, we like to put emphasis on-

  • Practical CSS tips and tricks directly usable to any site including WordPress.
  • Clarify the challenges the beginners and Intermediate learners face in course of learning CSS
  • Numerous CSS projects with source code and implementation guide free of cost
  • CSS managerial guideline to help bring all resources at fingertips

Who created CSS

It was Hakon Wium Lie who first proposed the concept of CSS in 1994 when he was working with Tim Berners-Lee at CERN. He developed CSS into a W3C Recommendation with Bert Bos and integrated CSS into the Web browser. So, credit of introducing CSS goes to Hakon Wium Lie as well as to W3C.

How does CSS work to display webpage stylistically

Webpage transmission system through WWW follows the Server-Client model that jointly makes it possible to show a webpage in user’s screen with all look and feel just as it was built. Here Server (your hosting Server) and Client (Internet Explorer, Chrome, Mozilla, Safari or Opera) simultaneously perform this task.

All language files (HTML, CSS, PHP ..) are stored in Server. Server has nothing to do with html, css and javascript files but sends to the Browser (client) directly. It is in browser where instructions are written about what to do with which files. As per programed instructions, browser implements values like color, size etc. on html elements.

At present 140 color name is supported by all modern browsers. This means, if you use any of the 140 colors by name, browser will be able to recognize resembling it with color-list in its database and impose the associated color to related html element.

Noted, CSS is the Client-side language or browser-executable language. So when any CSS components (tag, property, value) are added or edited in latest version, Browsers also require updates. Otherwise new CSS functionality won’t work in browsers that are not updated. This is the reason why many properties and functions of CSS are not supported by different versions of some browsers. You can check-out the Browser reference of CSS from any Basic CSS-learning site.

Hope you acquired a decent understanding of what CSS is. If you’re interested and serious, we recommend you enter our CSS Resource Page where you can find answers to your heart-felt question from different analytical CSS-basic and CSS-tricks article-

Leave a Reply

Your email address will not be published.