CSS 3 Tutorial Banner Image

An Introduction to CSS and style sheet beginners tutorial

Views: 18268

What is CSS Stylesheet?

Cascading Style Sheets, which is globally referred as CSS is a simple programming language created for simplifying the process of making web pages presentable.

CSS is used to handle feel and look of a web page, using CSS you can set font colors, element backgrounds, margin, padding, size of elements and lot more. It is a very easy to learn language yet very powerful.

Who founded and moderates CSS?

CSS is moderated by the group of people named CSS Working group within W3C. CSS has 3 versions namely CSS1, CSS2 and currently in use is CSS3 which allows huge range of presentations including media queries, animations and lot more.

an introduction to css and css style sheet

An Introduction to CSS and CSS style sheet

What are CSS selectors?

CSS selectors are mainly of 3 types by which we select elements and apply our styles or CSS rules to them. The few types of CSS selectors are:

  • ID: Id is a unique value for each element and in CSS we select an element using its id by adding hash sign and appending it with the id value of element we want to select. For example id=”my-id” we will select this element in CSS using #my-id.
  • Class: Class is not unique for elements, a single class can be applied to as many elements you want. A element with class name is selected using ‘.’ And appending it with the class name. For example class=”my-class” we will select these elements in CSS using .my-class.
  • Universal Selector (*): The universal selector applies CSS rules to every element of a html document.
  • The element type selector: The element itself can be selected using the element type. For example you want to select all div elements you can use “div” as selector, this will select all div elements.
  • Child selectors: Child selectors are used to select child of an element for instance suppose we want to select a paragraph inside div element, we will use div > p as selector.
  • Attribute selector: This is used to select elements with attributes, for example suppose we want to select all inputs which are of type text, we will use input[type=”text”] as our selector.

 

Multiple Style Rules

You can define multiple rules for an element inside a single block of CSS code, for example suppose we want to define rules for all h1 elements it can be defined using:

h1{

font-color:#BBB;

font-size:18px;

}

Applying rules to multiple elements

A single block of CSS rule can be applied to a range of elements which makes a single block to be reused as many times needed.

h1, h2, h3{

font-color:#BBB;

font-size:18px;

}

The above CSS rules sets rules for all h1, h2 and h3 elements, it is also possible to use other selectors like class, id and apply rules to them in the above mentioned way.

 

How to associate CSS in HTML?

There are many ways we can associate our CSS code with our html

  • Inline CSS
  • External CSS
  • Importing CSS
  • Media attributes

Commenting in CSS

Making comments in CSS is same like PHP, C, C++ and other programming languages you can write a comment inside your CSS code block as followed:

/*Your comments*/

Measurement units in CSS

CSS has many measurement units such as pixels, inches, centimeters, points, and so on

  • Pixel: Pixel is most used measurement unit in CSS, it defines measurement in screen pixels. Usage 100px
  • Percent (%): Percent is a common unit used in responsive design as it is not possible to know screen widths of every screen and we all need our design to adopt screen sizes. Percent values from 0 to 100 and measurement is done using screen size or the parent element size. Usage 80%
  • Cm: Defines the measurement in centimeters. Usage 2cm
  • Em: A relative measurement for the height of a font in em spaces. Usage 1.2em
  • Inches: Defines the measurement in inches. Usage 1.4in
  • Pt: A point is 1/72th part of inch and pt defines element size in points. Usage 200pt

 

Color in CSS

In CSS colors can be applied to an element using various formats refer the table below.

Color Format Syntax Usage
RGB Hex Short Code #RGB h1{color:#FFF;}
RGB Hex Code #RRGGBB h1{color:#06FF02;}
RGB Percent rgb(rrr%,ggg%,bbb%) h1{color:rgb(10%,15%,21%);}
RGB rgb(rrr,ggg,bbb) h1{color:rgb(100,115,255);}
Color Name Transparent, black, white and more h1{color:black;}

If you have any suggestions or questions contact us.

Comments: 3

Your email address will not be published. Required fields are marked with *

    1. thank you mate, i try to keep my best speech while creating posts, if you find these helpful, please do share with people