CSS Based Anchor <a>, Body, Header <h1>, Paragraph <p> - Color & Font Settings

If you see different web pages the web designer sets different colors for Links, Text, Paragraphs etc. Here are few examples of various ways of changing colors and font using CSS


body {background: #DDDDFF; color: purple; font-family: serif;}
h1 {font: italic 250% sans-serif;}
h3 {color: #551155;}
p {margin-left: 0.5em; text-indent: 2.5em;}
ol, ul {margin-left: 3em;}
code {color: magenta; font-family: sans-serif;}

a:link {color: #CC66CC; font-weight: bold;}
a:visited {color: #993399;}
a:hover {color: #DDDDFF; background: #CC66CC;}

p.footer {font-size: 75%; text-align: right;}


In the above code the line body {background: #DDDDFF; color: purple; font-family: serif;} changes background color of page to #DDDDFF, text color of page to purple and font-familyof page to serif;

Similarly other lines changes various color, font and margin styles of h1, h3, p, ol, ul and a

Following lines changes anchor properties for link , visited links and when mouse over occurs for the anchor links on the page
a:link {color: #CC66CC; font-weight: bold;}
a:visited {color: #993399;}
a:hover {color: #DDDDFF; background: #CC66CC;}

No comments:

Post a Comment