Basic CSS

Cascading style sheets provide additional options for markup of the HTML document and freedom to create a unique design for Web pages.

Before you begin to learn CSS, you should already have a little experience with HTML, meaning that you have already created simple pages and are familiar with the basic HTML tags for the markup.

Default Styles

When the browser processes HTML, it uses the default style for rendering HTML elements on the Web page. To understand what a default style is, consider as an example elements <h1> - <h6>: the headers are block elements, occupy all available widths in the parent element, have a line break before and after the element, the header text is displayed in bold and has a certain size, depending on the level of the header, all this together is the default built-in style for headers.

With CSS, you can override the default style set for elements on your own, creating a unique style for the elements of a Web page, such as changing the color of the title text and font size, highlighting the image Red frame, etc.

What is CSS?

How useful are style sheets placed in a separate document? The answer is very simple, you can collect all the styles that are used on the site, into one external file with the extension .css and link it to all pages of the site. After that, when you edit the style, the changes instantly affect all the elements on the pages of the site where there is a link to this external file with styles. This way, you can completely change the appearance by editing a single style sheet file, which makes it much easier than editing the styles on each page separately.


CSS and HTML are two different languages for different purposes.

When writing HTML code for CSS, selecting tags, look at the role that a text fragment plays on a web page, rather than the appearance that text takes because of this tag.

Applying CSS for the design of a web page, you use HTML only for its intended purpose, that is, for marking a web page into logical fragments, without worrying about the formatting and appearance of the page.

A small example of using CSS:

Positioning the image using CSSUsing styles, the picture was positioned on the left side, and the text was resized, color, and the visual effect of the shadow was applied.

In Internet Explorer 9 and earlier versions, a property that adds a shadow to text is not supported.

Copying materials from this site is possible only with the permission of the site administration and
when you specify a direct active link to the source.
2011-2018 © | ruen