Menu
homeInternet

CSS Basics. CSS basics in three minutes - easy and accessible to everyone. Changing page color

If you are interested in the topic of website creation, then you have probably heard more than once about CSS (Cascading Style Sheets). You may have even tried to learn this technology, because CSS skills are an essential foundation in the art of website creation. Cascading Style Sheets are one of the triad of technologies that every web developer should master (along with HTML and JavaScript).

In this regard, with this post I am starting a series of publications on CSS. I tried to compose the lessons in such a way that even a person who is a complete zero in web development can learn this wonderful technology.

Nevertheless, I believe that more experienced layout designers will find a lot of new and useful things in these lessons. I also advise you to subscribe to updates so as not to miss the release of new lessons.

Read more about what Cascading Style Sheet (CSS) is and what it is used for below.

Video version:

What is CSS?

As you know, when creating a website, we form its content using hypertext markup language - HTML (Hypretext Markup Language). Using it, we create navigation blocks and fill the web page with text, audio/video content. In general, we create the structure of the site.

After forming the content of the site, at the next stage, we move on to the stage of designing its appearance so that it is beautiful and pleasant. And also so that it looks good on different display resolutions. This is exactly why we use CSS cascading style sheets.

This means that to learn and use CSS effectively, you need to know the basics of HTML. Without this, understanding cascading style sheets makes no practical sense. If you are still not familiar with the basics of hypertext language, go through mine.

A good example

Figuratively speaking, creating websites can be compared to drawing. Before we begin to deftly manipulate the brush and canvas, we should decide what exactly will be depicted in our painting. Let's imagine that we decided to draw a landscape in which a bird will be depicted against a background of trees and mountains. We can say that at this stage we have determined the very content of the picture.


A similar situation is with HTML, with which we form the content of a web page.


Website on bare HTML, no CSS
The same site with connected style sheets

For greater clarity, let's go to some website, for example, facebook.com. The next step is to install a browser extension called WEbDeveloper. I have already installed it, but all you have to do is enter the phrase WEbDeveloper in a search engine, follow the link and click on the “Install” button in the window that opens.

I have this extension installed and controlled using the gear icon in the upper right part of the screen. I suggest on faceboook.com that you disable the style sheets and look at the content only. To do this, we go to the CSS section and click on Disable All Styles. Styles are disabled and we see how unattractive the content of this web page looks without design.


Appearance of a social network without connected CSS files

That is, now we see a site on bare HTML. To enable the css files of this page we return to WEbDeveloper and uncheck Disable All Styles.

The style sheet is connected again and we can see the content of the web page with the design.


Social network with connected CSS files

How does CSS work?

All website design rules are stored in a file with the css extension, which in turn is loaded onto the web page via the tag .

While loading the html page, through the tag The CSS file is also loaded, after which the browser begins processing it and the site is displayed according to the rules specified in this file. It describes the display properties of web page elements.

For example, through the "p" selector we specify the type, size and colors of fonts in paragraphs. To configure the first level heading fonts, we use the "h1" selector.

I think the general principle of operation is quite simple and understandable, so we won’t go into details. If some moments cause you difficulties, it’s okay; in subsequent lessons, in practice, everything will be very easy and understandable.

Why learn CSS?

I don’t think that nowadays you can find at least one more or less “decent” website without using CSS. This technology has proven itself very well and today it is very difficult to imagine the layout of a website without the use of cascading style sheets.

With its update, many HTML 4 tags are no longer used. Basically, these are tags that were responsible for the design of web pages. And there is nothing surprising here, because CSS properties are now responsible for this. If you already know the basics of HTML, the next logical step is to learn CSS. This is the stage that you cannot skip if you want to learn website layout. Moreover, it won’t take much time.

Pros of CSS

  • With the use of CSS styles, the HTML code is significantly reduced. Sometimes several times. This has a positive effect on the site’s loading speed, which in turn facilitates its promotion in search engines;
  • When updating your website design, there is no longer a need to edit each tag separately on all web pages. It is enough to change a couple of lines in the style sheet;
  • CSS opens up wide possibilities for you in the design and layout of your websites;
  • There is no need to use legacy tags. Many search engines don’t like them, and using outdated tags is considered bad manners;
  • Using CSS you keep up with the times.

How to Learn CSS Basics Quickly

In learning CSS, as in programming in general, practice plays a vital role. The more often you practice, the better you will get at it.

Greetings, dear friends! In this lesson you will learn what it is CSS, what it is needed for and how to use it correctly. This is a basic lesson from the “For the Little Ones” series, in which I will try to explain in the most understandable language the basics of document styling using CSS - Cascading Style Sheets ( C ascading S style S heets).

Cool

Stammer

Part 1: CSS Basics

This lesson is a logical continuation of the lesson "HTML Basics for Beginners", in which I explained in detail what the HTML markup language is, how it works and works, basic tags and layout rules. In this lesson we will touch on the styling of a document created using a markup language, i.e. giving a certain shape, a certain color, sequence, size of various elements and text on the page, we will consider the most effective techniques for working with cascading style sheets. Once you understand the basics, you can style HTML documents correctly and effectively on your own.

Please note that in this tutorial we will only consider CSS in the context of use with HTML documents in a web browser. You can also style other documents using different markup languages ​​using CSS. For example, styling XML in Android applications, SVG or various Desktop Environments in Unix-like operating systems.

In general, CSS is a fairly elementary formal language that was invented to describe the appearance of documents. This suggests that it is quite simple and consists of original primitive structures that are not so difficult to study. The most difficult thing is not the syntax, not the rules for writing constructs, but the huge number of CSS properties to remember that perform various tasks. Fortunately, all the rules are in English with the corresponding semantic load. A simple translation into our language gives an idea of ​​what this rule does and vice versa - when translating what we want to achieve with a certain property into English, there is a high probability that we will get the correct property. This makes it much easier to remember CSS rules intuitively. For example, if you need to set background color it is enough to translate into English, as a result of which we get background-color(individual words in CSS are written with a hyphen).

1.1 Using CSS in HTML documents

CSS is quite easy to use in HTML documents. It can be:


As I said earlier, CSS has a fairly simple syntax. Let's break it down.


The ad rules are so simple that they can be described in one sentence. First it is written selector which selects a specific element on the page, after curly braces are written properties with values after the colon, and the properties themselves are separated from each other semicolon. This is all.

Simple, isn't it?

The most difficult thing about a CSS declaration is the selector. You can learn more about how selectors are formed and how they are used in the lesson All CSS selectors in one lesson - this is a very important topic, since all the magic of selecting elements on a page is revealed here. I recommend watching this lesson without fail for all beginners.

Briefly CSS selector- (from the word select- select) is a construction with which each ad block begins and which serves to select an element or elements of the same type on the page for further styling. Most often a certain one is used as a selector Class tag, for example:

//HTML:

//CSS: .my-class ( background-color: #999; )

Here the selector is the class my-class of the div tag, which receives the necessary design in the CSS file. In this case, the background color is gray. Accordingly, if there are several tags on the page (not just div) with the class my-class, all these elements will receive the same design - a gray background of color #999.

1.3 Cascading, inheritance and priority

The principle of cascading is not difficult to understand. Let's look at an example:

//HTML

Far, far behind the word mountains in the country.
Far, far beyond the word mountains.
//CSS .parent .children ( color: #666; ) .parent ( padding: 10px; color: #999; )

From the example we see that a cascade is written in CSS, in which the class .parent comes first, after which the child class is indicated separated by a space .children, which is responsible for styling only the child element. The child tag must be nested within a tag with a class .parent. If in an HTML document we add the tag .children from div tag with class .parent, it will lose its design, since the cascade will no longer work, the structure is broken.

What do we get as a result of our example? The tag with the class .children will receive text color #666, since it has a longer cascade, and .parent will be colored with color #999. The parent class will have 10px padding, while the child class will not have this padding, since the padding property does not apply to child elements. However, if we remove color: #666; at the selector .parent .children, then its text will be colored in the color of the parent color: #999;


Cascading and inheritance allow you to style specific elements on a page and prioritize which styles are applied. Let's look at the hierarchy of priorities.

  1. Properties that have a construction at the end of their declaration have the highest priority !important. It doesn’t matter what kind of nesting the selector has, how styles are used - inline or by connecting an external file, they will have the highest priority. I highly recommend not using !important when styling, since in the process of support or even in the development process in the future, confusion will certainly arise, which can only be saved by refactoring styles. As practice shows, There's always a way not to use!important.
    Example of using!important: .my-class ( background-color: #999!important; )
  2. The next most important priority is given to inline styles, written in the tag itself through the attribute style which we looked at earlier:
  3. Styles specified in the style tag in the document itself have lower priority;
  4. Styles connected to the document as an external CSS file via a tag have even lower priority.
  5. The lowest priority, besides standard browser styles, is the styles of parent selectors before child ones, for example:
    //HTML

    Far, far beyond the word mountains.

    //CSS .my-class ( margin: 10px; ) will have lower priority for the child p than: .my-class p ( margin: 15px; ) The resulting tag

    Located in a tag with a class.my-class will receive the value of the margin property: 15px.

It's also worth noting that the number of classes or identifiers, as well as the presence of additional pseudo-classes and constructs in the selector, increases the priority for styling:

My-class.class-2 ( margin: 10px; ) will take precedence over: .my-class ( margin: 15px; )

Etc. along a logical chain.

And finally, regarding priorities, it is important to note that styles that appear in subsequent declarations further down the document also have the highest priority. For example:

My-class ( margin: 10px; ) will have lower priority than the exact same selector coming after it: .my-class ( margin: 15px; )

As a result, the last selector in the document flow will receive the property value margin: 15px, since it has the highest priority. However, if the selector of the first declaration were longer, its property values ​​would undoubtedly prevail.

As for inheritance, everything is simple. All child elements inherit some properties of the parent. You will have to find out which properties are inherited in the process of studying various properties and applying them in practice. For example, text color is always inherited by children, but padding is not.

Part 2. CSS Properties

I think there is no point in listing all CSS properties, since there are a lot of them and it is more practical to refer to the directory of all CSS properties. I recommend studying CSS properties in the HTMLBook reference.

However, let's look at the 10 most used CSS properties in layout. I took 10 large CSS files from my projects and sorted the properties by frequency of use.

CSS Property

Frequency of use

Description
color 960 times Element text color:
background-color 755 times Element background color:
font-size 524 times Font size:
opacity 435 times Element transparency level:
padding 372 times Margin size inside element:
width 356 times Width of a block element, not including borders and margins:
margin 311 times Element margins:
height 305 times Height of a block element, not including borders and margins:
font-weight 280 times Font weight:
text-align 245 times Horizontal text alignment:

Part 3: Media Queries

Media Queries in CSS is the basis for creating responsive layout, allowing you to style elements depending on the size of the screen or device on which the website is displayed. Technically Media query is a simple Boolean expression that can be either true or false. The conditions for such an expression are either the parameters of the device on which the web page is displayed or the screen size in pixels.

In this guide, we will look at the basic capabilities of media queries, which are necessary for adaptive website layout and are practically useful.

The media query is written in the style file itself or in the body of the document (style tag) and begins with a rule declaration @media. The structure of a media query is quite simple:


The condition can be either a device - all (all devices), screen, print, tv, etc., or media functions that set the device parameters or the screen resolution on which the document is displayed.

The most commonly used media functions determine the maximum and minimum screen resolution of the device:


Here are devices with a maximum screen resolution of 480px or a minimum resolution of 320px will display the tag text with the class.my-class grayed out. I gave this condition as an example; it is practically useless. Most often, you need to specify either only the maximum resolution, or only the minimum within which the property will be applied.

Among other things, as we see from the example, functions can contain conditions and, not (NOT) And only (For older browsers that do not support media queries). No logical operator or (OR), its role is played by a comma. Media functions, as we see, are enclosed in regular parentheses.

Placing properties in a media query does not give any priority, so it is more logical to place media queries at the end of the CSS document, or load with the tag link external CSS file with media queries after loading the main site styles to correctly override the latter at different resolutions or on different devices.

  1. Try to use only external included CSS files. Use internal styling only if it is necessary for the correct functioning of the website;
  2. Try to stylize only classes. Do not style identifiers (set using id="hash" and written using #hash). Try to stylize tags without classes less. For example, if you style an h3 tag, and later the SEO specialist decides that the title is not appropriate, a regular div should have the same properties with the title class and be displayed the same way. Alternatively, you can make duplicate HTML tags into classes, for example, .h1, .h2, .h3, .footer, .header, .aside and style them accordingly;
  3. Try to style elements as independently as possible, reduce the cascade chain to one block so that there are fewer dependencies on parent elements. This is necessary for the most efficient reuse of blocks on the page and their modification in other places in the layout. But without fanaticism. You should not assign separate classes to each tag in a block unless it is intended to be used independently. If you move the block to another location on the page, it should still appear and be independent of its parent. Using some kind of class naming methodology will help you with this. It doesn’t matter whether it’s a BEM methodology, or one developed based on your personal experience, or simple rules proposed by me - this is better than naming classes at random and building illogical and long chains of classes;
  4. Try to name tag classes based on what function the block performs, and not on what content it will contain. For example, if you have a section with reviews in the form of a carousel, you should not name the selectors using the words reviews, otzivy etc. It's better to call carousel-once, if you plan to display one carousel item per page. In the future, perhaps you will use this carousel not only to display reviews, but will use this code, for example, to display a list of company colleagues. In this case, the class name reviews will be somewhat inappropriate;
  5. Use CSS preprocessors, there is nothing complicated about it. My choice fell on the Sass preprocessor for quite some time and I recommend it for use. We have a good tutorial in which I tell you how easy it is to use the preprocessor and how it simplifies your life: ;
  6. Use browser default style reset or normalization, which brings standard styles to a common denominator across all browsers. I use it in my projects Normalize.css, which is part of the Bootstrap CSS framework;
  7. When you feel that you are doing too much repetitive work during the layout process, switch to using some CSS framework or develop your own with the most frequently used elements, this will speed up your work. I only use at work Bootstrap grid without stylistic design of buttons, panels and other elements. This is quite enough for effective work. The default adaptability of the Bootstrap grid is also pleasing;
  8. Experiment with the properties yourself. Open the CSS reference book and try it out. This is the only way to gain experience, remember which property does what, and bring the writing of document styles to automaticity.

Everyone who is interested in WEB technologies has heard about such technology as CSS. And they probably want to know the basics of CSS in order to be able to change the styles of their sites or pages, or simply be able to read and understand CSS files. Today we will take a look at the basics of CSS.

First, let's figure out what CSS is. As you know HTML is a hypertext markup language. And CSS, in turn, is the visual design language for this very markup.

CSS (Cascading Style Sheets) - cascading style sheets. HTML has its own visual design tools, but they are in many ways inferior to the capabilities of CSS, and even if you have a lot of pages, then imagine, you suddenly want to change the color of all the headings, you will have to make changes to all HTML files, and this is done with CSS in one line. I think this argument alone is enough to start learning CSS.

By the way, CSS is used not only for the visual design of pages marked up in HTML, but also those pages written using the XHTML markup language, and is also excellent for designing XML documents.

Since you and I are only beginners, we’ll start with the very basics, and in the future we’ll go deeper into this technology, since CSS is quite a powerful thing and it’s simply not possible to fit everything into one article, so we’ll divide the study of CSS into several lessons, with gradually delving into these cascading style sheets.

Well, let's move on to practice, and we will start with simple syntax. It looks something like this:

Design element( property: value; )

A design element is usually called a selector, but for simplicity, I indicated it that way.

To make the syntax clear, here is a simple example:

P ( color: red; )

  • p is a paragraph tag;
  • color is a property, i.e. in our case it is color;
  • red is the value, in our case it is red.

And as a result, your text in all paragraphs will turn red.

Now that we’ve sorted out the syntax a little, let’s move on to the part where we write all this, i.e. connect CSS to our HTML document.

Ways to include CSS

1. Directly in the document element itself using the style attribute, for example, if you translate the above example into the document itself and describe it in the element itself, it will look like this:

Example

This method is not convenient because, again, if you have a lot of documents, you will have to change them in all of these documents, and in each element.

2. A slightly more convenient way is to use CSS, when the style sheet is described in the document itself. The head section uses the style element, which describes the style sheet itself. For example, let's use the above example again, but using this method:

Example

The result will be the same as above. This method is sometimes used, but it is still not ideal.

3. The third method uses importing a CSS document. I have rarely seen this method used, maybe no one uses it, but you need to know about it. Here the style sheet is already described in a separate document.

Example

css-file.css is a CSS file where the style sheet is described; if it is in another folder, then you need to write the path to this file.

4. The most common way to use a cascading style sheet is to include a CSS file in your document. Almost everyone uses this method, as it is the most convenient. The CSS is connected using the link tag in the head element.

Example

css-file.css is a file in which the style sheet is described; again, if the file is in a folder different from the location of the document itself, then you need to write the path to it.

Types of selectors in CSS

So we’ve sorted out the CSS connection, now let’s move on to selectors, i.e. ways to search for these same elements in your document, in other words, if you do not need all paragraphs to be red as in the above example, but for example, some paragraphs were black, while others were red. In fact, there are nine types, but we will look at the most popular ones for now.

With element selectors ( tags) we have already met the above examples, applied to all tags:

P ( color: red; )

p – this is the element selector; there can be almost any HTML document tags, such as body, div, table, tr, td, h1 and many, many others.

In my opinion, the most popular types of selectors are using classes and identifiers. In other words, when marking up your document, you mark document elements using identifiers ( which are unique throughout the document) or bring them to the same class ( it may be repeated in the document). To make it clearer, let's give an example in which we will have two paragraphs, one of which will be in red and the other in black.

The CSS text will be like this:

#idred ( color: red; ) .black ( color: black; )

The text of the document will be like this:

Red paragraph example

Black paragraph example

For practice, connect a cascading style sheet to your document in any of the ways.

You probably already realized that identifiers in CSS are denoted using the # symbol (#idred), and classes are denoted using a dot and the class name (.black).

In an HTML document, they are designated using the appropriate tags: id for identifier and class for classes.

There are also attribute selectors, for example, if you want a specific link to be displayed in the form you need, while all other links are unchanged, then you can use an attribute selector.

CSS text:

HTML document text:

Now let’s look at another popular type of selector: descendant selectors. In other words, you indicate that this element, identifier or class has these children, i.e. it is located in one or another element which, for example, has one or another id or class. Example:

CSS text:

P ( color: red; ) div p ( color: green; )

HTML document text:

Red paragraph example

Example of a paragraph that has a child div element

You can see here that the paragraph that is in the div element has turned green, and all the paragraphs that are not in the div element will turn red.

It should be noted that descendants need to be selected from right to left, for example, we first have a descendant (div), then our desired element (p) comes.

As you can see, today we used only two properties: font-size and color. In fact, there are a lot of them, so I think that’s enough for today, in the next lessons we will continue to look at other properties and much more! In the meantime, I recommend reading a book on CSS for beginners, which describes in more detail all the features of CSS and how to use them in practice.

I hope you have begun to understand at least a little the essence of these very Cascading Style Sheets CSS. There will be more difficult lessons in the future! To make sure that CSS is a very cool thing, here is an example of a culinary site, where the main menu is implemented only using HTML and CSS, without any java scripts. I hope we will also learn to do this in the future.

Technology CSS used primarily by designers, because they are the ones who create the website design. However, it is a mistake to believe that Webmasters CSS no need to know. It is enough to recall at least an example from the description of the section on. In addition to the portability of your site, style sheets allow you to create various classic design solutions (for example, a drop-down menu). And together with they allow you to create dynamic HTML pages (DHTML), the beauty and convenience of which, at times, are simply amazing.

Of course, in order to create such things you need to get acquainted with CSS basics. And this category of the site will help you do this as quickly and efficiently as possible.

Complete course on HTML, CSS and website layout:

After reading articles on CSS basics, you will learn:

1) Syntax CSS.

2) Methods and their priorities of assignment CSS styling.

3) Types of selectors in CSS.

4) CSS Browser hacks.

5) Writing rules CSS.

6) How to create a tooltip on CSS.

7) How to change the appearance of the first letter via CSS.

8) How to set the cursor type via CSS.

9) How to change the cursor appearance when hovering the mouse using CSS.

10) How to make a submenu on CSS.

11) About replacing properties min-width V IE6.

12) About validity CSS.

13) How to set the color of visited links.

14) How to indent a paragraph using CSS.

15) How to make rounded corners through CSS.

16) How to put your image through instead of a list marker CSS.

17) How to make the background a picture.

18) How to darken the background on CSS.

19) What are child selectors in CSS.

20) What units of measurement are available in CSS.

21) How to make a pop-up window with dimming.

22) How to make an animated background.

23) How to make a beautiful text field.

24) How to change an image when you hover the mouse cursor over it.

25) What are pseudo elements in CSS.

26) What is it CSS sprites.

27) How to press the footer (footer) to the bottom through CSS.

28) How to prevent resizing textarea through CSS.

29) How to draw a triangle through CSS.

30) How to handle an event click through CSS.

31) How to set your cursor via CSS.

32) How to make a horizontal dropdown menu on CSS.

33) How to use a non-standard font on the site.

34) How to change the background of a radio button via CSS.

35) Can I use CSS3.

36) How to make a shadow on CSS.

37) How to set attributes cellpadding And cellspacing on CSS.

38) How to make div with 100% height.

39) About compatibility z-index and player Youtube.

40) Why is it bad to use -moz, -ms, -webkit and other properties.

41) Is it worth using CSS Reset.

42) How to vertically align a list marker.

43) How to make a printable version.

44) How to make cross-browser transparency on CSS.

45) What is it clearfix.

46) How to partially cancel float.

47) How to make a two-column layout with equal column heights.

48) What is adaptive layout.

49) What are media queries in CSS.

50) What is it less.

51) How to do Dog Corner Effect in CSS.

52) How to do responsive "sticky" site footer.

53) How to use Google Fonts API.

54) How to use the service Livetools.

55) How to allow or disable text selection on CSS.

56) How to change the appearance of an element to standard using a property appearance V CSS.

57) Why is it necessary page-break-inside property V CSS.

58) How center align variable width block on CSS.

59) How to do triangles in pure CSS.

60) Service by generating CSS triangles.

61) How to push the footer to the bottom of the page(positioning).

62) How to push the footer to the bottom of the page(tabular method).

63) Studying Sass. Installation and configuration.

64) How to hide an element on a page on CSS.

65) Studying Sass. Basics.

66) When to use reset.css And normalize.css.

67) Image service with powerful API.

68) How to do CSS image enlargement effect.

69) Koala- fast compilation sass files.

70) How to add filters for photos using CSS.

71) Studying Sass. Hagfish.

72) Studying Sass. Mathematical operations.

73) Animated menu icon in Sass.

74) Studying Sass. Functions.

75) What is it PostCSS.

76) How to install and configure PostCSS.

77) How to do possibility of assessment on CSS.

78) Studying Sass. Code writing style.

79) Studying Sass. Extending the parent selector.

80) 10 useful SASS mixins.

81) How to do Star Wars style intro using CSS.

82) Bootstrap 4. Introduction.

83) Bootstrap 4. Installation.

84) Bootstrap 4. Reboot.

85) Bootstrap 4. Containers and key points.

86) Bootstrap 4. Grid system.

87) Bootstrap 4. Flex properties of the grid.

88) What 5 innovations will appear in CSS4.

89) Bootstrap 4. What are Jumbotrons?

90) Bootstrap 4. Utilities and typography.

91) Bootstrap 4. Cards component.

92) Difference between class And id using a tag as an example div.

93) Unsuccessful elements web design, which should not be used.

94) Bootstrap 4. Modal windows.

95) Oh priority And inheritance V CSS on practice

96) How to layout a PSD layout using Bootstrap grid. Part 1.

97) How to layout a PSD layout using Bootstrap grid. Part 2.

98) How to use pseudo elements after and before in CSS.

99) About the features block width and height in CSS.

100) Pseudo elements after and pseudo-class last-child.

101) How to display a site on various devices.

102) Layout on a grid Bootstrap(part 1)

103) Layout on a grid Bootstrap(part 2)

104) Layout on a grid Bootstrap(part 3)

105) Layout on a grid Bootstrap(part 4)

Back in 2011, when I was finishing 8th grade, my computer science teacher and my class teacher combined 4 avid gamers, including yours truly. She brought us together to teach us how to create websites, and that’s when I first became acquainted with both , and the basics of CSS, which you will learn about right now.

CSS (Cascading Style Sheets, translated as “cascading style sheets”) is a language for controlling the appearance of HTML documents (website pages). What you see every day in the browser window is created by cascading style sheets: the background color of various website elements is set by special CSS properties; what font the text is written in is specified by special CSS properties; everything you see now while reading this tutorial is set by CSS properties.

I’ll tell you right away that the lesson will only contain the most basic styles for beginners. There will be no practice today, I want to discuss this in a separate post.

CSS selectors

A CSS style sheet consists of style rules, and the rules, in turn, consist of two elements:

  1. Selector;
  2. Ad block.

The declaration block includes: a property and the value of the property, but more on that a little later.

Now let's take a closer look at selectors. There are several types:

  • Tag selector. The selector is the HTML tag to which the style rule should be applied; div(width:100px; height:100px)
  • Class selector. The selector is the element class, which is specified in the HTML document. A dot is placed before the class name; .block(width:100px; height:100px)
  • ID selector. The selector is the element ID specified in the HTML document. The identifier name is preceded by a hash sign (#). #block(width:100px; height:100px)

In fact, there are many more of them, but we will not go deeper, since the basis of all other selectors are the ones listed above.

I won’t talk about the design of CSS rules; the picture above will tell you everything.

All CSS style rules are in the style.css file. Look for it.

CSS Properties and Values

One CSS rule can specify several properties and their values. They are listed using the semicolon (;):

Block(width:100px; height:100px; background:#fff)

To make information easier to perceive, I will list properties according to their purpose, that is, for the background - separately, for text - separately, and so on.

Let's start with the background.

Background

There are several properties to control the background of a site or an individual element.

background– the main property of the background, with which you can set up to five characteristics (values): color, image, whether the background will scroll or not along with scrolling (scrolling), control of repetition of the background image, initial position of the background image. All these characteristics are also responsible for individual properties, which are listed below;

background: url( images/hand.png ) repeat-y #fc0; /* Background color, background image path, vertical background repeat */
  • background-image– sets the background image of the site or element. Values: url (path to file) | none (cancel background image) | inherit (inheritance of parent value). Example: backround-image: url(images/hand.png);
  • background-repeat– control the repetition of the background image of a site or element. Values:
    • no-repeat (no repetition of the background image);
    • repeat (image repeat);
    • repeat-x (repeat the image horizontally);
    • repeat-y (repeat the image vertically);
    • inherit (inheriting the parent image). backround-repeat: no-repeat;
  • background-position– control the position of the background image. Values:
    • left (left);
    • right (right);
    • center (center);
    • top (up);
    • bottom (down). backround-position: left;
  • background-color– control the background color of a site or an individual element. Value: The code value of a specific color. You can find it using special online services (ColorScheme). background-color: #fff; /*White background color*/

The first main CSS property has been discussed.

Font

There are several properties to control the appearance of text, as well as the background.

  • font– the main property of a font. Can combine several characteristics;
  • font-size- font size. Specified in percentages, pixels (more commonly), points (pt); font-size: 14px;
  • font-weight– font thickness. Values:
    • bold – semi-bold;
    • normal – normal style. font-weight:bold;
  • font-family– indicates the font family. The value is the name of the font family; font-family: Impact;
  • font-style– this property specifies the font style. Values: normal (regular style) and italic (italic); font-style: italic;

Text Properties

One of the basics of CSS is managing text properties: alignment, color, line height, letter spacing.

  • text-align– horizontal text alignment. Value: justify (width), center (center), left (left edge), right (right edge) text-align: left;
  • color- text color. The code value of the color is used as the value; you can also use the English text values ​​(red, white, black) color: red;
  • line-height– line height. As a value, you can use both pixels (px) and percentages (%), as well as a special multiplier (1.5 - one and a half line spacing) line-height: 1.5;
  • letter-spacing– spacing between characters. The value can be set in pixels and normal (normal spacing) letter-spacing: 3px;

Element Alignment

You can align any site element to the right or left using one style property - float. Values: left (aligned to the left), right (aligned to the right).

Float: left;

Element Framing

Using the style property “ border” you can set the frame and visible borders. You can specify several values: border thickness (px, %), border color (color code value), border style. The border style values ​​determine its appearance:

You can also set the borders for an individual side of an element using the following properties:

  • border-bottom– bottom border of the element;
  • border-top– the upper border of the element;
  • border-right– border on the right side of the element;
  • border-left– border on the left side of the element.

The values ​​for the above are set in exactly the same way as for the main property.

Border: 1px solid #000;

Indentations

The margins between elements are specified by the “margin” property.

  • margin– sets the indentation of the element on each side. Can contain multiple values, which are specified in pixels or percentages; margin: 5px (top margin) 5px (right margin) 5px (bottom margin) 5px (left margin);
  • margin-left– indentation on the left side;
  • margin-right– indentation on the right side;
  • margin-top– top indent;
  • margin-bottom– bottom indent.

Margins around an element

The margins around an element are set by the “ padding“. It is specified in the same way as margins and has properties that set margins on one side: padding-left, padding-right, padding-top, padding-bottom.

Padding: 10px 10px 10px 10px;

Item size

You can set the height and width of an element using the “width” and “height” properties. The values ​​are numeric values ​​in pixels or percentages. You can also set the maximum and minimum possible values ​​for the width and height of an element using the properties: max-width, min-width, max-height, min-height.

Width:100px; height:200px;

So we've covered the basics of CSS. I myself only know what I listed above, so don’t judge strictly.

As you can see, with the help of cascading CSS style sheets you can do whatever you want with site elements, and these are not all the properties, there are a lot of them. If you want to study CSS properties in more detail, then use the reference book from HTMLbook.

I hope that it was not in vain that I spent several hours writing this material.

Tomorrow we will practice in the Notepad++ editor, be prepared.

Till tomorrow!

Previous article
Next article