All the basics of Cascading Style Sheets (CSS)

Now, what is CSS?

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML. (Source Wikipedia: https://en.wikipedia.org/wiki/Style_sheet_language).

Many people get confused and assume it’s a programming language, but no it’s not. It’s a style language as HTML.

its syntax goes like this: you choose a selector and enclose your content also known as values in the curly braces. Example

h1 {

font-size: 90%; // semi-colon is important.

}

The basic selectors are:

1.Elements

2.Class

3.Attributes

4.ID (Not flexible as class selectors)

We use different tag classes according to our requirements, they are:

letter tags: These tags used to merge letters together in the words. Example: <span>M</span> // closing the tag with slash is important.

<span>E</span>

<span>R</span>

<span>G</span>

<span>E</span>

Output: MERGE

color tags: color class is used to give color to your tags. Example:

selector {

color: Magenta;

}

size tags: size class is used to change the size of the tags. Example-

selector {

font-size: large; //you can set font-size in pixels and percentage

}

There are various fun tags that you can use to make your content look attractive. Some of the Large tags also known as signs, when used do wonders. Rotating signs and Spinning signs are two examples.

  • h1, h2, h3, etc. are headings.
  • If you are writing a paragraph you use <p> </p > tag same as html.
  • <div> </div> tag is used to create a division or section.
  • * symbol is used to define the font family.
  • The best way to load CSS is External where you will give a link under link tag.
Photo by Pankaj Patel on Unsplash

Example: <head>

<body>

<h2 color: “Red”, font-size: “10px”>The basics of CSS </h1>

</body>

</head>

These are all the basics you need to know to get started on CSS. It’s a very easy and creative styling language. The more you use creativity, the more your webpage will be attractive and presentable.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store