HomeContact UsPortfolio

02-CSS3

CSS3

CSS is a simple design language intended to simplify the process of making web pages presentable.

CSS is the acronym for “Cascading Style Sheet” . Cascading means applying multiple rules on particular element.

In simple words, CSS is used to control the style of a web document in a simple and easy way.

CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, as well as a variety of other effects.

CSS is used along with HTML and JavaScript in most websites to create user interfaces for web applications and for many mobile applications.

CSS is the latest version of CSS.

_ __ __ __ __ __ __ __ __ __ __ __ __ __ __ __ __ __ __ ___ __ ___ __ __ __ _

CSS Syntax:

A CSS rule set contains a selector and a declaration block.

  • Selector
  • Declaration
    • Property
    • Value
css-syntax

Selector : Selector indicates the HTML element you want to style. It could be any tag like <h1>, <table>, <p> etc.

Declaration : The declaration block can contain one or more declarations separated by a semicolon. In the above example, “color: red” is the declaration. It has 2 parts, property & value.

Property : A Property is a type of attribute of HTML element. It could be color, border, font-size etc.

Value : Values are assigned to CSS properties. In the above syntax, value “red” is assigned to color property.

Example :

p {
    color: yellow;
    text-align: center;
    font-size:18px
  }

Example Explained :

  • p is a selector (it points to the HTML element you want to style: <p>)
  • color is a property, and <yellow> is the property value
  • <text-align> is a property, and <center> is the property value
  • In the above example, all <p> elements will be center-aligned, with yellow text color and keeping font-size to 18px.

DevTools

Your browser has fantastic dev tools built into it. The easiest way to start playing with them is right-click on something on the web and click “Inspect Element”. This will take you to the Elements Explorer. It lets you look at the HTML that’s on the page and the CSS that’s affecting those elements.