CSS for Beginners

Web Design is being popular for more than a decade and is going to be popular for more coming a decade. Web designing includes basic knowledge of HTML, CSS, and JavaScript. Where HTML helps in building mainframes of a web page. CSS for beginners provides decoration to that HTML code used on the web page. JavaScript helps in providing logical controls and validation to that web page designed by HTML and CSS.

Here I am going to provide a basic knowledge of CSS for beginners. With this knowledge, beginners can understand the application of CSS in a web page. To understand this, students need to understand the basics of HTML. HTML basics include an understanding of tags, their attributes, and properties. Since CSS is being applied to HTML, a basic understanding of HTML tags will help to apply CSS easily.

What is CSS?

CSS stands for Cascading Style Sheet. This means that we are covering our HTML page with CSS styling to decorate the web page. CSS can be applied to HTML tags/web pages in three ways:

Internal CSS
External CSS
Inline CSS

1. Internal CSS

In internal CSS, codes are applied to a web page within HEAD tags, using STYLE tags. This is always applied inside the HTML page, that is why they are called internal CSS.

Example:

2. External CSS

In external CSS, codes are written in a separate file, saved with the extension (.css). This external file then called in the HTML page within HEAD tags using the LINK tag and attribute HREF.

Example:

Where "cssFileName.css" contains CSS codes.

3. Inline CSS

In inline CSS, coding is written as a property of an attribute STYLE. This attribute can be assigned to any HTML tag.

Example:

So, above were the examples to provide CSS in different ways to a web page. Now, we need to understand, what is the CSS Code.

What are the CSS codes?

CSS codes are the syntax of writing proper codes that can change the look and feel of a basic HTML web page. The syntax to write CSS codes is:

Where the selector is a name of tag or attribute or property of an HTML page. Property is a category for formatting being provided to that selector. And, value is a type, which is being applied to that selector.

Selectors are of four Types:

Tag Selector
Id Selector
Class Selector
Universal Selector

1. Tag Selector

This means tag name of HTML is used as selector and CSS applied to all these selectors used in coding

Example:

2. ID Selector

ID is an attribute of tags in HTML that contains a user-defined name as an identifier of that tag. This id is called by CSS with # followed by id's property.

Example:

3. Class Selector

Class is an attribute of tags in HTML which contains a user-defined name as an identifier of that tag. This class is called by CSS with . followed by id's property.

Example:

4. Universal Selector

The tags /attributes which are not covered by CSS comes under universal tags. This universal selector is denoted by * sign.

Example:

Example of Internal CSS

<!DOCTYPE html>
<html>
<head>
<title>Sample Styling</title>

<style type="text/css">
p{
background-color: blue;
color: white;
text-indent: 50px;
}
#first{
background-color: red;
color: white;
margin:100px;
}
.myclass{
color: blue;
font-family: comic sans ms;
}
*{
font-family: monotype corsiva;
}
</style>
</head>
<body>
<h1>Chapter 1</h1>
<p>
This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.                 
</p>
<ul class="myclass">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
<p id="first">
This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.                 
</p>
<p>
This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.                 
</p>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</body>
</html>

Example of External CSS

<!DOCTYPE html>
<html>
<head>
<title>Sample Styling</title>

<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<h1>Chapter 1</h1>
<p>
This is text of chapter One. This is text of chapter One. This is text of chapter One. This is text of chapter One. This is text of chapter One. This is text of chapter One. This is text of chapter One. This is text of chapter One. This is text of chapter One. This is text of chapter One. This is text of chapter One. This is text of chapter One. This is text of chapter One. This is text of chapter One. This is text of chapter One. This is text of chapter One. This is text of chapter One. This is text of chapter One. This is text of chapter One. This is text of chapter One. This is text of chapter One. This is text of chapter One. This is text of chapter One. This is text of chapter One.
</p>
<ul class="myclass">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
<p id="first">
This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.                 </p>
<p>
This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.                 </p>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</body>
</html>

Where, external CSS file has the below codes:

Example of Inline CSS

<!DOCTYPE html>
<html>
<head>
<title>Sample Styling</title>
</head>
<body>
<!—this is inline CSS -- >
<h1 style="color:red;">Chapter 1</h1>
<p>
This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One. 
</p>
<ul class="myclass">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
<p id="first">
This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One. 
</p>
<p>
This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One.  This is the text of chapter One. 
</p>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</body>
</html>

Conclusion

So, these are the basic terms, which a beginner must need to understand before using CSS. If you have any queries related to this, you can write down in the comment section. If you like this blog, you can share it with others who want to learn CSS from scratch. Your comments will encourage me to work more on it.

Blogs by Abhishek Paul

Search This Blog