Articles by "CSS"
Showing posts with label CSS. Show all posts
Progrramers is optimized for Web Development Tutorials, Framework7, MeanStack, MongoDB, ExpressJS, AngularJS, NodeJS, HTML, CSS, JavaScript, PHP, SQL

CSS Borders

The border property allow to specify the styling of the border of the box which representing the element. Take a look on below example:


<!DOCTYPE html>
<html>
<head>
<title>CSS Tutorials : CSS Border Examples-1</title>
<style>
 p{
  display:inline-block;
  border-bottom:1px solid red;
 }
 div{
  width:400px;
                height:120px;
  border-top: 5px dotted blue;
  border-left: 5px ridge yellow;
  border-bottom: 5px groove green;
  border-right: 5px dashed red;
 }
</style>
</head>
<body>
 <h3>The Border Property.</h3>
 <p>This is an example of simple CSS border property.</p>
 <div>Mixed border example.</div>
</body>
</html>

Above example look something like this

The Border Property.

This is an example of simple CSS border property.
Mixed border example.


There are three properties of a border can be changed:

1. Border-color: This property specifies the color of the border.
2. Border-style: This property defines the looks of border, whether should be solid, dashed, dotted, grooved, hidden etc.
3. Border width: This property defines the width (thickness) of the border.

Let’s start with border-color first.

The border-color Property


The css border-color property allows changing the color of the border surrounding an element. CSS border -color property receives only valid color names, HAX color values, RGB color values, HSC color value etc. If there is any trouble with you then you may go through the previous chapter which describes the CSS colors. CSS Tutorials - CSS Colors


<!DOCTYPE html>
<html>
<head>
<title>CSS Tutorials : CSS Border Examples-2</title>
<style>
 p{
  border-style:solid;
  border-width:2px;
 }
 
 /*-----This is color name example-----*/
 p.para1{
  border-color:orange;
 }
 
 /*-----This is RGB Color (Absolute Value) example-----*/
 p.para2{
  border-color:rgb(0,210,155);
 }
 
 /*-----This is RGB Color (% Value) example-----*/
 p.para3{
  border-color:rgb(0%,70%,10%);
 }
 
 /*-----This is HEX Color value example-----*/
 p.para4{
  border-color:#ff6678;
 }
 
 /*-----This is SHC (Short HEX Code) example-----*/
 p.para5{
  border-color:#108;
 }
 
 /*-----This is HSL (Hue, Saturation, Light) example-----*/
 p.para6{
  border-color:hsl(100, 90%, 78%);
  }
</style>
</head>
<body>
 <h3>The Border Color Property.</h3>
 <h2>Example of CSS Border-color property.</h2>
 <p class = "para1">Para 1 ... This is color name example.</p>
 <p class = "para2">Para 2 ... This is RGB Color (Absolute Value) example.</p>
 <p class = "para3">Para 3 ... This is RGB Color (% Value) example</p>
 <p class = "para4">Para 4 ... This is HEX Color value example</p>
 <p class = "para5">Para 5 ... This is SHC (Short HEX Code) example</p>
 <p class = "para6">Para 6 ... This is HSL (Hue, Saturation, Light) example</p>
 
 <span>CSS border -color property receives only valid color names, HAX color values, RGB color values, HSC color value etc. </span>
</body>
</html>


Above example look something like this

The Border Color Property.

Example of CSS Border-color property.

Para 1 ... This is color name example.

Para 2 ... This is RGB Color (Absolute Value) example.

Para 3 ... This is RGB Color (% Value) example

Para 4 ... This is HEX Color value example

Para 5 ... This is SHC (Short HEX Code) example

Para 6 ... This is HSL (Hue, Saturation, Light) example



An HTML element box has four border sides. They are individually named as:

Border-bottom
Border-top
Border-left
Border-right

Now below example will demonstrate how to color all the sides individually.


<!DOCTYPE html>
<head>
<title>CSS Tutorials : CSS Border Examples-3</title>
<style>
 div.test{
  width:200px;
  height:100px;
  border-width:5px;
  border-style:dashed;
  border-top-color:red;
  border-left-color:blue;
  border-right-color:green;
  border-bottom-color:yellow;
 }
</style>
</head>
<body>
 <h3>The Border Color Property.</h3>
 <p>This is an example of CSS border color property.</p>
 <p>Each Side of the Element Box is individually colored.</p>
 <div class = "test"></div>
</body>
</html>


The border-color property can have from one to four values (for the top border, right border, bottom border, and the left border).


<!DOCTYPE html>
<head>
<title>CSS Tutorials : CSS Border Examples-4</title>
<style>
 div.test{
  width:200px;
  height:100px;
  border-width:5px;
  border-style:dashed;
  
  /*-----Single Line for coloring each side individually-----*/
  border-color:red blue green yellow;
 }
</style>
</head>
<body>
 <h3>The Border Color Property.</h3>
 <p>This is an example of CSS border color property.</p>
 <p>Each Side of the Element Box is individually colored in single line.</p>
 <div class = "test"></div>
</body>
</html>


The border-style Property


The border of an element box can be styled with various types. Below list is possible types that can define the different style of border.
Dotted- Defines a doted border, create a series of dots.
Dashed- Defines a dashed border, creates a series of short lines.
Solid- Defines a solid border (Most commonly used).
Double- Defines double line border. Create two solid lines.
Groove- Create the effect 3D effect. Border looks as curved into the web page.
Ridge- Create the effect opposite of Groove.
Inset- Create the effect like box embedded in the page.
Outset- Create the effect like box coming out of the page.
None- Define no border.
Hidden- Defines a hidden border. It means border is not visible but pixel cover the area of webpage.


<!DOCTYPE html>
<head>
<title>CSS Tutorials : CSS Border Examples-5</title>
<style>
 div.test{
  width:200px;
  height:100px;
  border-width:5px;
  border-color:red blue green yellow;
  
  /*-----Example for Border style property-----*/
  border-style:dashed;
 }
</style>
</head>
<body>
 <h3>The Border Style Property.</h3>
 <p>This is an example of CSS border style property.</p>
 <div class = "test"></div>
</body>
</html>


All the sides of border individually styled with above all border style.


<!DOCTYPE html>
<head>
<title>CSS Tutorials : CSS Border Examples-6</title>
<style>
 div.test{
  width:200px;
  height:100px;
  border-width:5px;
  border-color:red blue green yellow;
  
  /*-----Example for Border style property-----*/
  border-top-style:solid;
  border-left-style:dashed;
  border-right-style:dotted;
  border-bottom-style:double;
 }
</style>
</head>
<body>
 <h3>The Border Style Property.</h3>
 <p>This is an example of CSS border style property.</p>
 <p>Each Side of the Element Box is individually styled.</p>
 <div class = "test"></div>
</body>
</html>


The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border).


<!DOCTYPE html>
<head>
<title>CSS Tutorials : CSS Border Examples-7</title>
<style>
 div.test{
  width:200px;
  height:100px;
  border-width:5px;
  border-color:red blue green yellow;
  
  /*-----Example for Border style property-----*/
  border-style:solid dashed dotted double;
 }
</style>
</head>
<body>
 <h3>The Border Style Property.</h3>
 <p>This is an example of CSS border style property.</p>
 <p>Each Side of the Element Box is individually styled in sinlge line.</p>
 <div class = "test"></div>
</body>
</html>


The Border-width Property


The border-width property allows setting width of the borders. The value of this property could be either a length in px, pt, em or cm or it should be set to thin, medium or thick.


<!DOCTYPE html>
<head>
<title>CSS Tutorials : CSS Border Examples-8</title>
<style>
 div{
  width:400px;
  height:100px;
  margin:10px;
  border-color:red blue green yellow;
  border-style:solid dashed dotted double;
 }
  
  /*-----Example for Border width property-----*/
 div.test1{
  border-width:10px;
 }
 div.test2{
  border-width:5pt;
 }
 div.test3{
  border-width:0.3cm;
 }
 div.test4{
  border-width:1em;
 }
 div.test5{
  border-width:medium;
 }
</style>
</head>
<body>
 <h3>The Border Width Property.</h3>
 <p>This is an example of CSS border width property.</p>
 <div class = "test1">Example - border-width:10px;</div>
 <div class = "test2">Example - border-width:5pt;</div>
 <div class = "test3">Example - border-width:0.3cm;</div>
 <div class = "test4">Example - border-width:1em;</div>
 <div class = "test5">Example - border-width:medium;</div>
</body>
</html>


Like border-color and border-style, border-width can be set individually for each side.


<!DOCTYPE html>
<head>
<title>CSS Tutorials : CSS Border Examples-9</title>
<style>
 div{
  width:400px;
  height:200px;
  margin:10px;
  border-color:red blue green yellow;
  border-style:solid dashed dotted double;
 }
  
  /*-----Example for Border width property-----*/
 .test{
  border-top-width:5px;
  border-left-width:thick;
  border-right-width:0.3em;
  border-bottom-width:5pt;
  }
</style>
</head>
<body>
 <h3>The Border Width Property.</h3>
 <p>This is an example of CSS border width property. Each side width is individually defined.</p>
 <div class = "test"></div>
</body>
</html>


The border-width property can have from one to four values (for the top border, right border, bottom border, and the left border).


<!DOCTYPE html>
<head>
<title>CSS Tutorials : CSS Border Examples-10</title>
<style>
 div{
  width:400px;
  height:200px;
  margin:10px;
  border-color:red blue green yellow;
  border-style:solid dashed dotted double;
 }
  
  /*-----Example for Border width property-----*/
 .test{
  border-width:5px thick 0.3em 5pt;
  }
</style>
</head>
<body>
 <h3>The Border Width Property.</h3>
 <p>This is an example of CSS border width property. Each side width is individually defined in single line.</p>
 <div class = "test"></div>
</body>
</html>


Mixed Example



<!DOCTYPE html>
<head>
<title>CSS Tutorials : CSS Border Examples-11</title>
<style>
 /*-----Example for Border width property-----*/
 .test{
  width:400px;
  height:200px;
  margin:10px;

 /*-----Each parameter defines individual sides - top, left, bottom and right*/
 
  border-color:red blue green yellow;
  border-style:solid dashed dotted double;
  border-width:5px thick 0.3em 5pt;
  }
</style>
</head>
<body>
 <h3>The Border Width Property.</h3>
 <p>This is an example of CSS border width property. Each side Color, Style and width is individually defined in single line.</p>
 <div class = "test"></div>
</body>
</html>


The Border Properties Shorthand


The border property is the short form of border color, style and width. Check the below example:


<!DOCTYPE html>
<head>
<title>CSS Tutorials : CSS Border Examples-12</title>
<style>
 div{
  width:400px;
  height:200px;
  margin:10px;
  } 
 /*--Border short hand property --*/
 .test1{
  border: 5px solid red;
  }
 .test2{
  border: 5px solid;
  }
 .test3{
  color:orange;
  border: 5px solid;
  }
</style>
</head>
<body>
 <h3>The Border Properties Shorthand.</h3>
 <p>This is an example of border shorthand property.</p>
 <div class = "test1"></div>
 <p>If color is not defined in border property than border default color will be black or CSS color defines the border color.</p>
 <div class = "test2">Default Color is Black.</div>
 <div class = "test3">Color is defined from CSS color property.</div>
</body>
</html>


Note: If color is not defined in border property than border default color will be black or CSS color defines the border color.

Above example first value is for width, middle value is for style and last value is for color. Check the below example for shorthand property of individual sides.


<!DOCTYPE html>
<head>
<title>CSS Tutorials : CSS Border Examples-13</title>
<style>
 .test{
  width:400px;
  height:200px;
  margin:10px;
   
 /*--Border short hand property individually for each side--*/
 
  border-top: 5px dotted red;
  border-left: 5px dashed yellow;
  border-right: 5px groove green;
  border-bottom: 5px ridge blue;
  }
</style>
</head>
<body>
 <h3>The Border Properties Shorthand</h3>
 <p>This is an example of border shorthand property, individually for each side.</p>
 <div class = "test"></div>
</body>
</html>


The Border-radius Property


Border-radius property adds the rounded corners to element box. Check the example:



<!DOCTYPE html>
<head>
<title>CSS Tutorials : CSS Border Examples-13</title>
<style>
 .test{
  width:400px;
  height:200px;
  margin:10px;
  border: 2px solid #333;
  border-radius:5px;
  }
</style>
</head>
<body>
 <h3>The Border Radius Property</h3>
 <p>This is an example of border radius property.</p>
 <div class = "test"></div>
</body>
</html>


However each corner can be individually rounded as shown in below example.


<!DOCTYPE html>
<head>
<title>CSS Tutorials : CSS Border Examples-13</title>
<style>
 div{
  width:400px;
  height:200px;
  margin:10px;
 }
 .test1{
  border: 2px solid #333;
  border-radius:5px 10px 20px 25px;
  }
 .test2{
  border: 5px solid #FF4973;
  border-radius:80px 20px 20px 20px;
  }
</style>
</head>
<body>
 <h3>The Border Radius Property</h3>
 <p>This is an example of border radius property individual for each corner.</p>
 <div class = "test1"></div>
 <div class = "test2"></div>
</body>
</html>

Related Topics


Progrramers is optimized for Web Development Tutorials, Framework7, MeanStack, MongoDB, ExpressJS, AngularJS, NodeJS, HTML, CSS, JavaScript, PHP, SQL
I the previous chapter of CSS tutorial we learnt about CSS colors and now in this chapter we will study about CSS backgrounds.

But before we move ahead we can over-view the CSS background properties.

1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position

Let’s start now!

Background-color


The background-color is CSS property that specifies the background color of HTML elements.


body{
 background-color: #DDDFFF;
}
h1{
 background-color: #156938;
}
p{
 background-color:orange;
}
div{
 background-color:rgb(255,38, 30);
}

The above example will produce below result

Result

CSS background-color property receives only valid color names, HAX color values, RGB color values, HSC color value etc. If there is any trouble with you then you may go through the previous chapter which describes the CSS colors. Click Here CSS Tutorials - CSS Colors.

Background-image


CSS background-image property sets the image to HTML elements. Check the below example, how to set the image to HTML Elements.


body{
 background-image:url('background.jpg');
}

Tips: Be careful while using background image. When using background image, always use an image that don’t disturb the visibility of text using over image.

Below is an example that shows the improper use of the background image.


body{
 background-image:url('badbackground.jpg');
}

Background-repeat


By default the CSS background-image property repeats the image horizontally and vertically so that it can cover the entire element. Sometimes it looks awkward. For example


body{
 background-image:url('background1.jpg');
}

CSS background-repeat property can control it and allow repeating only vertically, only horizontally or no-repeat.

Horizontal repeat 


To repeat image horizontally, use (background-repeat: repeat-x). Follow the below example.


body{
 background-image:url('background1.jpg');
 background-repeat:repeat-x;
}

Vertical repeat


To repeat an image vertically, use (background-repeat: repeat-y).


body{
 background-image:url('background1.jpg');
 background-repeat:repeat-y;
}

No Repeat


To disable the repeat of an image in an element use (background-repeat: no-repeat). If the image is totally got fit to element, then it will not repeat by default.


body{
 background-image:url('background5.jpg');
 background-repeat:no-repeat;
}

Background-position


Use of CSS background-position is ideal when we do not want to repeat the image and set the image position to the element as we want.

In above example image is not repeating but it also not looks great. We can change its position using CSS background-position properties.


body{
 background-image:url('background5.jpg');
 background-repeat:no-repeat;
 background-position:right top;
}

Background-attachment


Sometime we do not want to scroll the background-image along with scroll bar. This can be done by using CSS background-attachment property. By default image is scroll with scrolling the scroll bar.
If we use (background-attachment:fixed; ) image will be fixed and not scroll.


body{
 background-image:url('background5.jpg');
 background-repeat:no-repeat;
 background-position:right top;
 background-attachment:scroll;
}

If we use (background-attachment:scroll;)image will be fixed and scroll.


body{
 background-color: #C6E6FD;
 background-image:url('background5.jpg');
 background-repeat:no-repeat;
 background-position:right top;
 background-attachment:scroll;
}

Background – shorthand property


It is possible to define all the background properties in a single property. This is call background shorthand property.


body{
 background: #C6E6FD url('background5.jpg') no-repeat right top fixed;
}

Related Topics

Progrramers is optimized for Web Development Tutorials, Framework7, MeanStack, MongoDB, ExpressJS, AngularJS, NodeJS, HTML, CSS, JavaScript, PHP, SQL

CSS Colors


CSS Colors are used to specify the colors of HTML Elements, Text, and Borders etc. In order to specify the colors using CSS, we can use the predefined names or Color Code Values.



Red
White
Aqua
Aquamarine
Yello
Orange
Bisque
Black
Blue
BlueViolet
Gray
Green




We can specify the color value in various formats. Below defined table is a list of the formats with Syntax and Example.

Format Syntax Example
Color Name Red, Green, Blue, Tomato, Orange div{background-color:orange;}
HEX Color value #RRGGBB div{background-color:#0066FF;}
RGB (Absolute Value) rgb(rrr,ggg,bbb) div{background-color: rgb(255, 0,255);}
RGB (% Value) rgb(rrr%, ggg%,bbb%) div{background-color rgb(50%, 40%,60%);}
SHC (Short HEX Code) #RGB div{background-color:#06F;}
HSL (Hue, Saturation, Light) hsl(hhh, sss%, lll%) div{background-color: hsl(120, 40%, 60%);}
RBGA (Red, Green, Blue, Alfa) rgb(rrr,ggg,bbb, a.a) div{background-color rgb(255, 0,255, 0.5);}
HSLA (Red, Green, Blue, Alfa) hsl(hhh, sss%, lll%, a.a ) div{background-color: hsl(120, 40%, 60%, 0.4);}


You have been introduced with CSS color formats with their syntax and short examples above. Now we will study them more descriptively but before start, we need to understand basic concept of color code. It gives lot of idea about how can we use colors in CSS easily.

Whats is RGB?


RGB stands for Red, Green and Blue respectively. All of the three colors are Primary Colors. Digital colors shades are result of all three primary colors lights mixing which is emitted by the device screen. There are two types of mixing shades. Color Shades and Gray Shades.

Red - RGB(255, 0, 0)
Green - RGB(0, 255, 0)
Blue - RGB(0, 0, 255)




Color Shades: When all three Primary Color Light sources output the three different values then colors shades are formed. You can better understand with below example.


<div style = "background-color:rgb(251,163,20);"></div>


Gray Shades: When all three Primary Color Light sources output equal values then gray shades are formed. Check in the example.


<div style = "background-color:rgb(160,160,160);"></div>


Colors Names


In HTML and CSS, color can be defined with their names. Like Red, Blue, Yellow, Green, Aqua, Magenta etc. You can find in below example that how to use the color in CSS with their names.

Red
Green
Blue


Yellow
Pink
Orange





<div style = "background-color:green;"></div>


RGB Color Code


In HTML and CSS, color can be defined as RGB values. How to use the RGB values, you can find in below syntax example.


<div style = "background-color:rgb(251,163,20);"></div>


In above example rgb is the key and inside the parenthesis three color parameters define the intensity of red, green and blue color respectively. Each parameter value varies from 0 to 255. Lesser value defines the low intensity and higher value defines high intensity. All three equal values define the gray shade and different values define the color shade.

RGB color can be defined with absolute value and % (percent) too.


<div style = "background-color:rgb(50%,20%,20%);"></div>


RBGA Color Code


RGBA is an extension of RGB color value where ‘a’ stands for ‘alpha’. ‘a’ is alpha key which defined the opacity for a color. Value of ‘a’ is tends from 0.0 (full Transparent) to 1.0(full Opaque).

Red-RGBA(255,0,0,0.3)
Green-RGBA(0,255,0,0.4)
Blue-RGBA(0,0,255,0.5)






<div style = "background-color:rgb(251,163,20,0.5);"></div>


HEX Color Code


In HTML and CSS colors also can be defined using Hexadecimal value, you can find in below syntax example.

Red- #FF0000
Green-#00FF00
Blue-#0000FF






<div style = "background-color:#EECC00;"></div>


Hexadecimal Numbers: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f

In above example you can find alpha-numerical six digits followed by # (hash). ‘#’ is a key for using hexadecimal code, first two digits are red color value, next two digits are green color value and last two digits are blue color value. Hexadecimal value can be varied from ‘00’ to ‘ff’.  Seven figures together create hex color code. Lesser value defines the low intensity and higher value defines high intensity. All three equal values define the gray shade and different values define the color shade.


<div style = "background-color:#434343;"></div>


SHC (Short HEX Code)


SHC is shorter form of six digits HEX code. In this format, each digit is replicated to arrive at an equivalent six-digit value. For example: #0C5 becomes #00CC55.

#2299bb = #29b
#EE99BB = #E9B
#EECC00 = #ECB






<div style = "background-color:#f90;"></div>


HSL Color Code


In HTML, a color can be also defined using HSL value. How to use the HSL values, you can find in below syntax example.


Red: hsl(0, 100%, 50%)
Green: hsl(120, 100%, 50%)
Blue: hsl(240, 100%, 50%)





<div style = "background-color:hsl(135, 94%, 30%);"></div>


In above example hsl is a key and inside the parenthesis three parameters (Hue, Saturation and Light) value are defined.

Hue is a degree on the color wheel from 0 to 360 where 0 is red, 120 is green and 240 is blue. Saturation can be described as intensity of color. 0% means no color only gray, 50% means 50% of gray and color both and 100% means only color no gray. The lightness of a color can be described as how much light you want to give the color, where 0% means no light (black), 50% means 50% light (neither dark nor light) 100% means full lightness (white).

Shades of gray are often defined by setting the hue and saturation to 0, and adjust the lightness from 0% to 100% to get darker/lighter shades


<div style = "background-color:hsl(0, 0%, 30%);"></div>


HSLA Color Code


HSLA is an extension of HSL color value where ‘a’ stands for ‘alpha’. ‘a’ is alpha key which defined the opacity for a color. Value of ‘a’ is tends from 0.0 (full Transparent) to 1.0(full Opaque).

Red: hsl(0, 100%, 50%, 0.5)
Green: hsl(120, 100%, 50%, 0.4)
Blue: hsl(240, 100%, 50%, 0.3)





<div style = "background-color:hsla(0, 0%, 30%, 0.5);"></div>

Related Topics


Progrramers is optimized for Web Development Tutorials, Framework7, MeanStack, MongoDB, ExpressJS, AngularJS, NodeJS, HTML, CSS, JavaScript, PHP, SQL

How to include CSS with HTML?


In previous chapter of CSS Tutorials we have already discussed about the methods by which HTML Elements can be styled. In this chapter we will go to learn How to use those three CSS methods.
CSS can be used to HTML by three different methods; mentioned below:

1. Inline – In this method we use style attribute inside the HTML element.

2. Internal – In this method we use to define the CSS property: value pair inside <style> element within <head> section. We target to select the elements by its name or selector attributes like id and class. We have learnt about the selector attributes in HTML5 Tutorial - HTML Attributes chapter.

3. External – In this method we use external CSS file and create a hyperlink between HTML and CSS documents and target to select the elements by its name or selector attributes like id and class.

Using Inline CSS


An inline CSS can be use to describe the style of a single HTML element. Style Attribute is used (in that HTML element) to define a style of the element.

Syntax


<element style = “CSS-Property: CSS-Value ;”>


Don’t add space between the property value and the unit. For Example: ‘width:10 px’. This is wrong way. Always follow the correct way which is: ‘width:10px;’.

To use multiple style description in Single HTML element, define multiple times CSS property value pairs separated by semicolon (;), you can easily understand with below example:


<p>An Example of <span style = "background:yellow;padding:5px;border-radius:5px;">Inline CSS<span></p>
  <p>Above heading and paragraph is styled with Inline CSS.</p>


Note: Grouping of Style cannot be done with Inline CSS.

Using Internal CSS or Embedded CSS


Internal or Embedded CSS can be used with <style> element. We can describe the style of HTML elements by putting CSS property and value within <style> element. <style> tag is defined inside the <head> tags on HTML document.

Syntax


<style>

Selector{

        CSS-Property: CSS-Value ;

}

</style>


Follow to example to understand better:


<head>
  <title>CSS Tutorial - progrramers</title>
  <style type = "text/css" media = "all">
   body{
    background:#CCCCCC;
    text-align:center;
   }
   p:nth-child(2){
    background:#313131;
    color:#FFFFFF;
    padding:10px;
    display:inline;
   }
   h1{
    color:#424242;
    font-family:ubuntu;
   }
   div{
    background:#FFFFFF;
    margin:10%;
    padding:10px;
   }
   span{
    background:yellow;
    padding:5px;
    border-radius:5px;
   }
  </style>
 </head>


Example Explained:

You can clearly see in the above Try Yourself example that at first

1. <style> tag is defined inside <head> tag. This is the standard method. We should always put <style> tag inside the <head> to define Internal CSS on HTML document. You can also see ‘type’ and ‘media’ attributes inside the <style> tag which is required before HTML version 5.0. It means that if you are working lesser version from HTML5 that it is mandatory to define at least ‘type’ attribute. ‘media’ attribute is an optional choice until you are not working with responsive web design.

2. ‘type’ attribute specifies the style sheet language as a content-type (MIME type). ‘media’ attribute helps to identify the device screen size and adjust the HTML element according to alternate defined style rules. We will read more about media in coming chapters.

3. HTML elements are targeted by their names which is called selector, CSS-Property and CSS-value together define the specific style to Elements.

Below is the Attribute of <style> tag and their possible values.


Attribute
Value
Description
type
text/css
Specifies the style sheet language as a content-type (MIME type). This is required attribute.
media
Screen
Tty
Projection
TV
Print
Projection
Braille
Aural
All
Specifies the device the document will be displayed on. Default value is all. This is an optional attribute.

External CSS


External CSS is just similar to Internal CSS. Only the difference is that unlike internal CSS, External CSS is written on separate file which is saved with ‘.CSS’ extension. To create link between ‘.CSS’ files and HTML documents there is a link defined on HTML document.


Syntax



<link href = “file.css” type = “text/css”/>




Example Explained


1. External CSS is written on a separate file which is saved as “example.css” and linked to HTML document with <link href = “ ”> tag defined in head tag.

2. ‘type’ attribute inside the <link> tag which specifies the style sheet language as a content-type (MIME type) is required before HTML version 5.0. It means that if you are working lesser version from HTML5 that it is mandatory to define ‘type’ attribute.


<html>
 <head>
  <title>CSS Tutorial - progrramers</title>
  <link href = "" rel = "stylesheet" type = "text/css"/>
 </head>
 <body>
  <h1>Welcome to progrramers</h1>
  
  <p>A w3School for W3Programmers</p>
  <div>
  <p>An Example of <span>External CSS</span><br /><br />
  All heading and paragraph are styled with External CSS.</p>
  </div>
 </body>
</html>


CSS Rules Overriding


Before we try to understand CSS rules overriding, we must remember that HTML Document rendered top to bottom line by line and executed on the web browser. This means that which element is written first, will be rendered first and last element will be rendered last.

What is CSS rule overriding? We read above that CSS can be use in different ways so there is a priority of every method which overrides another. Below is the list which defines number one has highest priority

1. Inline CSS – Inline CSS defined inside the HTML Elements, has the highest priority. It means that it will override all the CSS Rules defined inside <head> tag or External Style Sheet or browser defaults.

2. Internal CSS and External CSS – Both depend on the situation that which one is written on last. If <style> tag is defined after <link> tag inside the <head> section then internal CSS will override the External CSS rules and Vice Versa.

3. Browser Default.

Related Topics



Progrramers is optimized for Web Development Tutorials, Framework7, MeanStack, MongoDB, ExpressJS, AngularJS, NodeJS, HTML, CSS, JavaScript, PHP, SQL

CSS Tutorial -Introduction


These days you can find almost all website with very rich and fascinating looks. It is not possible to build a website with good looks without style description. So we need a tool that empowers the beauty of HTML elements and gives the website an extra feel. CSS does this well. With CSS we can describe the style of HTML elements.

What is CSS?


CSS is a markup language used with HTML to design the user Interface of a website. CSS stands for Cascading Style Sheet. CSS describes the style of HTML on a web page.

CSS can be used to HTML by three different methods.

1. Inline – In this method we use style attribute inside the HTML element.

2. Internal – In this method we use to define the CSS property: value pair inside <style> element within <head> section. We target to select the elements by its name or selector attributes like id and class. We have learnt about the selector attributes in HTML5 Tutorial - HTML Attributes chapter.

3. External – In this method we use external CSS file and create a hyperlink between HTML and CSS documents and target to select the elements by its name or selector attributes like id and class.

Which is the better one?


It is very tough to say that which is better method to use when working with HTML and CSS but the most popular method which is used widely is External Method. External Method saves lot of work. It serves the styling to all linked HTML pages and controls the layout of multiple web pages all at once. Inline and Internal CSS are more useful when working with particular element or page.

Why CSS is so important?


In this era of World Wide Web screen size has no limitations. The big size has got much bigger as smart T.V. and small size got much smaller as Smartphone. CSS not only defines the style of HTML web pages but it also control the layout and variations in display for different devices and screen sizes. It can sense the media screen size and respond accordingly.

CSS was created to solve a big problem


When tags like <font> and color attribute are added to HTML then it started a nightmare for web developers. While creating large websites, it became a tough and expensive task to define the color and font information on every page. Finally CSS was developed by Hakon wium Lie and it was published as W3C recommendation on May 12th 1998.

To Learn CSS you must have knowledge of HTML.

To Learn HTML Click on HTML Tutorials

Requirements of Learning


Basic knowledge of Text Editor, HTML, XHTML, HTML file path, Internet Browser like Google Chrome, Firefox, IE etc.

Scope for Audience


This Tutorial will be very help full for beginners’ web developer, professional, personal blog writers and Google Bloggers as well.






Related Topics