In this tutorial, you'll learn about the famous CSS, and hopefully stand firmly when talking about it. Meanwhile you should be engaged at least a bit with HTML to better understand this tutorial. If not, Click here to read an article that better explains that. But if you do, let's dive into CSS.
-What is CSS?
CSS is an acronym that stands for “Casscading Style Sheet”. The name Casscading comes from a specified priority scheme to determine which style rule applies, if more than one rule mathes a particular element.
CSS, can therefore be further defined as a style sheet language that describes how webpages written in a markup language like HTML, are presented. In short, this means CSS is used to style HTML elements. For example, changing the color of texts, changing text fonts, etc.
CSS, can therefore be further defined as a style sheet language that describes how webpages written in a markup language like HTML, are presented. In short, this means CSS is used to style HTML elements. For example, changing the color of texts, changing text fonts, etc.
-CSS Evolution
CSS was first proposed by Håkon Wium Lie, on October 10, 1994. There were proposals for several other style sheets for the web, but the discussions from inside the World Wide Web Consortium (W3C), and also from the public mailing list, resulted to the first W3C CSS recommendation (CSS1) being released in 1996. Later on, the W3C took an interest in the development of CSS, and they also setup a workshop towards that. The HTML Editorial Review Board (ERB), was later split into three groups and one of them, -> The CSS Working Group began tackling the issues not addressed in CSS1. This led to the creation of CSS2 on November 4, 1997. It was published as W3C recommendation on May 12, 1998. CSS3 was started in 1998, and was still developing as of 2014. CSS3 is the latest version of CSS as of time of writing. 2019.
-CSS Syntax
There are basically three ways to style an HTML element with CSS, below are the methods with examples.
Inline Styling:
This means adding the style attribute to the element you want to style.
<!Doctype html> <html> <head> <title>Inline CSS Example</title> </head> <body> <p style="color:red;">I will Change to red color</p> </body> </html>
Internal Styling:
This means adding the <style> tag to the head section of your HTML file.
<!Doctype html> <html> <head> <title>Internal CSS Example</title> <style> p{color:red;} /*Change all paragraphs to red color*/ </style> </head> <body> <p>Hello Dear Tech Lover</p> </body> </html>
External Styling:
This means creating a separate CSS file, and linking it to your HTML page with the <link> meta tag.
<!Doctype html> <html> <head> <title>External CSS Example</title> <link rel="stylesheet" href="style.css"/> </head> <body> <p>Hello Dear Tech Lover</p> </body> </html>
The above code is linking to a CSS file named style.css in the same directory as the HTML file. The CSS codes should be written in the CSS file, and saved with a .css extension.
p{ color:red; /*Change all paragraphs in HTML file to red color*/ } /*Filename "style.css"*/--
-Throwback Links
I hope you've quite gotten a grasp of CSS, it's evolutionary story, and how it looks like?...if you don't understand clearly about CSS, Click here. Thanks for reading
0 Comments
Share Your Thoughts...
Emoji