Skip to content

CSS

WHAT IS CSS?

Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable.

CSS handles the look and feel part of a web page. Note that CSS is case-sensitive so be careful with your capitalization. CSS has been adopted by all major browsers and allows you to control:

  • color
  • fonts
  • positioning
  • spacing
  • sizing
  • decorations
  • Transitions

There are two main ways to apply CSS styling. You can apply inline styles directly to HTML elements with the style attribute. Alternatively, you can place CSS rules within style tags in an HTML document.

inline-css.png

Even though the first two options have their use cases, most developers prefer external style sheets because they keep the styles separate from the HTML elements. This improves the readability and reusability of your code.

style.png

The CSS syntax consists of a set of rules. These rules have 3 parts: a selector, a property, and a value. You don’t need to remember this in order to code CSS. Once you start coding CSS, you’ll do so without thinking.

syntax-definition.png


WHAT IS SELECTOR?

A CSS selector is the part of a CSS rule set that actually selects the content you want to style. Let’s look at all the different kinds of selectors available, with a brief description of each.


ID SELECTOR

An ID selector is declared using a hash, or pound symbol # preceding a string of characters. The string of characters is defined by the developer. This selector matches any HTML element that has an ID attribute with the same value as that of the selector, but minus the hash symbol.

ID selector.png
ID selector html.png


This CSS uses an ID selector to match an HTML element





In this case, the fact that this is an <div> element doesn’t matter it could be any kind of HTML element. As long as it has an ID attribute with a value of container, the styles will apply to any HTML tag like <a>,<img><p><span> etc..

An ID element on a web page should be unique. That is, there should only be a single element on any given page with an ID of the container. This makes the ID selector quite inflexible because the styles used in the ID selector rule set can be used only once per page.

If there happens to be more than one element on the page with the same ID, the styles will still apply, but the HTML on such a page would be invalid from a technical standpoint, so you’ll want to avoid doing this.

In addition to the problems of inflexibility, ID selectors also have the problem of very high specificity.

CLASS SELECTOR

The class selector is the most useful of all CSS selectors. It’s declared with a dot preceding a string of one or more characters. Just as is the case with an ID selector, this string of characters is defined by the developer.

The class selector also matches all elements on the page that have their class attribute set to the same value as the class, minus the dot.

class selector.png

These styles will apply to the following HTML element

HTML-div.png

GROUPING SELECTORS

You can apply a style to many selectors if you like. Just separate the selectors with a comma. 

Group selector.png

The output of grouping selector will reflect all the heading tag as below

Group selector - output.png

APPLYING MULTIPLE PROPERTIES

To apply more than one property separate each declaration with a semicolon.

Multiple Selector.png

Need to know more about selector? Check out the article selectors in MDN

CSS Properties

CSS PROPERTIES AND ITS TYPES

There are hundreds and hundreds of different properties at our disposal to change the look and feel of our web pages. In this section, we’ll start at the beginning and introduce some of the more basic properties to get you started.

TEXT PROPERTIES

The font-family property allows us to change the particular font we are using. You may select any font which is installed on the client’s computer with this property.

font properties.png

Some of the more commonly used fonts include

  • Times New Roman
  • Sans Serif
  • Arial
  • Verdana

FONT SIZE

Font-size may be specified using a few different types but the easiest to work with is pixels (px).

FONT-WEIGHT

The font-weight CSS property allows us to specify how thick the lines of the characters are. It may be one of the following values

  • lighter
  • normal
  • bold
  • Bolder

Some font families only have normal and bold weights. In this case, if you specify lighter it will default back to normal and if you specify bolder it will default back to bold.

COLOR PROPERTIES

The color property allows us to specify the color of the text.

BACKGROUND COLOUR

The background-color property allows us to specify the background color for the element.

Background color.png

Picking good colors for your content can have a huge impact on how it looks.

BOX MODELING

Spacing is another area which is easy to implement but hard to master. There are a lot of subtle little details to understand once we start creating complex layouts.

css-box-model.gif

PADDING

padding refers to space around our content. We’ve included the background-color property here as well just to make it a bit easier to see what is happening.

We may specify the padding in 3 methods:

  • A single value – in which case it will be applied to every side.
  • As two values – in which case the first unit specifies the top and bottom padding and the second unit the left and right padding.
  • As four values – in which case the first applies to the top, the second to the right, the third to the bottom and the fourth to the left.

MARGIN

A margin is similar to padding in that is affects the spacing around the content. It is a second area outside the padding, however.

BORDER

The border is in between the padding and margin.
The various aspects of the border which you may control are:

  • It’s in width.
  • It’s in color.
  • It’s style (none, dotted, dashed, solid, double, groove, ridge, inset, outset).
class selector.png

For more reference on CSS SYNTAX and CSS PROPERTIES

Mostly Used CSS Properties

https://zellwk.com/blog/9-important-css-properties-you-must-know/

Happy Learning! 😇