CSS Basics for Beginners -Technoob Technology

CASCADE STYLE SHEETS which is simply called as CSS is one of the nicest and advanced styling languages came up with the development of technology and this is the main styling language which is used for HTML documents. CSS defines how the HTML elements should be while HTML creates the page structure. CSS is easy to learn easy to use and well performing. CSS allows you to style the HTML elements without including the codes in the same HTML file. You can separate the codes and include them in a  new file and link that file to your HTML document. 

CSS structure 

CSS structure is very easy to understand. Enter the ID, class or tag name, then open curly brackets and write your code within those brackets. 

body{
background-color:red;
font-size:25 px;
}

When selecting the elements there are 3 different ways and we'll talk about it later.


Adding CSS

You can add CSS to your HTML files using 3 different ways.

• Inline CSS
• Internal CSS
• External CSS

Inline CSS 

Inline CSS is easy to use. You can simply add the style attribute to any tag you want and enter the codes within that style attribute. 

  <p style="color:red;></P>

This is easy to use but when you master CSS and start coding a lot, then this system would feel like a mess. So only use this type when its necessary, else it would become so hard to understand your code and even editing would be much harder.


Internal CSS

Internal CSS is adding your CSS codes within the head tags of your HTML document. Within the head tags open the style tags,  <style></style>   and enter your code within the style tags. 

It's a good practice to add style tags like this.

<style type="text/css" media="all"></style>

When you become familiar with CSS you would get to know how to change these things as you want. For now, try the codes using as given above.



External CSS 

External CSS is very valuable when adding the same styles to different HTML pages. You can link the same CSS file to any amount of HTML files. And the other importance of external CSS is you can easily understand the code, and you can separate the files according to different elements. 

When writing an external CSS code you should remember to save it in the .css file extension.

Ex-    filename.css

To link this CSS file to your HTML file you can use the code given below.

<link rel="stylesheet" href="filename.css">


NOTE: If the CSS file is stored in a different folder remember to specify the in href attribute.




CSS selectors

Selecting an element of an HTML document can be done using four main ways.

1. Type selectors
2. ID selectors
3. Class selectors
4. Descendant Selectors

Type selectors

Type selector is the easiest way. Simply enter the type of the element. 

<p>here goes text</p>

p{
    color:red;}

This colors the text of the paragraph element in red.


NOTE: Type selector selects all the elements of the same type and applies the style to all elements, and to avoid that you can use ID and class selectors.




ID selectors

Selecting the element using its id is called an ID selector. You can add an id to each and every element and select the element using its id. When selecting with the id you should remember to use # tag before the id.

<p id="text"> Hello! </p>
#text{
color:red;}

This CSS code selects the p element using the id "text" and sets it color to red. 

NOTE: never add an id which starts with a number.





Class selectors

You can even select an element using its class. You can add the same class to many HTML elements as much as you want. Select the class using "." before the class name.

<p class="text"> Hello! </p>
.text{
color:red;}

This selects the class text and applies the styles into that element.



Descendant Selector


This is used to select elements within other elements. You can simply do this by writing the element name while keeping spaces between them. 

<div id="first">
<p id="second">Hello <div class="color">World</div></p>
</div>

#first #second .color{  color:red;}

This code sets the color of word world into red color.




CSS Comments 

There is only one way to add comments in CSS.  Start the comment with " /* " and end it with " */  ".

/* this is a comment */


NOTE: Always remember that if you haven't described any styles for an element, it takes the styles of its parent element.  For an example, if you have written body{color: green;} all the other text elements within the body tags will take the color green.


Let's see an example of a simple web page designing using CSS


<html><head><title>title</title>

<style type="text/css" media="all">

body{     background-color:cyan;}
h1{ text-align:center;
color:red;
font-size:30px;}

#welcome text{
border:2px dotted black;
background-color:yellow;
font-style:italic;}

</style>
</head>
<body>
<h1> HELLO </h1>
<p id="welcome text">We warmly welcome you to our site"</p>
</body>


This will simply output this page. 

CSS easy to learn and easy to use keep practicing on it and you will be able to amazing things to your web pages including animations. 

Related Articles 

• JavaScript Basics
• How to build a perfect Website