Css learn step by step

Many people contact me asking for CSS tutorials. It’s worth staying up to date.

This article will cover the basics of CSS and provide resources for further reading on key areas in modern CSS. But I will focus on the key areas that will help you understand the rest.

Language Fundamentals

You don’t need to remember values and properties for CSS.

Selectors, More Than Just Class

A selector does the same thing as it sounds: it selects a section of your document to apply CSS rules. However, many advanced selectors can be used to locate elements in a document based on their position. It could be that they are located in the odd or right after a table.

Selectors behave like you have applied a particular class to a document. For example, p acts like you have added the first _p elements of a class. These are pseudo-class selectors. They behave as if an element was dynamically added. The pseudoclass selector::firstline behaves the same as if you wrap a span around the first line. If the line’s length changes, it will apply again. If the element was inserted, this is not true. The::first-line selector then selects the element’s first lines. It acts as if a span was placed around them to make them bolder or change their colors.

Inheritance and Cascade

Multiple rules can be applied to an element. The cascade decides which rule will win. It determines which properties will be passed to child elements. Different selectors can have different specificities, which is what determines who wins when there’s more than one selector that can be applied to an element.

NOTE: To better understand these concepts, I recommend The Cascades and Inheritance (MDN Introduction to CSS).

Your browser DevTools may be able to help you if you are having trouble getting CSS to apply on an element. The following example shows how to do it. Let’s take a look at the example.

The Box Model

CSS is all about boxes. Each element on the screen can be described as a box. The Box Model describes how a box size is calculated. It takes into account margins, padding, and borders. This is a way that an element takes up more space than its width.

Recently, we were able to choose an alternative box model which uses the element’s height as the screen width. This makes a lot more sense in many layouts.

Browser DevTools can once again help you understand the box modeling being used. You can also see how padding, border, and width are added to the width I have chosen.

Internet Explorer used an alternative Box Model before IE6. It used padding and borders to set content apart from the defined width. Some users may find it frustrating that browsers do not calculate width differently.

CSS Tricks explains in detail the Box Model and Box Sizing. This article also explains how to use the alternate box model globally within your website.

Normal Flow

A document with HTML markings can be viewed in a browser. It will display as a single line. The HTML markings on words will display as a single sentence separated by one white space. It is aware of all the content and does not overlap.

It will make your life easier to choose to work with this behavior than against it. Your content should be readable because of the stylesheets that browsers use to respect normal flow.

Formatting Contexts

You might want to change the content of a document with normal flow.

There are two types of formatting contexts. The outer is what determines how an element interacts with other elements on the page. The inner determines what children should look like. Display, for example, sets the outer context to block and children the flexibility formatting.

Notice: The Display Specification has changed how display values are displayed. block defines the outer value, and Flex specifies the inner ).

FLOW – IN or OUT

CSS elements can either be “in the flow” (or “out of flow). Elements that are in flow have space. Other elements in flow respect space. You can move an element out of the flow by floating it or positioning it. The space is not available to other elements that are in the flow.

This applies especially to absolute items.

Floated elements can be removed from the flow. The floated components will have their shorter lines wrapped around by the content that follows. However, you can see that the elements have risen by adding a background color to the box of the next element. This will allow you to ignore the area taken up by the floated item.

MDN provides more information on out-of-flow and inner-flow elements. Blockflow layout’s regular rules no longer apply.

Layout

CSS has been used to create layouts since 1995. You can check out my article in Smashing Magazine Getting started CSS Layout.

Flexbox and grid don’t have to be incompatible. You can use flexbox and grid in different ways.

The layout is my specialty. I have written numerous articles in Smashing Magazine, and elsewhere to help you navigate the new Layout landscape. I also have a series about Flexbox. You can start with What Happens When you Create a Flexbox Flex Container. Also, a tutorial video.

Alignment

Alignment was introduced to most people in Flexbox so I have separated Layout and Alignment. These properties can be confusing and apply to all layout types.

You may explore Box Alignment online at MDN to see how it works with Grid, Flexbox, and Multicol.

Sizing

2018 was a busy one for me. I talked about the Intrinsic and Extrinsic Size specifications and how they relate to Grid and Flexbox.

Responsive Design

Flexbox and Grid are flexible layouts that can adapt to changes in viewport and component size. This makes it possible to use fewer media queries than older methods.

These are the basic guidelines for responsive design. These are the basic guidelines for responsive design.

Fonts and Typography

There have been a lot of changes in the web’s font usage over the past year.

You can also try Variable Fonts in a variety of playgrounds, including, which is a fun demo from Microsoft. Axispraxis is the most popular. The Font Playground is also a favorite of mine.

This MDN guide is very useful once you start working with Variable Fonts. To work with Variable Fonts, you can use the Firefox DevTools Font editor.

Animations and Transforms

CSS Transforms and Animation are a topic that I am interested in. Start with the Using CSS Transformations or Utilizing CSS Animations guides. Zell Liew also has a great article on CSS transitions.

Have a look at Animista to see all the possibilities.

It all comes down to how you approach animations. All of these things can get confusing. Val heads recorded the talk Choose Your Animation Adventure at An Event Apart.

Cheat Sheets should be used as a reminder and not as a learning tool.

Grid and Flexbox resources are often mentioned to me. I get many replies that they can’t do Flexbox without a cheat sheet. I have even published mine. This can make it seem like a problem with the language or confusing that a property is acting differently.

Ask why when CSS does something unexpected.

CSS can do bizarre things. It is possible to understand the basics and navigate to more difficult areas.

About the author

Kobe Digital is a unified team of performance marketing, design, and video production experts. Our mastery of these disciplines is what makes us effective. Our ability to integrate them seamlessly is what makes us unique.

Источник

CSS first steps overview

CSS (Cascading Style Sheets) is used to style and lay out web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. This module provides a gentle beginning to your path towards CSS mastery with the basics of how it works, what the syntax looks like, and how you can start using it to add styling to HTML.

Looking to become a front-end web developer?

We have put together a course that includes all the essential information you need to work towards your goal.

Prerequisites

Before starting this module, you should have:

Basic familiarity with using computers and using the Web passively (i.e. looking at it, consuming the content.)
A basic work environment set up, as detailed in Installing basic software, and an understanding of how to create and manage files, as detailed in Dealing with files.
Basic familiarity with HTML, as discussed in the Introduction to HTML module.

Note: If you are working on a computer/tablet/other device where you don’t have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as JSBin or Glitch.

Guides

This module contains the following articles, which will take you through all the basic theory of CSS, and provide opportunities for you to test out some skills.

CSS (Cascading Style Sheets) allows you to create great-looking web pages, but how does it work under the hood? This article explains what CSS is with a simple syntax example and also covers some key terms about the language.

In this article, we will take a simple HTML document and apply CSS to it, learning some practical things about the language along the way.

Now that you have an idea about what CSS is and the basics of using it, it is time to look a little deeper into the structure of the language itself. We have already met many of the concepts discussed here; you can return to this one to recap if you find any later concepts confusing.

We have learned the basics of CSS, what it is for, and how to write simple stylesheets. In this article, we will take a look at how a browser takes CSS and HTML and turns that into a webpage.

Assessments

The following assessment will test your understanding of the CSS basics covered in the guides above.

With the things you have learned in the last few articles, you should find that you can format simple text documents using CSS to add your own style to them. This assessment gives you a chance to do that.

Found a content problem with this page?

This page was last modified on Jun 30, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник