CSS Online Training

Why to Learn CSS?

Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable.CSS is a MUST for students and working professionals to become a great Software Engineer specially when they are working in Web Development Domain.

I will list down some of the key Advantages of learning CSS

• Create Stunning Web site - CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, layout designs,variations in display for different devices and screen sizes as well as a variety of other effects.
• Become a web designer - If you want to start a carrer as a professional web designer, HTML and CSS designing is a must skill.
• Control web - CSS is easy to learn and understand but it provides powerful control over the presentation of an HTML document. Most commonly, CSS is combined with the markup languages HTML or XHTML.
• Learn other languages - Once you understands the basic of HTML and CSS then other related technologies like javascript, php, or angular are become easier to understand.

How does CSS actually work?

• When a browser displays a document, it must combine the document's content with its style information. It processes the document in a number of stages, which we've listed below.
• Bear in mind that this is a very simplified version of what happens when a browser loads a webpage, and that different browsers will handle the process in different ways.
• But this is roughly what happens.
• The browser loads the HTML (e.g. receives it from the network).
• It converts the HTML into a DOM (Document Object Model). The DOM represents the document in the computer's memory. The DOM is explained in a bit more detail in the next section.
• The browser then fetches most of the resources that are linked to by the HTML document, such as embedded images and videos ... and linked CSS! JavaScript is handled a bit later on in the process, and we won't talk about it here to keep things simpler.
• The browser parses the fetched CSS, and sorts the different rules by their selector types into different "buckets", e.g. element, class, ID, and so on. Based on the selectors it finds, it works out which rules should be applied to which nodes in the DOM, and attaches style to them as required (this intermediate step is called a render tree).
• The render tree is laid out in the structure it should appear in after the rules have been applied to it.
• The visual display of the page is shown on the screen (this stage is called painting).

What You Can Do with CSS

There are lot more things you can do with CSS.

• You can easily apply same style rules on multiple elements.
• You can control the presentation of multiple pages of a website with a single style sheet.
• You can present the same page differently on different devices.
• You can style dynamic states of elements such as hover, focus, etc. that isn't possible otherwise.
• You can change the position of an element on a web page without changing the markup.
• You can alter the display of existing HTML elements.
• You can transform elements like scale, rotate, skew, etc. in 2D or 3D space.
• You can create animations and transitions effects without using any JavaScript.
• You can create print friendly version of your web pages.

The list does not end here, there are many other interesting things that you can do with CSS. You will learn about all of them in detail in upcoming chapters.

Advantages of Using CSS

The biggest advantage of CSS is that it allows the separation of style and layout from the content of the document. Here are some more advantages,

• CSS Save Lots of Time — CSS gives lots of flexibility to set the style properties of an element. You can write CSS once; and then the same code can be applied to the groups of HTML elements, and can also be reused in multiple HTML pages.
• Easy Maintenance — CSS provides an easy means to update the formatting of the documents, and to maintain the consistency across multiple documents. Because the content of the entire set of web pages can be easily controlled using one or more style sheets.
• Pages Load Faster — CSS enables multiple pages to share the formatting information, which reduces complexity and repetition in the structural contents of the documents. It significantly reduces the file transfer size, which results in a faster page loading.
• Superior Styles to HTML — CSS has much wider presentation capabilities than HTML and provide much better control over the layout of your web pages. So you can give far better look to your web pages in comparison to the HTML presentational elements and attributes.
• Multiple Device Compatibility — CSS also allows web pages to be optimized for more than one type of device or media. Using CSS the same HTML document can be presented in different viewing styles for different rendering devices such as desktop, cell phones, etc.