Hi,This time, as we did in beginning for HTML, I am back with CSS Tutorial. This post will contain all information about Cascaded Style Sheet, commonly known as CSS.
Introduction: What is CSS?
CSS (Cascaded Style Sheet) is used to decorate HTML elements. This is developed by W3C, Bert Bos, Hakon Wium Lie.
In other words, Cascaded Style Sheet is a scripting language written in any text editor that is used to describe look and formatting of hypertext document.
However, this is present in all kinds of documents that are written in any markup languages including HTML.
Latest version is CSS 4 which is in early stage in current days. CSS Statement is divided in 3 parts in simple.
This is written between STYLE tags or with STYLE attribute if any HTML Keyword. Style tag is container/closed tag of HTML.
Example of CSS, How CSS is written?
text-align : left ;Property: These are fixed set of keywords which define property of element. In above example text-align is property.
Separator: This separates property and value and always presented by : (colon).
Value: This is the value to property. In above case left is the value of property text-align.
Using Method: Types of CSS
Based on using method, CSS is classified in two parts. One is Internal and other External.
Inline CSS: Internal Method 1
In this method, we write all CSS markup inside the same file where it is applied. This is also done in two methods. In this method, CSS is written inside the HTML or XHTML Tag using STYLE attribute.
<h1 Style="font-family: Verdana;">Heading Content</h1>Block CSS: Internal Method 2
In this method, we write CSS code in HEAD section of HTML document between STYLE tag.
Examples of Block CSS
<head>
<style>
h1
{
font-family: Verdana;
}
</style>
</head>
<body>
...External CSS (Cascaded Style Sheet)
In this method, we write all CSS markup in another file and insert reference to the file in required HTML file using LINK tag.
Example of External CSS.
<link href="styles/main.css" rel="stylesheet">Apart from this, we have another term in CSS which is called SELECTOR.
Selectors are simply collection of CSS (Cascaded Style Sheet) attributes and their value. Selectors are used in HTML using CLASS or ID or with HTML tag. So further CSS Selector are divided in three parts.
We will discuss about all kind of CSS Selector in another post. Before this let me show you an example of CSS used in all methods.
<html>
<head>
<title>Introduction to CSS</title>
<style> type="text/css">
h1
{
font-family: Calibri, Tahoma, Verdana, Geneva, 'DejaVu Sans';
font-size: 16px;
font-weight: bold;
text-decoration: none;
}
</style>
<link href="styles/main.css" rel="stylesheet" />
</head>
<body>
<h1>Introduction to CSS</h1>
<p style="text-align: justify;">This is random text in paragraph. Video provides a powerful way to help you prove your point.
When you click Online Video, you can paste in the embed code for the video you want to add. You can also type a keyword to search online for the video that best fits your document.
To make your document look professionally produced, Word provides header, footer, cover page, and text box designs that complement each other. For example, you can add a matching cover page, header, and sidebar.
Click Insert and then choose the elements you want from the different galleries. Themes and styles also help keep your document coordinated.
When you click Design and choose a new Theme, the pictures, charts, and SmartArt graphics change to match your new theme.
When you apply styles, your headings change to match the new theme. Save time in Word with new buttons that show up where you need them.
To change the way a picture fits in your document, click it and a button for layout options appears next to it.
When you work on a table, click where you want to add a row or a column, and then click the plus sign. Reading is easier, too, in the new Reading view.
You can collapse parts of the document and focus on the text you want.
If you need to stop reading before you reach the end, Word remembers where you left off - even on another device.</p>
</body>
</html>Let’s have look at output of above HTML file containing Cascaded Style Sheet markup.
Keep reading for next part. Subscribe to us on YouTube for latest tech tutorials.
