An Introduction to CSS: What is CSS and Why It’s Important for Web Development? | How to create and link CSS file to HTML file?

Introduction to CSS: What is CSS and why it’s important for Web Development?

Hello Guys,

So we have already learnt about HTML their tags and Inline-CSS or Style tag. Now we are going to discuss about CSS in depth. In this article we will discuss about what CSS as an introduction is and why it is important for Web Development projects.

Folks let’s assume the world without colors, a home without structure, a book without cover, a movie without animation. How its feel? Yeah I know it’s a weird question but the same thing is happen to our web development without CSS.

So let’s start:

CSS:

CSS is also known as “Cascading Style Sheets”. It’s an internal or external document structure to give your website a better look and structure. It will help you out with your document structure, coloring, animation (in Some Place), as well as layout setup and so on. It’s very fast and reliable as well as easy to learn and understand topic.

Note: Yes we can make our document presentable by using in-line CSS as well but this method is too old and lengthy. In-line CSS takes much time and make your document lengthy and unreadable and un-understandable. To avoid much confusion relates to design CSS make his things in separate document for easy readability and understandability.

So in one line we can say that:

“CSS help us to make our HTML document Presentable.”

Now check the below image to understand:

By the above image you can understood about how’s your page looks with and without CSS.

What I can do with CSS?

As you know why CSS is important, now we will discuss about some points which you can perform with the help of CSS and CSS properties. Below we are discussing about few points which we can performs with the help to CSS in our HTML document.

Coloring:

What a world without colors and a webpage without colors? CSS will help you to give appropriate colors to your document. You can give colors to for text or background or a section of a document with the help for CSS in your webpages.

Working with images:

Imaging reading a book without images, yeah it’s quite boring and un-imaginary. With CSS you can inset images, resize them or make some cool stuffs like slider, background, poster, label, banner or so on.

Sizing:

With the “width”, “height” & “size” property you can give a new size and new look to your document, label, banner, image, fonts, section etc. sizing is much matters to make your content more presentable.

Works with fonts:

With CSS you can woks with different kinds of fonts, and with fonts property we can deal with our fonts with their colors, size etc.

Layout Management:

You can make your document very much structured with the help for CSS. CSS provides you technologies like: “Flex” and “Grid” which helps you to manage your document layout.

Content Positioning:

CSS helps you to make your content in correct position. CSS provides you four positioning properties i.e.: “Relative”, “Absolute”, “Fixed” & “Sticky” which we will cover in future articles.

Navigation or NAV bar:

CSS helps you to make your Navigation bar much attractive user friendly. With CSS you can set icons to your navigation as well you can set the correct position and make it mobile friendly.

Animations:

CSS give you “Transaction” & “Animation” properties which help you to provide some animation to your document. You can put animation effect to you NAV as well as make a slider or make effects to text or form. It’s up to you and your skills that how high you can take your webpage design and skills.

Responsive Designs:

We all know that today’s world is mobile friendly. You no need to make any external webpage for mobiles or tablet the “Media Screen” property helps you to make your webpage responsive as well, so you can you’re your same website on Desktop, Mobile or Tablet.

More Effects:

After learning CSS it’s totally up to you how high you can make your imagination and work for it. You can make lots of things and effects for your website with CSS. i.e. Slider, animation, Home page, Text effects, NAV bar effects etc.

How to create and link CSS file to HTML document?

Create a CSS file:

Writing a CSS file is as simple as in-line CSS method which we learnt in previous sections. To write a CSS we divide our document elements with class, id’s so on which we called selectors. The selectors indicate under CSS document that with which part we are dealing with. In our upcoming articles we will learn about CSS selectors.

We can make our CSS for HTML document with three ways:

1: Inline-CSS (Discussed Earlier)

2: Internal using <style> tag under <head> tag. (Use for small projects or XHTML)

3: Linking an external CSS file to document. (Most used method by all developers)

Make CSS file using internal method:

In this method we will write our CSS in our owned HTML document. Under <head> element we need to insert <style> tag and start writing CSS. In this method no external file is require. Check the below image:

 

Explanation:

Here “style” tag defines that section is used for CSS work.

“body” is a selector.

“background-color” is indicating background color of document body.

“red” is result which comes after execution.

“;” is terminator, which tells document that statement is over.

Linking an external CSS file:

In this method we will write and external file for CSS and link it to HTML document under head element with “link” tag.  Check below image:

“link” tag is use to linking external document to our webpages.

“type” is give the information about file type of document.

“href” provides path of the CSS file where its present.

Here we have one style folder where our CSS file is present.

It’s our CSS file under style folder.

So the link path is “style/master.css”

The extension of CSS file is “.css”

So after link your CSS file to HTML file you will get connected to each other, so far what changes you will do under CSS file it will make effect under for HTML document. Don’t forget to SAVE your file before RUN it on browser.

So that’s it for now.

if you wants to learn more about CSS check out below link:

CSS Zero to Hero 

 

Wants to change your blog theme from your own?

check out article on Best CSS Code from my fried.

Thank you