Introduction to CSS with Previous Knowledge to Learn CSS from Scratch with HTML - BOSS SOLUTION
September 29, 2020
Basic tutorial web programmer: CSS from scratch.
DEFINITION OR CONCEPT OF CSS LANGUAGE:CSS (Cascading Style Sheets ) is the code that is being used to style a web page. CSS is a language used in the presentation of HTML documents. An HTML document has been colloquial “a web page”. Thus, we can say that the CSS language serves to provide a web page with a presentation and appearance, with “style”. This language is mainly used by web designers and programmers to choose a multitude of presentation options such as colors, fonts, and sizes, background images, borders, etc.Basic CSS takes you through what you need to get started. It will answer questions such as:
How do I make changes in my text red or black or any other color?
How do I make my content appear in such and such a place on the screen?
How do I decorate my website with background images and colors?
CSS
The philosophy of CSS is based on trying to separate what is the structure or content and basic configuration of the HTML document from its presentation. To put it in some way: the web page would be what is underneath (the content), and CSS would be “a color glass” that makes the content look one way or another. Using this philosophy, it is very easy to change the appearance of a web page: just change the “glass” in front of you. Think, for example, what happens if you have a paper book and you look at it through a blue glass: that you see the blue book. Instead, if you look at it through a yellow glass, you will see the yellow book. The book (the content) is the same, but you can see it in different ways. CSS allows changing the style of the contents of web pages.
Some basic options of the CSS language, for example, can be the ability to change the color of some typical HTML tags such as <H1> (h1 is a tag in the HTML language intended to display a text as a header, in large size). But there are also somewhat more complex functions, such as introducing spacing between <DIV> elements (div is an HTML tag to identify a certain region or content division within a web page) or setting background images, rounded edges, etc.
CSS is very intuitive and simple once it is learned, since, for its definition, it always uses an HTML tag identifier (such as <H1>), and then we indicate how we want all the tags to be displayed <H1> that appear in a document. We can define how we want the different parts of the HTML document to be displayed, being able in each case to define their properties (color, font type, size, margin space, borders, background image, etc.) with a certain desired value.
Let’s first see what would be a very simple example of a CSS application, which will deal with a web page or HTML file where we will only have one paragraph of text. The text will be inside a <p> tag. We will distinguish with this example between content and presentation or appearance.
To follow this tutorial, it is necessary that you have basic knowledge of HTML. If you do not have them, we recommend that you first take the basic HTML Free course available in the courses Tutorial section of https://blog.boss-solution.com/(or if you prefer to access directly, you can do it through this link: https://blog.boss-solution.com/category/html/.
Our HTML document will contain the following starting text (in this case, it has been called example.html):
<! DOCTYPE html> <html> <head> <title> Example CSS application - a2zweb.info </title> </head> <body> <p> Sample text to display results </p> </body> </html>
Once the example.html document has been created on our computer, we will open it with a web browser, obtaining a result that will be similar to this:
We have a web page that only has one paragraph (“Sample text to display results”). It appears in black by default, and we want to show the text in red to see the usefulness of CSS. Actually, with CSS, we can do much more complex things, but now we just want to give an example to show CSS’s usefulness.
Once we have created a file with style to apply to the paragraphs (during the free course, we will learn how to do this and many more things), we can make all the paragraphs of a web page appear in the same way without having to modify paragraph by paragraph, but only modifying the CSS style that must be applied to the paragraphs. As we said, by introducing the appropriate CSS code, we can change the appearance of our web page:
However, with this writing, we were only modifying the appearance of a paragraph, while with CSS, we can modify the appearance of all the paragraphs of a web page, spread over hundreds of lines and files, “automatically.” With the evolution of HTML, some syntactic forms that served to give an appearance to web pages have been considered obsolete or discontinued, leaving the presentation to be controlled independently through CSS.
CSS makes it easy to change the presentation because if we now want to change the color, font, size, etc. of all the paragraphs on our web page, we should only change the files’ properties where we have defined the style for the paragraphs. , without altering anything on the website. It is much easier, faster, and more readable than modifying each and every one of the <p> tags that appear on our web page.
Now let’s imagine we have a web page with 3 <p> tags, but we don’t want them all to have the same presentation. CSS plans on how to apply different styles to certain paragraphs or tags. During the free course, we will see how. This image would be an example of using different styles for the paragraph <p> tag.
The way of defining CSS styles separates the presentation of information on a web page. It is very useful because we have the styles on the one hand and the other’s contents. If we want to change the way the page looks but not its contents at any given moment, we would only have to modify the CSS files. But there are also these other ways of applying styles; we will see them throughout the free course.
Perhaps the examples that we have seen so far are very simple and unattractive. Below we show images of what can be done using CSS at an advanced level, which, as you will see, can be really spectacular.
Look at the bellow two images that we show below and try to identify what they have in common and what they have different:
We can say that they have the same text, the same menu, and the menu position in common. Instead, we can say that the colors, fonts, and sizes of letters and the background images change, both decorative details such as flowers or people and backgrounds that create frames for text or menus. With advanced knowledge of CSS, we can achieve effects similar to those we see and change the appearance of a web page with just a click of a button.
In our later Tutorial post, We will discuss step by step for CSS cheat sheet.
BOSS SOLUTION provides all kinds of web application, design and development service.
© 2023 Copyright, All Right Reserved, by BOSS SOLUTION
