Introduction: what is css in html style
This article for those people who wants to know what is css in html style . In the past, much of the visual formatting of webpages was supplied by markup elements. Squarley mixing the concepts of logical and physical markup into the mess that is classic html.
CSS means cascading style sheet. Css is a designing language. It is use to create beautiful webpages. We can apply designing on html tags by using css.
We can use css in three different ways:
Inline: In this method we used css in html element starting tag with style attribute.
Ex–> <h1 style=”color:green;”>Hello world this is green heading</h1>
Internal: By using this method we need to define css in <head> section of webpage with the using of <style></style> element.
After the title tag we start style tag and write css code. In this coding we have used css on body and span element in a webpage.
External: In external method our css file and html file are different. We used <link> attribute to join a css file with a html webpage.
We can control webpages presentation with css. It gives you full control on webpages design. you can change text color, font-family, background etc.
Css is most powerful technology. css works in context of property and value. If you want to change background color of a webpage. In this case background color is a property and color name or color code is a value of that property.
What is css in html style and it’sAdvantage
- You can save your timeby using css because you can use one css file on multiple HTML elements.
- Your website speed never slow because css coding consume less space.
- Maintain a webpage in css is very easy.
- Css gives you more style option.
- We can configure a webpage for multiple devices by using css.
Try Some Examples of css
In this example we are coded background-color:lightblue; so the color of webpage background is showing Lightblue.
After this we use css on <h1> tag so the text My First Css Example is showing white on this webpage.
Then we apply css on paragraph element so the text size in paragraph showing 20px withont-family verdana.
In this example we use css box modal. The box model allows us to add a border around elements, and to define space between elements.
We use html <div> element in this example to create a beautiful box. In the starting of styleing we apply css on div element.
Background-color:gray; is used for div box background color.
Width is used to set a specific width for div box.
Border is used to define the border for div box and give a color to div border. We gave this border color value green so we are looking it green.
Margin is use for give some space to box from top and left of browser.
Some properties of Css
The CSS padding properties are use to generate space around content.
The padding clears an area around the content of an element. With CSS, you have full control over the padding. There are CSS properties for setting the padding for each side of an element .
The CSS outline properties specify the style, color, and width of an outline.
An outline is a line that is drawn around elements to make the element “stand out”.
However, the outline property is different from the border property . The outline is NOT a part of an element’s dimensions.
The element’s total width and height is not affected by the width of the outline.
what is css in html style and it’s Fonts:
The font family of a text is set with the font-family property.
The font-family property should hold several font names as a “fallback” system. If the browser does not support the first font, it tries the next font, and so on.
Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.
CSS height / width:
The height and width properties are use to set the height and width of an element.
The height and width can be set to auto (this is default. Means that the browser calculates the height and width), or be specified in length values.
Like px, cm, etc., or in percent (%) of the containing block.
The position property specifies the type of positioning method used for an element.
CSS background-repeat Property:
The background-repeat property sets if/how a background image will be repeated.
By default, a background-image is repeate both vertically and horizontally.
CSS border color:
The border-color property sets the color of an element’s four borders. This property can have from one to four values.
The border-radius property is use to add rounded corners to an element.
The border-radius property is a shorthand property for setting the four border-*-radius properties.
If you specify only one value for the border-radius property.
This radius will be apply to all four corners.
CSS3 @keyframes Rule
The @keyframes rule specifies the animation code.
The animation is create by gradually changing from one set of CSS styles to another.
During the animation, you can change the set of CSS styles many times.
Specify when the style change will happen in percent, or with the keywords “from” and “to”, which is the same as 0% and 100%. 0% is the beginning of the animation, 100% is when the animation is complete.
Tip: For best browser support, you should always define both the 0% and the 100% selectors.
what is css in html style