You are not logged in.

#1 2015-09-16 06:20:38

husnain
User RankUser RankUser RankUser RankUser RankUser Rank
Administrator
From: Chichawatni,Pakistan
Registered: 2014-10-03
Posts: 8,129
Website

CSS Styles HTML:

CSS Styles HTML:


HTML style attribute for inline styling
HTML <style> element to define internal CSS
HTML <link> element to refer to an external CSS file
HTML <head> element to store <style> and <link> elements
CSS color property for text colors
CSS font-family property for text fonts
CSS font-size property for text sizes
CSS border property for visible element borders
CSS padding property for space inside the border
CSS margin property for space outside the border

Example:


<style>
body {background-color:lightgray}
h1   {color:blue}
p    {color:green}
</style>


CSS Styling HTML:


Inline - using a style attribute in HTML elements
Internal - using a <style> element in the HTML <head> section
External - using one or more external CSS files

CSS Syntax:


element { property:value; property:value }

Inline CSS Styling:


<h1 style="color:blue">This is a Blue Heading</h1>

Internal CSS Styling:


<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey}
h1   {color:blue}
p    {color:green}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

External CSS Styling:


<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

CSS Fonts In HTML:


CSS color property:


Defines the text color to be used for the HTML element.

The CSS font-family property:


Defines the font to be used for the HTML element.

The CSS font-size property:


Defines the text size to be used for the HTML element.

Example:


<style>
h1 {
    color:blue;
    font-family:verdana;
    font-size:300%;
}
p  {
    color:red;
    font-family:courier;
    font-size:160%;
}
</style>

Box Model in CSS:


p {
    border:1px solid black;
}

Padding Property in CSS:


p {
    border:1px solid black;
    padding:10px;
}

Margin Property in CSS:


p {
    border:1px solid black;
    padding:10px;
    margin:30px;
}

Id Attribute In CSS:


<p id="p01">I am different</p>
:
p#p01 {
    color:blue;
}

Class Attribute In CSS:


<p class="error">I am different</p>
:
p.error {
    color:red;
}


You cannot discover the new oceans unless you have the courage to lose the sight of the shore.

2015-09-16 06:20:38

Advertisement
Ads By Google

Re: CSS Styles HTML:



Board footer