Top 5 Basis css3 properties you must familiar

1) Box-shadow

Box-shadow commonly used css3 property in the websites. If we give the shadow to Block level elements(like divs), Also , you can use RGBa and HSLa values for the color, for example, a 50% transparency of black.

-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0, 0.4);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0 .4);
box-shadow: 10px 10px 5px 0px rgba(0,0,0, 0.4);


Box-shadow: x-offset(horizontal) y-offset(vertical) blur spread color(rgba,hexadecimal);
Continue reading

Why em instead of px?

Just quick review: Many of us used px instead of em and still do is as a result of they need management. They don’t wish or can’t cater for a user setting personal font preferences. It’s terribly exhausting to code a style that appears sensible across several font sizes.
At the time of constructing the website, we wish to tell the browser but the things is,
heading is higher font and the paragraph has high. Pixels have perpetually created excellent sense because the chosen unit of measurement; we’re outputting to a screen, thus what else would we tend to use?! However, it seems that pixels square measure inherently inflexible. And it seems that being inflexible is not nice for the online.
Continue reading

Css Text Formatting And Font

Text Align

The text-align property is used for given alignment to text inside the inline or block elements. Text-align properties are different values: left, center, right, justify and interit;

  • Lefttext-align left is default value. Content are started from left side of element.
  • RightContent is started from right side of element.
  • CenterContent are center from left side and right side of element.
  • JustifyContent are cover left side edge and right side edge of element.
  • InheritThis value would be depend on the parent div text-align properties.
h1{
text-align: left; 
}
p{
text-align: justify; 
}

Continue reading

Css Font

Font attribute is use for giving a size, style, font-family, weight and line-height of a text. We can specific font attributes as a shorthand and individually (longhand) code.

Font family

The Font-family attribute specified with the font family names and/or with generic family names Question is? , What is difference between font-family name and generic-family names? “Arial”, “Open sans” are font-family on the other side generic-family are ‘serf’, ‘sans-serif’, ‘fantasy’, ‘monospace’ and ‘cursive’. Font family attribute values are starting with font you want, and end with generic family. If fonts are available on the system then it works on browser, otherwise browsers pick the generics family.

h1{
    font-family: "Open Sans", Arial, serif;
}

Continue reading

Background Using Css

In our last tutorials, we discussed about the css selectors. In this tutorials and further tutorials, how we apply the css properties on the selectors. Let’s start with the background properties.

Background properties are using shorthand and longhand properties.

Shorthand Example:


Background: background-image | background-position | background-repeat | background-size | background-origin and background-color.

Continue reading

Css Selectors?

Css selectors are based on the CSS rule, with selector we give styles to particular html elements. These selectors are defining in the form of id, class, type, attribute and more.
Selectors are not start with a number.

Elements Selector:

Elements Selectors select the style only html elements. A selector of p has selected the all p elements of the html documents. In the following example styles will apply only ul element not div element.

Continue reading

WHAT IS CSS?

CSS(Cascading Style Sheet) was first developed in 1997, as some way for internet developers to outline the design and feel of their websites.CSS is a style language that defines layout of hypertext mark-up language documents. As an example CSS covers font’s family, size, colors, margins, line-height, height, width, background pictures, advanced positions and plenty of alternative things. CSS is one among the foremost powerful tools an internet designer will learn as a result of with it you’ll have an effect on the complete mood and tone of an internet website. CSS is supported by all browsers nowadays.

CSS Syntax

A CSS rule set consists of a selector and a declaration block, A property and value combine is termed a declaration, and any CSS engine calculates that declarations apply to each single element of a page so as to befittingly lay it out, and to style it.Both properties and values are case-sensitive in CSS.
Continue reading