Css style

An introduction to Cascading Style Sheets (CSS)

The acronym CSS stands for “Cascading Style Sheets”. CSS is used to style websites and apps used on all devices. The stylesheet is commonly used with HTML and a front-end programming language such as JavaScript.

CSS can be implemented in one of three ways: inline, internally, or externally. While external CSS is the recommended approach, there are cases where the remaining two implementation methods might be more convenient.

In this tutorial article, you will learn all the basics of CSS to start building apps today.


When to use the different CSS implementation methods

Inline CSS is the ideal implementation method when the intention is to include only one or two style preferences on a web page, along with a few other niche cases. The inline CSS method uses the style keyword with a CSS property to get a specific result.

If you intend to change the color of a single header to red, inline CSS may be a good option. A niche case, as mentioned above, would be when creating HTML layouts that consist mostly of tables (an obsolete practice).

Using the Inline CSS Example

Main Heading

The above code line will display the text “Main Header” coated in red color. This is quite possibly one of the only practical reasons to use CSS inline as there is usually only one. h1 item on a given web page.

VIDEO OF THE DAY MAKEUSE

If you intend to coat it all h2 elements on a web page with yellow color. You will need to use CSS style keyword, with the Color property and its value (yellow) on each element. However, a more efficient way to accomplish this task is to use internal CSS.

Using the internal CSS example


Place the above code in the tag in your HTML file will ensure that all h2 the elements of this file are coated in yellow. The internal CSS is separated from the HTML code, which makes the method more efficient as it makes it easier to target different groups of elements.

So why is the external CSS implementation method still the most recommended approach? Separation of concerns. With external CSS, your CSS code is completely separate from your HTML code, ensuring scalability for large projects and making the testing process more efficient.

Using an external CSS example


Insert the above line of code into the tagging your HTML file will make it easier to style your web page using the external CSS method. The only aspect of the above code that will change is the value assigned to the href property, which should always be the name of the CSS file (including the .css extension).

Related: What Are Cascading Style Sheets For And What Is CSS For? With your CSS file linked to your HTML document, you can now start writing CSS code in your CSS file. At this point, the only difference between the internal CSS example above and the external CSS is the style label. Therefore, inserting the following code into a CSS file will produce the same result as the internal CSS example above.


h2{
color: yellow;
}

Explore the basic CSS structure

The basic CSS declaration contains seven essential elements, as you can see in the example below. They all work together to achieve a specific set of style preferences.


Basic CSS structure

The selector

In a CSS declaration, a selector can be either a username, a to classify, an element or, in certain special cases, a pseudo-selector. In the CSS structure above the a The element is used as a selector, which means that all links on a web page will be covered in red. Essentially, the purpose of the selector is to identify the element (s) that need to be styled.

Start and end of the declaration

The start and end of the declaration are important because they contain all of the style preferences that apply to a specific selector. The two elements are represented by a pair of open and closed braces. A good way to remember to use a start or end of a declaration is to remember that if you have an open brace, there must be a corresponding closed brace, and vice versa.


The property

The CSS property in a declaration structure can be one of over a hundred different property types. The type of property used in the CSS structure above is Color and this property targets text on a web page. If you’d like to learn more, check out our full list of CSS properties and how to use them.

The property / value separator

While it may seem small and insignificant, the property / value separator is just as important as any other part of the CSS structure. If there is a case where this element is forgotten, the entire CSS declaration will not execute.

The value

The value of the CSS property represents the exact style you want to apply to a given property. The values ​​that can be used depend on the type of property. For example, the property used in the structure above is Color, which means that there is only one type of value that can be applied to this property, a color name. A Color The value can be presented in one of four forms: a word value (as in the example above), a hexadecimal value, an HSL value (Hue, Saturation, Brightness), or an RGB value (Red, Green Blue).


The declaration separator

The declaration separator indicates that you are at the end of a specific style declaration. In the structure above, there is only one declaration separator, but there can be more. It all depends on how many CSS properties you intend to use on a to classify, username, or element.

What are identifiers and classes?

identifiers and Classes play a fundamental role in the CSS styling process. Like HTML, CSS elements identifiers and Classes are used as selectors in a CSS declaration. However, Classes and identifiers take precedence over an HTML element.

The general rule in CSS is that the last style declaration you add to a file will overwrite any that were there before. Therefore, if there are two statements with a h2 selector in a CSS file, the declaration that is added last replaces the ones that were there before.


However, if this h2 the element has a username which is used as a selector in a CSS declaration, regardless of its position (before or after) in a CSS declaration which has the h2 element as selector, the style preference in the username declaration will always take precedence over the element. In short, a username will replace the other style selectors.

It is important to remember that in a CSS declaration, identifiers start with a pound sign and lessons begin with a period. The most significant difference between a username and one to classify Is it a username is unique, while a to classify can be duplicated. For example, a collection of

the beacons can receive the same to classify Last name; However, the username of each
the tag must be unique.

Explore the different types of selectors

There are three basic types of selectors: single, multiple, and nested. So far, this article has largely covered unique selectors.

When using CSS, there will be cases where you would like different elements at different positions on a web page to have a similar style that is different from the general style applied to the entire web page. In these cases, knowing how to use multiple selectors will be useful.

Basic HTML template example






Document




Welcome


Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit odit voluptates
dignissimos voluptatibus tenetur. Repudiandae, animi corporis! Architecto
tempora voluptates nulla officia placeat quisquam facere at! Quod dolore doloribus eos!



About


Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit odit voluptates
dignissimos voluptatibus tenetur. Repudiandae, animi corporis! Architecto
tempora voluptates nulla officia placeat quisquam facere at! Quod dolore doloribus eos!



Title


Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore aspernatur vel dicta quod quibusdam!
Ea delectus sit, laboriosam eos aperiam asperiores? At ad laborum illo inventore quos est dolores
impedit fugit asperiores repellendus harum maxime voluptate sit nulla eaque officiis fuga animi,
perferendis in earum iure dolorum laboriosam enim reiciendis! Eum cum delectus est tenetur corrupti
mollitia, minima, magni at iusto id necessitatibus harum ratione, ipsum doloremque deleniti ex eligendi
impedit hic maxime? Eius modi optio ad, nisi tempora sapiente?



Title


Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore aspernatur vel dicta quod quibusdam!
Ea delectus sit, laboriosam eos aperiam asperiores? At ad laborum illo inventore quos est dolores
impedit fugit asperiores repellendus harum maxime voluptate sit nulla eaque officiis fuga animi,
perferendis in earum iure dolorum laboriosam enim reiciendis! Eum cum delectus est tenetur corrupti
mollitia, minima, magni at iusto id necessitatibus harum ratione, ipsum doloremque deleniti ex eligendi
impedit hic maxime? Eius modi optio ad, nisi tempora sapiente?





If you look closely at the HTML file above, you will see the dynamics that exist between identifiers and Classes. With reference to the file above, if you want to apply the same style to the on section and articles on the webpage only, the following CSS code will accomplish this.

Example of using multiple selectors


#About, .content{
color: white;
background-color: darkcyan;
}

When using multiple selectors, you should always separate each selector with a comma. The above example has two selectors, one username and one to classify. If the comma following the on username is missing, the CSS declaration will not execute.

Going back to the basic HTML template example above, there are two tags present — one in the welcome section and one in the about section. If your goal is to target just one of these tags, a nested selector should be your preferred method.


Examples of using nested selectors

#Welcome p span{
color: red;
}

The nested selector above contains a username and two HTML elements. As you can see in the example above, a nested selector gives you the ability to target a specific item within a group.

Therefore, only the span section in the

label of the div with the welcome id will be coated in red color.

Whether you use a styling language like CSS or a programming language, you absolutely need to know how to write a comment. Feedback is essential in enterprise-level projects where multiple developers are working together, and it’s also useful during small-scale development.

A CSS comment contains two slashes, two asterisks, and a comment section.

/* This is how you write a single line comment in CSS */

/*
This is how you write
a multi-line comment
in CSS
*/

And after?

This article provides you with the fundamental components of CSS. You can now use an identifier:

  • One of three CSS implementation methods
  • All the elements of a CSS declaration
  • The three basic types of selectors
  • CSS comment

Yet, this is only the beginning. CSS has several frameworks that will help you develop a better understanding of the language. The only challenge is deciding which one is right for you.


Tailwind-CSS-vs.-Bootstrap-Featured
Tailwind CSS vs Bootstrap: which is the best framework?

When choosing a CSS framework, it’s important to find the one that meets your needs.

Read more


About the Author