Introduction to CSS

Introduction to CSS

What is CSS ?

CSS stands for Cascading Style Sheets. Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language like HTML.

It describes how HTML elements are to be displayed on screen, paper, or in other media. It can control the layout of multiple web pages all at once.

A Simple Example

body {

  background-color: blue;

}

h1 {

  color: red;

  text-align: center;

}

p {

 font-family: verdana;

  font-size: 50px;

}

No alt text provided for this image

Syntax of writing CSS

The CSS syntax consist of selector and declaration block:

To specify where CSS rule to be applied is given by using selector. Whereas, the declarations within the block determines how the elements are formatted on a web-page.

The declaration block contains one or more declarations separated by semicolons.

Each declaration includes a CSS property name and a value, separated by a colon.

A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.

CSS : Selectors

CSS selectors define the elements to which a set of CSS rules apply. It is used to find or select the HTML elements which you want to style.

There are different types of selectors:

CSS element Selector

The element selector selects HTML elements based on the element name.

example:

p {

  text-align: center;

  color: red;

}

here “p” is the element selector.

CSS id Selector

Selects an element based on the value of its id attribute. There should be only one element with a given ID in a document.

To select an element with a specific id, write a hash (#) character, followed by the id of the element.

example:

#para {

  text-align: center;

  color: red;

}

here “#para” is the selector.

CSS class Selector

This selects the HTML element of specific class.

To select elements with a specific class, write a period (.) character, followed by the class name.

example:

.table {

 text-align: center;

  color: red;

}

here “.table” is the selector.

You can also specify a particular element or elements of a class from HTML.

example:

h1.table {

 text-align: center;

  color: red;

}

here “h1” element of class “table” is selected.

CSS Universal Selector

The universal selector (*) selects all HTML elements on the page.

example:

* {

  text-align: center;

  color: blue;

}

CSS Grouping Selector

The grouping selector selects all the HTML elements with the same style definitions.

example:

p, h1, h2 {

text-align: center;

  color: red;

}

here “p”, “h1” and “h2” elements got selected and same styling is applied to all.

NOTE: These are the basic selectors, there are many other selectors which can be used. Follow up this link to know more.

To explain the code “comments” are used by adding /*comment*/, so that the code can be explained in the file.

Read More


要查看或添加评论,请登录

ASHMIT CHAUDHARY的更多文章

  • Introduction to javascript

    Introduction to javascript

    Javascript Object based language : object based means it uses items called as objects . These objects are not class…

  • The Secrets of Becoming a UX Designer!

    The Secrets of Becoming a UX Designer!

    If you’re a designer that loves working with people and coming up with innovative and eye-catching ideas, you’re in…

  • Hypertext Markup Language | HTML | Web development

    Hypertext Markup Language | HTML | Web development

    HTML HTML stands for hypertext markup language. It is the standard text formatting language used for creating and…

  • How to become a Front End Developer?

    How to become a Front End Developer?

    Roadmap to become a front end developer Coding and programming are becoming more and more popular as technology…

社区洞察

其他会员也浏览了