Sunday, 28 July 2019

CSS

07:14    


CSS

  • CSS stands for Cascading Style Sheet.
  • CSS is used to design HTML tags.
  • CSS is a widely used language on the web.
  • HTML, CSS and JavaScript are used for web designing. It helps the web designers to apply style on HTML tags
  • CSS is a language used to describe the look and formatting of a document written in a markup language.
o    A CSS rule-set consists of a selector and a declaration block:


o    The selector points to the HTML element you want to style.
o    The declaration block contains one or more declarations separated by semicolons.
o    Each declaration includes a CSS property name and a value, separated by a colon.
o    A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces. 

CSS selectors are used to select the content you want to style. Selectors are the part of CSS rule set. CSS selectors select HTML elements according to its id, class, type, attribute etc.

CSS Id Selector

The id selector selects the id attribute of an HTML element to select a specific element. An id is always unique within the page so it is chosen to select a single, unique element.
It is written with the hash character (#), followed by the id of the element.
<html>  
<head>  
<style>  
#a
 {  
    text-align: center;  
    color: blue;  
}  
</style>  
</head>  
<body>  
<p id="a"> This is my first page. </p>  
</body>  
</html>    

CSS Class Selector

The class selector selects HTML elements with a specific class attribute. It is used with a period character . (full stop symbol) followed by the class name.
<html>  
<head>  
<style>  
.center
 {  
    text-align: center;  
    color: blue;  
}  
</style>  
</head>  
<body>  
<h1 class="center">This heading is blue and center-aligned.</h1>  
</body>  
</html>  

Css types:-

Inline CSS

The inline CSS is also a method to insert style sheets in HTML document.
<html>
<body>
<h1 style="color:red;margin-left:40px;">Inline CSS is applied on this heading.</h1>
<p>This paragraph is not affected.</p>
</body>
</html>


Internal(Embedded)CSS

The internal style sheet is used to add a unique style for a single document. It is defined in <head> section of the HTML page inside the <style> tag.
<html>  
<head>  
<style>  
body
 {  
    background-color: pink;  
}  
h1
 {  
    color: red;  
    margin-left: 80px;  
}   
</style>  
</head>  
<body>  
<h1>The internal style sheet is applied on this heading.</h1>  
<p>This paragraph will not be affected.</p>  
</body>  
</html>  

External CSS

The external style sheet is generally used when you want to make changes on multiple pages. It is ideal for this condition because it facilitates you to change the look of the entire web site by changing just one file.
It uses the <link> tag on every pages and the <link> tag should be put inside the head section.
1) mystyle.css
Body
 {  
    background-color: lightblue;  
}  
h1
 {  
    color: navy;  
    margin-left: 20px;  
}   
2)one.html
<html>
<head>  
<link rel="stylesheet" type="text/css" href="mystyle.css">  
</head>
<body>
<h1>This is first page </h1>
</body>
</html>


CSS Font

CSS Font property is used to control the look of texts. By the use of CSS font property you can change the text size, color, style and more. You have already studied how to make text bold or underlined
Here, you will also know how to resize your font using percentage.
These are some important font attributes:
  1. CSS Font color: This property is used to change the color of the text. (standalone attribute)
  2. CSS Font family: This property is used to change the face of the font.
  3. CSS Font size: This property is used to increase or decrease the size of the font.
  4. CSS Font style: This property is used to make the font bold, italic or oblique.
  5. CSS Font variant: This property creates a small-caps effect.
  6. CSS Font weight: This property is used to increase or decrease the boldness and lightness of the font.

<html>  
<head>  
<style>  
body {  font-size: 100%; }
  
h1 { color: red; }  
     h2 {  font-family: serif; }   
      h3{ font-style: italic;    font-variant: normal;   }  

</style>  
</head>  
<body>  
<h1>This is heading 1</h1>  
     <h2>This heading is shown in serif.</h2>  
      <p style="font-size:large;">  This font size is large. </p> 
      <h3>This heading is shown in italic font.</h3>  
     <p style="font-weight:300;">This font is 300 weight.</p>  

</body>  
</html>  

CSS - Text

·        The color property is used to set the color of a text.
·        The direction property is used to set the text direction.
·        The letter-spacing property is used to add or subtract space between the letters that make up a word.
·        The word-spacing property is used to add or subtract space between the words of a sentence.
·        The text-indent property is used to indent the text of a paragraph.
·        The text-align property is used to align the text of a document.
·        The text-decoration property is used to underline, overline, and strikethrough text.
·         The text-transform property is used to capitalize text or convert text to uppercase or lowercase letters.
·         The white-space property is used to control the flow and formatting of text.
·         The text-shadow property is used to set the text shadow around a text.

<html>
<head></head>
<body>
<p style=”color: red;”>This is red color</p>
<h1 style=”direction: left;”>This is left side</h1>
<h2 style=”letter-spacing:5px;”>This is left side</h2>
<h3 style=”word-spacing:5px;”>This is left side</h3>
<h4 style=”text-indent:1cm;”>This is left side</h4>
<h5 style=”text-align: left;”>This is left side</h5>
<h6 style=”text-decoration: underline;”>This is left side</h6>
<p style=”text-transform: lowercase;”>This is left side</p>
<p style=”white-space:pre;”>This is left side</p>
<p style=”text-shadow:4px 4px 4px blue;”>This is left side</p>
</body>
</html>

Border Style
·         The border-style property specifies what kind of border to display.
·         The following values are allowed:
·         dotted - Defines a dotted border
·         dashed - Defines a dashed border
·         solid - Defines a solid border
·         double - Defines a double border
·         groove - Defines a 3D grooved border. The effect depends on the border-color value
·         ridge - Defines a 3D ridged border. The effect depends on the border-color value
·         inset - Defines a 3D inset border. The effect depends on the border-color value
·         outset - Defines a 3D outset border. The effect depends on the border-color value
·         none - Defines no border
·         hidden - Defines a hidden border
·         The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border).
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
p.one {  
    border-style: solid;  
    border-width: 5px;  
}  
p.two {  
    border-style: solid;  
    border-color: #98bf21;  
}   
</style>
</head>

<body>
<h2>The border-style Property</h2>
<p>This property specifies what kind of border to display:</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>
<p class="one">Write your text here.</p>  
<p class="two">This is a solid green border</p>  

</body>
</html>

CSS Margin

CSS Margin property is used to define the space around elements. It is completely transparent and doesn't have any background color. It clears an area around the element.
Top, bottom, left and right margin can be changed independently using separate properties. You can also change all properties at once by using shorthand margin property.
CSS Margin Properties

Margin:-This property is used to set all the properties in one declaration
margin-left:- it is used to set left margin of an element
margin-right:- It is used to set right margin of an element
margin-top:- It is used to set top margin of an element
margin-bottom:- It is used to set bottom margin of an element

<html>  
<head>  
<style>  
p {  
    background-color: pink;  
}  
p.ex {  
    margin-top: 50px;  
    margin-bottom: 50px;  
    margin-right: 100px;  
    margin-left: 100px;  
}  
</style>  
</head>  
<body>  
<p>This paragraph is not displayed with specified margin. </p>  
<p class="ex">This paragraph is displayed with specified margin.</p>  
</body>  
</html>  

The position Property

·         The position property specifies the type of positioning method used for an element.
·         There are five different position values:
  • static
  • relative
  • fixed
  • absolute
  • sticky

·         Elements are then positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the position value.
<html>
<head>
<style>
div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
}

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: absolute;</h2>

<p>This is first page</p>

<div class="relative">This div element has position: relative;
  <div class="absolute">This div element has position: absolute;</div>
</div>

</body>
</html>

CSS Colors

Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.
<body>

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">This my first page.</p>
<h1 style="color:Tomato;">Hello World</h1>
<h2 style="border:2px solid Violet;">Hello World</h2>

</body>
</html>

CSS Links

links can be styled differently depending on what state they are in.
The four links states are:
  • a:link - a normal, unvisited link
  • a:visited - a link the user has visited
  • a:hover - a link when the user mouses over it
  • a:active - a link the moment it is clicked
<html>
<head>
<style>
/* unvisited link */
a:link {  color: red;}

/* visited link */
a:visited {  color: green;}

/* mouse over link */
a:hover {  color: hotpink;}

/* selected link */
a:active {  color: blue;}
</style>
</head>
<body>
<p><b><a href="welcome.html”>This is a link</a></b></p>

</body>
</html>