CSS Codes
Cascading Style Sheets (CSS) are used to adjust the appearance of the web page. With certain features, you can determine which tag will appear on the web page and you can create great web pages like this page.
CSS takes the visualization load off of HTML and aggregates this information into several files. This makes site updates and maintenance easier. The collection of all visualization information in several files also saves data traffic. HTML, which takes the visualization burden off its back, only carries information about the content, in accordance with its original purpose, and thus becomes more portable. CSS is perhaps the most indispensable part of a responsive design strategy.
What is CSS?
CSS (Cascading Style Sheets), like HTML and JavaScript, is one of the 3 main technologies used in coding web pages. CSS describes how to display an HTML page. In this recipe, besides the visual properties of the elements on the page such as title, text, image, video, there is also information about the page layout and how this layout will change on different screens, devices, screen, paper or other media. CSS was first proposed on October 10, 1994 by Hakon Wium Lie, working with Tim Barners-Lee at CERN. Subsequently, the W3C (World Wide Web Association) presented its first CSS proposal in 1996 (CSS1), taking into account several different style sheet language drafts made on various forums and mailing lists. The new needs arising from the widespread use of the Internet and the diversification of usage purposes resulted in the W3C's presentation of the CSS2 recommendation on May 12, 1998. CSS3, which started to work right after this, is still under development in 2016, although browser support has increased.
Structure of the web page and CSS
Structurally, internet pages consist of three layers. These layers, in order of importance and application, are the content layer, the visualization layer, and the interaction layer.
Content layer (HTML)
The content layer is always present on every Internet page. The information that the page owner wants to convey to the visitor is tagged with HTML and creates this layer. Today, although the content of internet pages is mainly text, different media such as pictures, animations and videos are also used as content. This layer has no information on how to display content (it shouldn't).
Visualization layer (CSS)
The visualization layer determines how the content is displayed to the visitor. Adjusting the content according to the screen size, determining the font size, defining the visual elements such as color and white space are made in this layer. The recommended and widely used language for the visualization layer is CSS.
Interaction layer (JavaScript)
The interaction layer defines the interaction methods and results between the user and the page. It is usually encoded with JavaScript. The interaction of a page with the visitor can range from simple operations such as checking forms to comprehensive web applications similar to desktop software.
The main advantages of CSS are:
Ease of updating: The visualization information of an entire site can be kept in one or several CSS files. Compared to a structure where the visual description of each page is defined in itself, this is a great advantage in terms of maintaining and updating the site. When it comes to increasing titles by one point on a 1000 page site, a CSS user updates a single line in a single file. The person who has not separated the visualization as a separate layer has to update the thousand pages separately.
Data traffic savings: There is a measurable savings in data traffic as all styles are contained in several CSS files. The separately encoded CSS file is stored by the browser once downloaded. Other pages using the same CSS file will use this stored file. The same file will not be downloaded again.
Content flexibility: When content and visual design are separated, it becomes easier to use the same content in different environments. For example, you can use the same content on the homepage, on the inside page, for the RSS feed and for screen readers.
Enabling up-to-date coding strategies: The separation of visual design from content is imperative for responsive design, which has now become an indispensable strategy. This eliminates the need to make a different page for each device, each screen size.