If you’re looking to expand your coding skill set beyond HTML, Cascading Style Sheets(CSS) is your next step. CSS is an add-on programming language that works alongside HTML; giving web designers more flexibility and control over their presentations.
If you are looking to boost your CSS skills, take a gander below as Learn iT! Anytime highlights the CSS bare essentials.
In this online CSS tutorial you will learn:
• History of HTML and CSS
• What is CSS?
• How does CSS work?
• Key CSS Terms
• Examples of Great CSS Websites
History of HTML and CSS
In the early 90s, web founder Tim Berners-Lee invented HTML to share scientific data with colleagues across the globe. Eventually businesses started using the Internet and web designers started applying HTML, from that point on CSS was born–giving web designers more room to create.
The Origin of CSS
The first CSS was released in 1996 by the World Wide Web Consortium (W3C) in response to the demand by web designers. Earlier versions of CSS gave you the means to manage fonts, headings and background colours, but with each new version, more capabilities were added. Today you get almost complete control of website presentation.
How does CSS Work?
CSS is an add-on language to HTML and there are three ways to apply CSS on a HTML document.
1) In-line
Here you can add ‘style’ right into a HMTL tag, which allows you to format the style within the tags. In this case ‘style’ is added to the paragraph tag to format the font.
2) Internal
The second way is to include the CSS codes using the HTML tags. Here, the style tag is embedded near the top of the HTML document in-between the head tags.
3) External
The third way is to link to an external style sheet. To do this you need to include the link tag in the original HTML document. The link tag tells the browser to use the layout from the CSS file when displaying the HTML document.
Important CSS Terms
Redefining Tags
Redefining tags is when you change how a tag operates–allowing you to change the default settings on a website or webpage. For example, if you wanted all H1 headings on a page to have the same font weight, size, and be uppercase you would enter a redefined H1 tag.
Creating Classes
CSS classes allow you to format setting in a specific place on a webpage or website. For example applying a specific font colour or background colour to a table.
When making a class in the style tag you start with a ‘dot’ which is very important because it tells the browser a class was created. In this case we have named the class ‘fancyCell’ as seen below.
After creating a class, you will need to apply it to the desired HTML tag for it to work. Here, we apply background colour change in the table by applying the fancyCell class.
For any future formatting, all you would need to do is update the fancyCell class within the style tags–automatically applying the changes.
Examples of Great CSS Websites
Once you have mastered CSS, HTML and other web design languages then you are on your way to developing powerful CSS driven websites. Below are some top notch CSS enabled websites that could be source of inspiration.
Summary
And there you have it folks, Learn iT! Anytime’s introduction to CSS. You can find a more detailed CSS analysis in our e-Learning video tutorials for CSS section. Take a peruse around and learn CSS anytime!
You May Also Like To Read:
Web Design Terms Everyone Should Know
Ultimate Guide to Web and Graphic Design Courses
Must-know Keyboard Shortcuts for Microsoft
Self-Paced Software Video Tutorials You May Be Interested In:
CSS Training
HTMLTraining
Adobe Dreamweaver Training
