HTML CSS (Cascading Style Sheets)
In this article you can find CSS tutorial for beginners. CSS stands for Cascading Style Sheets and it enables the web authors/designers to apply styles across their websites. CSS is a style language that defines layout of HTML documents. For example, CSS covers fonts, colors, margins, lines, height, width, background images, advanced positions and so on.
With CSS, you can specify a number of style properties for a given HTML element. Each property has a name and a value, separated by a colon (:). Each property declaration is separated by a semi-colon (;).
In this HTML CSS tutorial you cand find the advantages of HTML CSS and Various types of CSS.
Advantages of CSS:
CSS was a revolution in the world of web design. The concrete benefits of CSS include:
- Control layout of many documents from one single style sheet i.e More precise control of layout.
- Apply different layout to different media-types (screen, print, etc.).
- Numerous advanced and sophisticated techniques.
- The CSS enables you to define the look for your pages at one place.
- The CSS enables you to easily change (or) modify the look of pages.
- It is used to define font sizes and similar attributes.
- The CSS enable you to specify the positions of content.
- The CSS enable you to re-define the HTML tags.
- The CSS enable you to customize the styles for links.
- The CSS enable you to define layers, so that you can place the layers in any ware in the document.
You May Also Like:
Features of HTML
Structure of HTML Document
HTML Formatting Tags
Different Types of Lists in HTML
Different Type of HTML CSS Documents:
There are three ways you can apply CSS to an HTML document. These methods are all outlined below.
1. In-line (the attribute style):
Inline CSS has the highest priority out of the three ways you can use CSS: external, internal, and inline. This means that you can override styles that are defined in external or internal by using inline CSS. If you want to add a style inside an HTML element all you have to do is specify the desired CSS properties with the style HTML attribute.
<html>
<head>
<title>Example</title>
</head>
<body style="background-color: #FF0000;">
<p>This is a red page</p>
</body>
</html>
2. Internal (the tag style):
When using internal CSS, you must add a new tag, <style>, inside the <head> tag. The HTML code below contains an example of <style>'s usage.
<html>
<head>
<title>Example</title>
<style type="text/css">
body {background-color: #FF0000;}
</style>
</head>
<body>
<p>This is a red page</p>
</body>
</html>
3. External (link to a style sheet):
When using CSS it is preferable to keep the CSS separate from your HTML. Placing CSS in a separate file allows the web designer to completely differentiate between content (HTML) and design (CSS). External CSS is a file that contains only CSS code and is saved with a ".css" file extension. This CSS file is then referenced in your HTML using the <link> instead of <style>.
To use External Style you have to follow the following steps:
1. First create a file which contains the following style information and save it as style.css.
body{ background-color: gray;}
p { color: blue; }
h3{ color: white; }
2. Now create a new HTML file and fill it with the following code.
<html>
<head>
<link rel="stylesheet" type="text/css" href="/test.css" />
</head>
<body>
<h3> A White Header </h3>
<p> This paragraph has a blue font.
The background color of this page is gray because
we changed it with CSS! </p>
</body>
</html>
Then save this file as example.html in the same directory as your CSS file.
3. Now open your HTML file in your web browser
You May Also Like:
Tables in HTML
Forms in HTML
Different CSS Properties
