CSS Noob to Master PART-I

CSS Noob to Master PART-I

·

3 min read

Introduction

For programers learning CSS is always a challenging task. I am here to simplify it for you guys. It will be a multipart series in very concise form.

The Basics

Syntex

carbon (1).png

This is the only syntex you need to learn for your whole CSS journey.

In example below, notice that we target class names with dot notation. eg (.blue)

The properties of elements with ids are set with # notation. eg (#unique)

Properties of elements are set directly. (eg div and body here)

Note1: id is unique in whole program. You can have multiple elements with same class name tho.

Note2: Ignore css properties for now, jus focus on syntex part.

Block and Inline Elements

Block Elements: A block-level element always starts on a new line. They consume whole width even if its size is very small. eg, all headings, div etc

Inline Elements: Inline elements occupy only sufficient width required. eg (span, img, button etc)

Inline Block elements: One drawback of inline elements is that we can't set dimensions. To overcome this inline-block elements were introduced. So basically they are combination of inline and block elements.

Note1: Ignore css properties for now, just notice how block elements and inline elements are occupying space. Also check we have set same height and width properties in css to all the three but inline elements has no effect of these dimensions.

Note2: By default all elements are classified as inline or block or block-inline. For eg div is a block element while span is an inline element by default. But we can change this behavior by custom css properties.

Box Model

CSS-Box-Model.png

So all elements follow this box model. Although its self explanatory, You can check this interactive pen for more insights.

Note: Margin and padding looks same but margin doesn't container any styles whereas padding gets the element styles applied to itself.

Conclusion

These are the basic concepts that are used while styling elements. Without these fundamentals you can't produce desired results.

You should have clear understanding of inline and block elements now. Also, box model must be clear. To get more insights just press ctrl+shift+I on chrome and there you would be able to see box model interactively. Just play with it, you will be confident with these concepts.

If css properties are not clear to you yet, don't worry we will learn about those in further blogs.

Till then stay tuned and share this blog. If you have any doubts feel free to post here or on my twitter handle. Twitter

See you soon...