CSS is called Cascading Style Sheet language and is used to style elements written in a markup language like HTML . CSS separates the content from the visual representation of the website. Think about the decoration of your page. Using CSS it is possible to change the color of the text and background, font and spacing between paragraphs. You can also create tables, use layout variations, adjust images for their respective screens, and so on. CSS was developed by the W3C ( World Wide Web Consortium ) in 1996, for a very simple reason. HTML was not designed to have tags that would help format the page. You should just write the markup for the site.
Tags like ;font; were introduced in HTML version 3.2 and caused a lot of problems for developers. Because websites had different fonts , colors, and styles, it was a long, painful, and expensive process to rewrite the code. Thus, CSS was created by the W3C to solve this problem. The relationship between HTML and CSS is very strong. As HTML is a markup language (the foundation of a website) and CSS is focused on style (the entire aesthetic of a website), they go together. CSS isn’t technically a necessity, but you probably wouldn’t want to look at a site that only uses HTML as that would look completely abandoned.
Advantages of CSS
The difference between a website that implements CSS and one that doesn’t is huge and remarkable. You may have seen a website that doesn’t load completely or has a white background with blue and black text. This means that the CSS part of the site was not loaded correctly or does not exist. And this is what an HTML-only website looks like. I think you’ll agree with me that this isn’t very pretty, right? Before using CSS, all styling had to be included in the HTML markup. This means that you should separately describe the entire background, font colors, alignments, etc. But CSS allows you to style everything in a different file, thus creating the style separately. And later, integrate the CSS file on top of the HTML markup. This keeps the HTML markup clean and easy to maintain. In short, with CSS you no longer need to repeatedly write what individual elements look like. This saves time, shortens the code and reduces the chance of errors. CSS allows you to have multiple styles on an HTML page, making the customization possibilities almost endless. Nowadays, this is becoming more of a necessity than a simple feature.
How CSS Works
CSS is a very powerful tool that makes it possible to create different functionalities instead of using JavaScript or another heavier language. If used in moderation, CSS can provide a great experience for developers and users of web pages. With Cascading Style Sheets it is possible to create complex animations, create effects using parallax , which makes it appear that the background image has a different depth from the others, create interactive websites and also games with HTML5 and CSS3. CSS uses a simple English-based syntax with a set of rules that govern it. As we mentioned earlier, HTML was never intended to use styling elements, just page markup. It was created to describe the content only. For example: ;p;This is a paragraph.;/p;. But how do you style the paragraph? The CSS syntax structure is very simple. It has a selector and a declaration block. You select an element and then declare what you want to do with it. Pretty simple, right? But there are some rules you need to know. This is also simple, don’t worry. The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and value, separated by a colon. A CSS declaration always ends with a semicolon and declaration blocks are surrounded by curly braces.
List of basic CSS commands
There are so many options between selectors, properties and values that it can be very difficult for a developer to remember them all just relying on memory. That’s why we decided to create a List of Basic CSS Commands (CSS3 Included) that will serve as a help for you who are learning about what CSS is. This document has been strategically structured and divided into sections to facilitate reading. Download the List of CSS Commands in PDF by clicking here and deepen your knowledge of what CSS is.
How to Create a Stylesheet
Creating a style sheet is very simple. Just open your code editor, like Sublime, and create a new document. Once created, save it as Estilo.css, even without having written anything yet (this .css is what defines a file to be recognized by the browser as a style sheet).
Evolution of HTML
HTML was developed by Tim Berners-Lee at CERN (European Organization for Nuclear Research), with the help of the NeXTSTEP development environment, and was initially a collection of tools to handle research and communication between its creator and other people.
With the evolution of the internet, the solution gained worldwide attention. The first versions were flexible, and this helped beginners in the field. Over time, the structure became more rigid, but even today browsers can interpret web pages created the old way through backward compatibility.
Formally, the specifications were only defined in the 1990s. Then the evolution of HTML began , with an HTML working group being created which, in 1995, published the HTML 2.0 version. At the end of 1997, HTML 3.5 was released and, with it, the W3C working group began to focus on the development of XHTML. They continued with the release of HTML 4.01 versions in 1999, of XHTML in 2000, and finally we arrived in 2014, when HTML5 was launched, which is still used today, as well as its updates.
We saw that several versions of HTML were released until we reached the one we use today, but what is the difference between HTML and HTML5 ?
Difference between HTML and HTML5
In older versions, content structuring was done mainly by generic elements, such as ;div;and ;span;. In HTML5 we have semantic tags that refer to the purpose of the element, such ;header;as the header, ;footer;the footer, ;section;to separate sections, among others.
Furthermore, today, with HTML5 we have native support for audio and video , allowing us to embed them directly on the page. Forms can also cover more types of fields in the new version: we now have email, number, date and specification fields available that generate native validations on the elements.
However, it is important to know that HTML5 is not a static version. It is still being developed and improved today, with features and features being added from time to time.
HTML vs XML: what are the differences?
Both XML (Extensible Markup Language) and HTML are markup languages used on the web, but despite this, they have different purposes and structure.
XML is designed to represent information in a hierarchical and readable way, both for humans and machines, not being concerned with visual presentation or having a pre-defined structure, but with describing the data structure in a consistent and portable way. In Brazil, it is the most used format for issuing invoices.
HTML is specific to the creation and presentation of content on web pages, being more restricted as it has pre-defined elements and structure, focusing on visual presentation and how the elements should be displayed in the browser. It is commonly used in website building.
We can consider that the main differences are: while XML is used to store and transport data, HTML is used to create web pages with formatted content that allows interaction.
How does HTML work?
As previously stated, HTML is used to structure and format the content of web pages through tags, which will be interpreted by the browser. To make this interpretation possible, it is important to declare which version of HTML will be used .
This declaration is made through ;!DOCTYPE html;, ensuring that the browser correctly interprets the code. It is important to note that this is not an HTML tag, but rather an instruction for the browser that must be placed at the beginning of the document without spaces between it.
