Category Archives: 1.02-CSS

CSS Box Model

CSS box model is a box that wraps every HTML element. It contains margins, borders, padding and the actual content. Following image shows the shape of the CSS box model. Here Margin: actually clears the area outside the border. It is Transparent Border: Border wraps the padding and content i.e. padding and content placed inside… Read More »

CSS Height and Width

We use height and width properties for defining the height and width of an element. Both height and width properties can be set to auto. This is default value and in this case browser will calculate the height and width. Also can be specified values by px, cm, % etc. Example div {    height: 100px;    width: 500px;    background-color: powderblue;}… Read More »

CSS Padding

CSS padding properties uses to make space inside an element. The space takes place between the content and the border of the element. Consider following image- Inside above image the orange colored border is the border line of the element, light green colored part is content of the element and between border line and green… Read More »

CSS Margin

CSS margin properties use to create space around elements. This space creates outside of any border. By using CSS we can fully control margins. CSS has properties for setting margin for each side of an element (top, right, bottom and left). Margin – Individual Sides CSS has properties for specifying the margin for each side… Read More »

CSS Borders

This property allows us to specify the style, width and color of the border of an element. Border Style The border_style property specifies what kind of border we want to display. border_style property accept following values- dotted: When we need dotted border then we will assign this value dashed: When we need dashed border then… Read More »

CSS Background Properties

The CSS background properties are used to define the background effects for elements. CSS background properties are- background-color background-image background-repeat background-attachment background-position  background-color This property specifies the background color of an HTML element. Example: File Name: StyleSheet.css h1{    background-color:red; } div{    background-color:lightblue; } p{    background-color:pink; } Inside above StyleSheet.css file we defined… Read More »

Specify CSS Colors

We can specify color of elements in CSS either by Color Name Color Values Values can be one of followings- 2.1- RGB (Red, Green, Blue) 2.2- HEX (Hexadecimal) 2.3- HSL (Hue, Saturation, Lightness) 2.4- RGBA (Red, Green, Blue, Alpha) 2.5- HSLA (Hue, Saturation, Lightness, Alpha) Specify Color by Color Name In HTML Colors can be… Read More »

CSS Color

Why colors are uses- We normally use colors for- Coloring the background Coloring the text Coloring the border 1. Coloring the background We set the background color for HTML elements. Example: <p style=”background-color:red;”> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<br> Ut wisi… Read More »

How to Insert CSS in HTML

How to Insert CSS in HTML There are three way to inserting CSS. They are External style sheet Internal style sheet Inline style External style sheet We define all required styles in one or more separate .css file and refer them in HTML page. In that case inside <head></head> section we will include the reference… Read More »

CSS Selectors

CSS Selectors CSS selectors are uses to find/select HTML element. In this case we can select an element either by its name (e.g. <p> is the name of paragraph element) or by its id attribute (<div id=”div1”> here div1 is the id attribute of a specific div element) or by it class name attribute (<p… Read More »