CSS (Cascading Style Sheet) : class 10th notes ~ JR World

Introduction

We know that HTML is used for designing webpage, in fact HTML is base on which we may have many web based technologies incorporated in a webpage which is better looking, enrich and dynamic. DHTML is one such web technologies which can creat dynamic webpages.

DHTML

DHTML Stands for Dynamic HTML which is neither a language not a web-standard, but a combination of four web-technologies namely HTML, Javascript, DOM and CSS.

HTML – For creating text and image links and other page elements.
CSS – Cascading style sheet for further formatting of text and HTML.
Javascript – The programming language that allows for accesses and dynamically control the individual properties of both HTML and Style sheets.
DOM – Dom is document Object Model. It is created when a webpage is loaded in a browser.

CSS

Cascading Style sheet (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. It is a simple mechanism for adding style, which includes fonts, color, spacing to web documents.

Advantages of using CSS

The advantage of using CSS are:

It control layout of many HTML document from one single style sheet.
It applies different layout to different media-type.

CSS – Syntax

A CSS – syntax is made of three parts:

Selector : A selector is an HTML tag at which a style will be applied.
Property : Put simply, all the HTML attribute are converted into CSS properties.
Value : Values are assigned to properties.

h1{color: blue;}

Types of Selector

The Universal selectors

The universal Selector rule renders the content of every element in whole document.

background-color: blue;

}

The Descendent selectors

This used to apply a style to a particular element only when it lies inside a particular element like <b>, <ul> etc.

ul{

color: blue;

}

The Class selectors

This used to define style based on the class attribute of the elements.

.item{

color: blue;

}

The ID selectors

This used to define style rules based on the id attribute of the elements.

#item{

color: blue;

}

The Child selectors

This is very similar to descendent but have different functionality. This rule is render to those who is direct child.

body>h2 {

color: blue;

}

The Attribute selectors

This used to apply style to HTML elements with particular attributes. Like as, the input elements having a type attribute with a value of text.

[type=text]{

color: blue;

}

Multiple Style Rules

You can define multiple styles rules to a combine multiple properties and corresponding values into a single block.

h2{

color: blue;

margin: 10px;

padding: 10px;

letter-spacing: 1em;

text-transform: lowercase;

}

The Grouping selectors

This used to apply style to many selectors, and separate the selectors with a comma (,)

h2,h3,h6{

color: blue;

margin: 10px;

padding: 10px;

letter-spacing: 1em;

text-transform: lowercase;

}

Methods of applying CSS to an HTML doc.

There are three ways we can apply CSS to HTML Documents.

In-Line
Internal
External

In-Line

The way to apply CSS to HTML by using the HTML attribute style as we have used attributes of various tags, This also known as attributes style.

<h2 style="color: blue;">Computer for class 10th</h2>

Internal

This is another way to include CSS codes in HTML Documents by using HTML tag <style>.

<style>

.text{

color: blue;

}

</style>

External

The method to link HTML with style sheet is called external style sheet. An external style sheet is a text file with the extension of .css

This code will be inserted between the head tag of the HTML file.

Font properties

Font :- The font property is used to sets all the fonts properties in one declaration.

Font Family :- The font-family property is used to apply prioritized list of fonts in a web page. If the first font in the list is not installed on the computer then the next font in the list will be displayed until a suitable font is found from the list.

font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

Font Size :- The font-size property is used to specifies the font size of text.

font-size: 1em;

Font Style :- The font-style property defines the chosen font either in normal, italic or oblique.

font-style: normal;

Font Variant :- The font-variant property is used to select normal or small-caps variant of a font.

font-variant: small-caps;

Font Weight :- The font-weight property describes how bold or heavy a font should be presented.

font-weight: bold;

Text properties

Text Indent :- The text-indent is used to add space to the first line of a paragraph.

text-indent: 50px;

Text Alignment :- The text-align property is used to align text either be to the left or right or center or justify.

text-align: center;

Text Decoration :- The text-decoration property is used to add different decorations or effects to the text. E.g. You can underline the text, or line through the text.

text-decoration: line-through;

Letter Space :- The letter-spacing property is used to give the spacing between the text characters.

letter-spacing: 10px;

Text Transformation :- The text-transformation property is used to make the all text capitalize, uppercase or lowercase.

text-transform: uppercase;

Background Properties

Background Color:- The background-color property is used to set the background of the browser window and we also apply background color to element of html like h1, p etc.

background-color: darkgray;

Background Image:- The background-image property is used to insert a image as background in a webpage.

background-image: url();

Repeat Background:- The background-repeat property is used to controls the behavior of repeating of image both horizontally and vertically. The four different values of background repeat are

repeat-x, repeat-y, repeat, no-repeat.

background-repeat: no-repeat;

Properties Related to Margin And Padding

Margin Properties:- The margin property is used to give the distance of element form each side of the neighboring element. Margin-top, Margin-left, Margin-bottom and Margin-right is used to set margin on top, left, bottom and right respectively.

margin: 10px;

margin-top: 10px;

Padding Properties:- The padding property is used to give the space around the content. Padding-top, Padding-left, Padding-bottom and Padding-right is used to set margin on top, left, bottom and right respectively.

padding: 10px;

padding-top: 10px;

Properties Related to Borders

Border width property:- The border-width property is used to set a specific size or by using one of the pre-defined values : thin, thik or medium.

border-width: thin;

border-width: 10px;

Color of border:- The border-color property is used to set the color of the border. The color can be set by : Name, Hex, RGB, transparent.

border-color: #ff0000;

Broder Style Properties:- The border-style property is used to the specifies what kind of border to display. The different values of border-style are

Dotted, Dashed, solid, double, none, hidden, etc

border-style: solid;

Broder :- The border property is a shorthand property to specify all the individual border properties in one property.

border: 2px solid green;

Float

Float is a property that force any element like image or table to float left, right, none inside its parent body with the rest of the element to around it.

img{

float: left;

}

CSS (Cascading Style Sheet) : class 10th notes

Introduction

DHTML

CSS

Advantages of using CSS

CSS – Syntax