As mentioned above, CSS stands for cascading style sheets. According to Techterms, CSS can be defined as a tiered sheet for web page layout formatting. CSS is an invention to help web developers who previously only depended on HTML as a markup language. HTML was originally used to mark objects on web pages such as tables, images, paragraphs, and so on.
The use of HTML at the beginning of the development of the internet was indeed sufficient because at that time the internet was only used by a limited group of people to share research information. At that time, the page formatting process was very limited and the style or style of the site's pages was still monotonous. But lately, after the internet is widely used and growing, people are starting to think about how to develop web pages to make them more attractive. This then makes HTML very burdensome.
After the rapid development of the internet, web pages have not only format but also colors and other layouts have to be imposed on HTML control. Web development is turning into something very complex and difficult to handle. Of course, the role of HTML as a structural tool and a design tool feels very heavy. For this reason, CSS was then created as a solution to the task of design and formatting, while HTML could refocus on the layout of web pages.
CSS emerged and became known as a tool for formatting documents written using a markup language, namely HTML. CSS is also known as a style sheet language that works with HTML to build a web page.
So, in general we can interpret HTML as a language to describe the structure of web pages, while CSS is a language to describe web pages, including colors, layouts, and fonts. This allows a developer to adapt presentations to various types of devices, such as large screen monitors, small screen tablets or smartphones, to printers. CSS no longer relies on HTML and can be used with other markup languages.
Separating HTML from CSS will make it easier to maintain the site so you can share style sheets across pages and adapt pages to different environments. This separation means separation of structure (HTML) from presentation (CSS).
How CSS works
CSS works when a browser displays a document, that's why at that time the browser had to combine the document content with the information style or presentation style in the pages of a site. To build a web page and make its presentation as attractive as possible, CSS has several working steps which can be described as follows,
Load HTML, in this stage the browser loads HTML from the network
Parse HTML, at this stage parsing HTML occurs to create a document object model (DOM) and load CSS. The DOM acts to represent the document in the computer's memory. The DOM has a tree-like structure and includes elements, attributes, chunks of text in the markup language that are nodes or the DOM tree structure. DOM can help developers to design, debug, and maintain CSS because DOM is the place where CSS and document content meet.
Load CSS, the browser or browser then loads most of the resources that the HTML document will link to, such as embedded images or videos. In this case then the CSS is loaded and linked.
Parse CSS, just like HTML, CSS is then parsed by sorting different rules based on their selector type into different buckets such as elements, classes, IDs, and so on. This selection determines which rules should be applied to the DOM nodes.
Render tree, the selection in each CSS element that will be applied to the DOM node as needed is called the render tree. This rendering tree is laid out in the structure that should appear after the node and element rules and adjustments have been applied.
Display, after the adjustment has been carried out and the rules are executed, the CSS and DOM will form a visual display of a web page that is displayed on the screen.
3 kinds of CSS in HTML code
1. External CSS
This external CSS contains a separate CSS document that only includes style properties with attributes such as class, ID, heading, and so on. CSS properties of this type are written in a separate document with the “.css” extension and must be linked to the HTML document using the link tag. This means that the style in each element can only be set once and will be applied across the entire web page.
2. Inline CSS
Inline CSS contains CSS properties in the body section attached to certain elements in inline form. This type of CSS style is specified in the HTML tag using a special style attribute.
3. Internal CSS
Internal CSS also known as embedded CSS can be used when an HTML document needs to be uniquely styled. The set of CSS rules must be in the HTML document in the head section.
\
History
The name CSS derives from the fact that each of the different style declarations can be placed sequentially, which then forms a parent-child relationship for each style.[3] CSS itself is an internet technology recommended by the World Wide Web Consortium or W3C in 1996.[2] After CSS was standardized, Internet Explorer and Netscape released their newest browsers that were compliant with or at least close to CSS standards.[3]
Currently, there are three versions of CSS, namely CSS1, CSS2, and CSS3. CSS1 was developed centered on HTML document formatting, CSS2 was developed to meet the need for document formatting to be displayed on the printer, while CSS3 is the latest version of CSS that is capable of doing many things in website design. CSS3 supports content positioning, downloads, fonts, table layouts and media types for printers. The presence of the third version of CSS is expected to be better than the first and second versions.
CSS3 can also perform animations on web pages, including color animation to 3D animation. With CSS3 designers are made easier in terms of website compatibility on smartphones with the support of a new feature, namely media queries. In addition, many new features in CSS3 such as: multiple background, border-radius, drop-shadow, border-image, CSS Math, and CSS Object Model.[4]
Blogger Comment
Facebook Comment