CSS (Cascading Style Sheet) : class 10th notes

By ·

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
 <link rel="stylesheet" type="text/css" href="style.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;
    }

No comments:

Post a Comment