Website development is not a job for people with weak nerves. In addition to knowledge, you need to have creative thinking, the makings of a perfectionist and filigree accuracy in page layout. CSS in this question is simply irreplaceable. And every webmaster needs to know its basics.
What is CSS?
Those familiar with HTML need not be told that this is a page markup language. But its creators decided to add tags in it that are responsible for the appearance and design. But only with this approach, the page code became too voluminous and almost unreadable. Naturally, this path led nowhere, so a comprehensive decision was made: HTML is responsible for page layout, CSS - for visual design.
The CSS abbreviation stands for Cascading Style Sheets . It consists of parameters that are responsible for the visual design of objects on the page.
CSS Benefits
A cascading style sheet allows the webmaster not only to create a beautiful resource, but also to make the code readable, significantly reducing its size. Using CSS, you can set parameters that are impossible in the HTML layout of the page.
With CSS, you can literally in a few clicks change the appearance of the resource pages. This is very convenient, especially if the site is multi-page. All design changes are made in the cascading style sheet, and not by changing the parameters on each page of the resource. And only thanks to CSS can block markup be implemented.
CSS connection
Speaking about the basic principles of CSS, the first thing you need to learn is to connect a cascading style sheet to an HTML file. This process is quite simple. The first step is to create an HTML document. For those who do not yet know, they create it in the Notepad program. Then, using the "Save As" function, you must specify the HTML extension.
The cascading style sheet is created in exactly the same way, only the file should be given the css extension. The resulting document must be saved in the same folder as the HTML files. Suppose a style sheet document is called style.css. To connect it to an HTML document, you must use the <link> tag, which is responsible for connecting external files. Between the <head> tags, you must enter the following:
Perhaps this is one of the most convenient ways to connect external files.
CSS rule
Learning CSS markup should begin with a study of the syntax. There are no tags, scripts, or parameters in the cascading style sheet. There is only a rule to follow. It consists of a selector and a block of styles. Suppose, in the cascading style sheet, the position is set: body {background: black; color: white}.
Here body is the selector responsible for styling the body of the site; background: black and color: white are properties and their values. They are written with a semicolon. This position makes the background of the site black and the text white.
Selectors
Well, we continue the intensive introduction to CSS. Page layout will be difficult to do without knowledge of selectors. If everything is clear with the properties and their values, then additional knowledge about the selectors will help to make the desired page layout.
What you need to know about selectors? Firstly, their varieties:
- Identifier. The names of page elements can be used as selectors. In the case when, for example, it is necessary to highlight a paragraph of text in a different color, an identifier is added. It is set by the id parameter.
It is worth remembering that one identifier can be used only once. In this example, the selector is called pink, if you need another identifier, then you just need to give it a different name (pink2, green, etc.).
Classes . A class selector is used if you need to set the same parameters for several objects. For example, for two paragraphs of text you need to set a red color.
Objects with classes can be any number.
For the same object, you can specify a class and an identifier - this does not contradict CSS markup. But since the identifier takes precedence, it will be precisely his style that will be used for the object. When marking up a page in CSS, this is worth considering.
Identifiers and classes can be applied to any objects. And if there is a need to set one style for text and pictures, then you can omit the element name, as it was in the example (p # pink, p.red). You can simply put a point or a grid. Also selectors can be grouped. For example, h1, h2, h3 {color: red; font-sixe: 17px}.
Page Layout
Studying page layout, you can understand that there are several types of it:
- Tabular. When there was no cascading style sheet, this was the main markup. It allowed to place resource objects as accurately as possible from each other. But the code is too large and poorly indexed by search engines. Another drawback of this method is the download speed. Until the entire table loads, the user does not even see the beginning of the text.
- Blocky. Now this is the main way to layout pages. Its use became possible only thanks to the development and improvement of the style sheet.
The advantages of block layout
CSS block layout of the page has several compelling advantages. Firstly, the style of objects is separate from the HTML document, which significantly increases the readability of the code and allows you to quickly make visual changes. Secondly, it is possible to impose one layer on another, and this facilitates the positioning process several times. Naturally, such sites load faster and are indexed by search engines. CSS page layout makes it easy to set up modern visual effects.
The only drawback of this approach is the different “understanding” of browsers. Some display the resource in the form in which the webmaster sees it. But there are browsers that distort the image, so with a large number of classes and selectors it is necessary to use hacks, which will make the code cross-browser.
How to make a block layout of the site?
The first thing to start with is creating a layout. This should be a regular image with the psd extension. After its creation (acquisition or download), it is necessary to cut the image into blocks and place it in one folder (preferably a separate one). These fragments will be used as a background for blocks.
In the HTML document for the block layout use the <div> tag. Everything that is within its boundaries is usually called a layer, and the format of this layer is specified in the cascading style sheet using classes or identifiers.
The first thing to do after the site layout is cut into parts, in HTML, set the site structure using the <div> tag, and assign a selector for each layer. For example, if this is a menu, then write: id = menu. Then you need to connect the cascading style sheet and set your own parameters for each layer. The simplest code is as follows.
Set the parameters
The example clearly shows how parameters are set for CSS blocks. The positioning of the page layout is set in pixels, although in most cases it is better to use percentages. In the browser window, this site will look like “tailored from different parts of the canvas” since in the example only the color of the block area was used. But if you replace it with a background image, you can get not only a beautiful, but also quite functional product.
Between the <div> tags you can write any necessary information with the desired formatting. Any text written within this tag is immediately overlaid on a formatted block. Objects between the <div> will automatically decrease, so as not to exceed the size of the block.
This example is just a small part of everything a webmaster will have to face when working on the quality characteristics of a resource. When creating a good web resource, hacks can often be used to acquire cross-browser functionality. You can edit page codes in special editors, which greatly simplifies the work, although it does not save the webmaster from the need for manual editing.
Everyone can create a site on their own. The main thing is to understand that both CSS and HTML were created by people and are intended for people. The basics of page layout are accessible to everyone, and the creation of web resources is not only the prerogative of the elite, but it can also be quite an ordinary activity of everyone.