Definition Of CSS
 |
Introduction:
CSS is used to style or give a beautiful look to any element of an HTML document. HTML creates a basic structure on a webpage but CSS completes that structure. Web design can never be completed by HTML alone without CSS.Definition of CSS:
The full form of CSS Cascading Style Sheets. CSS is used to style the text more beautifully than changing the front and color. CSS is most urgent and important, especially for creating layouts.Types of CSS:
There are three types of CSS.1. Inline CSS.
2. Internal CSS.
3. External CSS.
These three types of CSS complement HTML.
Inline CSS:
Inline CSS is written in HTML tags with style attributes.CSS rule can be written with style attribute in HTML element. This is inline CSS. I have used inline CSS in several places in HTML tutorials before. Inline CSS should not be written unless very necessary. Basically external CSS should always be used. Since CSS is written inside the element, selector is not required for inline CSS.
Example:
Inline CSS:
There has been a basic discussion about CSS. Now we have to learn where and how to write CSS. CSS rule can be written in 3 ways
1. Inline CSS:
I have used many inline CSSs in HTML tutorials before. CSS can be written with a style attribute inside the start tag of the HTML element.
2. Internal CSS:
See detailed discussion in the following lines
3. External (External CSS):
Create a file with a new .css extension and write CSS there and attach it to the HTML file with a link tag.
Internal CSS:
Very easy. Internal CSS is written using the style tag inside the <head> </head> in any HTML document. E.g.Example:
Example:
Explanation: Internal CSS is written from lines 4 to 10. Take a good look at how to write CSS here. This is how CSS is written, i.e. first the selector (h1 in line 4) then the property and its value are given one by one in the second curly braces. For example, in line 7, color is a property and I have given its value as # f00 (this is a color code that displays red color) so the rest is the same.
You have to put a colon (:) sign between the property and its value and put a semicolon (;) at the end of the value otherwise the code will not work.
Writing inside the internal CSS <head> </head> tag is a rule but will work even if you place it elsewhere in the document (usually also inside the body element).
Property values are fixed so you can only use them. For example, the value of the text-align property can be 5 types "left", "right", "center", "justify", "inherit".
If left, the text of the element will be shown to the left. If you give right, if you give right, if you justify, both sides will look equal as shown in newspaper columns. If you give center, in between and if you inherit, the parent element will be applied.
Again the value of color should be just any valid color code or color name but it can be any color like I have given #foo you can give # 000 (black) or any other color if you want even color name can be given like maroon. As I have given the value of background property as yellow ..
External CSS:
Here's how to add style.css file with link tag in place of internal CSS. href is the attribute, here you have to show the source or where the file is. With the rel attribute, the relationship between the HTML document and the CSS file (stylesheet) is explained to the browser, it has to be given. And the value of type attribute with text / css means it is a CSS file.
Now save this file as index.html. code of style.css
h1{color: #f00; background: yellow; text-align: center;}
Example:
Write the code above and save the file as style.css then run index.html to see if all the CSSs are affected there.
Professionally everyone uses external CSS e because you have to write thousands of lines of CSS rule for an HTML file. As a result, it is important to separate HTML and CSS files, and later code maintenance becomes much easier.
We will give examples using internal CSS in most of the CSS tutorials as it will help us to show. However, you will work professionally or in practice using external CSS.
CSS Version:
CSS3 is now out (still working). The previous version was CSS 2.1. However, CSS 3 is now supported in most browsers and the use of CSS 3 is increasing day by day.Rules:
Page styling can be done by adding CSS code with <style> tag inside the <head> tag on an HTML page. This is "internal CSS" and if the CSS code is too much then the CSS code is written in a separate file and inside the <head> tag The CSS file is inserted with the <link> tag. This method is called "External CSS".
Conclusion