What is the example for CSS

CSS basics

CSS (Cascading Style Sheets) is the language you use to design your website. CSS basics walks you through the basics of this stylesheet language. We answer questions like: »How can I change the color of my text? How can I display this content exactly at a certain point? How can I add background images and colors to my website? «

What is CSS really now?

Like HTML, CSS isn't really a programming language. It is also not a markup language, but a stylesheet language that allows you to define the appearance of elements on the page. For example, you need the following CSS code to select all paragraphs () and color their content red:

Try it out: Copy these three lines of CSS into a new file in a text editor and save the file under the name in the directory.

But we still have to link the CSS in the HTML document, otherwise the CSS file would not be taken into account by the browser. (If you haven't followed our project from the beginning, read Using Files and HTML Basics first to see what to do before that.)

  1. Open the file and paste the following line somewhere in the header (between the and tags):
  2. Save the file and open it in a browser. It should look like this example:

If the paragraph is red now: Congratulations! You have now written and integrated your own CSS file for the first time!

Structure of a CSS rule

Now let's take a closer look at the CSS from above:

The whole structure will Rule set (or often just called the "rule").

Now to the names of the individual parts:

Selector
The HTML element name is right at the beginning of the rule. He selects the elements to be designed (in this example). To design another element, you just have to change the selector.
declaration
A single rule like indicates which property of the element is to be designed.
Property
The way in which the selected HTML element should be designed. (In this case is a property of the element.) In CSS, you select which properties you usually want to set.
Property value
To the right of the property, after the double point, is the value the property. This reflects one of many possibilities how the property can change the appearance of an element. (There are many other values ​​for besides).

Note the other important parts of the syntax! The syntax is, so to speak, the grammar of the code:

  • Behind the selector are the associated rule sets within curly brackets ().
  • A colon () must be used within a declaration to separate property and value.
  • A semicolon () must be placed at the end of each declaration.

To change several properties of an HTML element at once, separate the declarations within a rule set with semicolons, as follows:

Select multiple items

You can also select multiple items to apply a single rule set to all of them. Just write several selectors in a row, separated by commas. For example:

Different types of selectors

There are many different types of selectors. So far we only have Element selectors which select all elements of a certain type within an HTML document. But we can also use a more specific selection. Here are some other types of selectors that are commonly used:

Selector nameWhat is chosen?example
Element selector (also called tag or type selector)All HTML elements of a certain type.


Vote everyone

ID selectorElement with the corresponding ID is selected. (An ID can only ever be assigned to a single element within a document)


Choose or

Class selectorElement (s) with the corresponding class are selected. (Classes can be assigned to several elements within a document)
Choose and
Attribute selectorElement (s) with the appropriate attribute are selected.
Choose, but don't
Pseudoclass selectorsElement (s) of a certain type, which are in a certain state (e.g. mouse pointer is over the element)
Selects only when the mouse pointer is hovered over it.

There are many more selectors. You can find them all in the following list: Selectors (en-US).

Font and text

Now that we've looked at some CSS basics, let's start adding more rule sets and properties to our file. First, let's change the font to make our text look better

  1. In a previous article you selected a font from Google Fonts, and you should have saved the associated code somewhere. Paste the element in the header of your index.html file (between the and tags). The element should look like this:
  2. Delete the existing rule in your file. It was a good test, but red text doesn't look so nice.
  3. Instead, add the following lines to the CSS file. Replace 'placeholder' with the font you have selected on Google Fonts (means something like "font family" and indicates the fonts you want to use). This rule sets a global font () and font size () for the entire website, since all other elements are contained in the element. The properties and are passed on to the elements within an element:

    Note: A comment added what "px" means. Everything in a CSS document that is between and is a CSS commentwhich the browser ignores. Comments are intended for you, so you can make helpful notes here.

  4. Now we set the font size for the HTML elements containing text, and. We also center the text from our headings and change the line height () and the letter spacing () to make the text of the and elements a bit more readable:

You can change the font size as you like via the value in front of 'px'. Your website should now look something like this:

Boxes, boxes everywhere - the CSS box model

One thing you will notice as you write CSS code is that it often revolves around the design of boxes - you will determine the size, color, position, etc. of boxes. Most of the HTML elements on your page can be thought of as boxes or boxes that sit on top of each other.

Unsurprisingly, the CSS layout is based on the box model. Every box that takes up space on your website has the following properties:

  • , the padding: this is the space directly around the content of the element (e.g. directly around a paragraph

    around it)

  • , the frame: a line that sits just outside the
  • , the outer distance: the space outside the frame

We will also use the following properties here:

  • , the width of an element
  • , the color behind the content and the element
  • , the color of the content of the element (mostly text)
  • , gives a shadow to the text inside the element
  • , Changes the way the box is displayed (we will look at this property in more detail later)

Now let's add a little more CSS code to our example! Add the following new rules to the end of your CSS file. Don't be afraid to experiment with the values.

Change the background color for the whole page

This rule set changes the background color all over the page. Change the background color to what you chose when you planned your website.

Give shape to the body

Now we turn to the element. Here we have some new declarations, let's take a closer look at them:

  • - The width of the element is set to 600 pixels.
  • - If you set two values ​​for the properties or, then the first value stands for the distance upwards and down (which is in this case) and the second value stands for the distance to the left and to the right of the element (in this case we set the value to, which will evenly divide the available space on both sides of the element). You can also use only one, three or four different values, how this affects the element can be found in the documentation.
  • - this sets the background color of the element. A reddish color has been chosen here, but you are welcome to choose a different color
  • - We have set four values ​​for the padding in order to create some space around our content. We do not set any spacing at the top, but we set 20 pixels each on the left and right side, as well as at the bottom. The values ​​are set in the following order: top, right, bottom, left.
  • - this puts a 5 pixel strong, solid, black frame around our element.

Positioning and design of the main heading

Let's style the element. If you look at your website in the browser, you will notice that there is a strange space above the element. This is happening since Browser style some properties automaticallyeven if you didn't write any CSS for it yourself! That sounds like bad behavior on the part of the browser, but websites that have no style sheets should also remain legible. To get rid of the automatic spacing for the element, we overwritten the browser's automatic styling with.

Next we set the top and bottom inner spacing of the heading to 20 pixels () and gave the text the same color as the background of the element.

One interesting quality is. This adds a shadow to the text content of an element. The four values ​​mean:

  • The first value in pixels sets the horizontal offset of the shadow away from the text to the right - this is how far the shadow falls: a negative value would let the shadow fall to the left.
  • The second value sets the vertical offset of the shadow in pixels. The shadow falls so far down that a negative value would cause the shadow to fall up.
  • The third value sets the radius in pixels for the area where the shadow is blurred. A larger value here means a lighter shadow effect.
  • The fourth value sets the Base color of the shadow.

Again, you can experiment with the different values ​​to see what comes out.

Center the image

Lastly, we will center the image on our side. We can do that again with, but we have to do something else to make it work. The element is a block or box, which is why it has an and. The element is a Inline element, it is not shown as a box and has no or. To turn the picture into a Block element to convert, we simply give it the following declaration:.

Note: If you don't fully understand by now, it doesn't matter. If you study CSS more, you will understand the difference between inline elements and block elements. You can read more about the possible values ​​in our display reference.

Summary

If you've followed all of the instructions in this article, you should now have a webpage that looks like this (you can view our version here):

If your result doesn't look like this, go through the article again and try to find possible bugs in your code. If you're really stuck, you can take a look at our code on Github.

We really just saw the basics of CSS here. To learn more CSS go to our CSS learning area.