Cascading Style Sheets (CSS) Tutorials For Beginners

CSS Tutorials

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.
In-line Style CSS

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.
Internal Style CSS

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.
External Style CSS

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.

Redefining tags in CSS

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.

Classes in CSS

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.

Applying classes in CSS

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.

Great CSS websites

Great CSS Websites

Great CSS websites

Great CSS Websites

Great CSS websites


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
Adobe Dreamweaver Training

Post a Comment

You must be logged in to post a comment.