Difference between revisions of "Courses/Design & Technique-Essential Web Design/03"
(Created page with "=Styling your page with CSS= ==id and class attributes== Two of the most used attributes in HTML is id and class. They are important to distinguish and group different elem...") |
|||
| Line 28: | Line 28: | ||
<p class="text">C</p> | <p class="text">C</p> | ||
</source> | </source> | ||
==css in your html page== | |||
<code<style></code> in your page | |||
<source lang="html4strict"> | |||
<!DOCTYPE html> | |||
<html> | |||
<head> | |||
<style> | |||
<!-- you css style-sheet will go in here --> | |||
body{ | |||
background="pink"; | |||
font-family: mono; | |||
} | |||
</style> | |||
</head> | |||
</html> | |||
<body></body> | |||
</html> | |||
</source> | |||
== anatomy of a css style-sheet == | |||
* css rule: | |||
** | |||
** | |||
img | |||
==css properties== | |||
style div | |||
CSS Propertiy reference https://developer.mozilla.org/en-US/docs/Web/CSS/Reference | |||
==css id selector(for a specific element)== | |||
==css class selector(for a group of elements)== | |||
==css for several elements (for a group of elements)== | |||
==styling links== | |||
css uses a pseudo-class for the different states of a 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 | |||
== display == | |||
* display: none; | |||
* display: inline; | |||
* display: block; | |||
* display: inline-block; | |||
https://developer.mozilla.org/en-US/docs/Web/CSS/display | |||
==position property== | |||
* relative | |||
* absolute | |||
* fixed | |||
https://developer.mozilla.org/en-US/docs/Web/CSS/position | |||
==centering== | |||
Revision as of 11:50, 15 September 2015
Styling your page with CSS
id and class attributes
Two of the most used attributes in HTML is id and class.
They are important to distinguish and group different elements. And become particularly important in CSS styling.
Note:
id
Ids cannot repeat in the same file. They are used to distinguish tags
The symbol for id is: #
<div id="square" style="background:black; color:red; width:400px; height:100px"/>
Id can server as a anchor (link) point within each page.
class
Classes can be used INFINITE TIMES in a file. They are used to group tags.
The symbol for class is: #
<p class="text">A</p>
<p class="text">B</p>
<p class="text">C</p>
css in your html page
<code<style> in your page
<!DOCTYPE html>
<html>
<head>
<style>
<!-- you css style-sheet will go in here -->
body{
background="pink";
font-family: mono;
}
</style>
</head>
</html>
<body></body>
</html>
anatomy of a css style-sheet
- css rule:
img
css properties
style div
CSS Propertiy reference https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
css id selector(for a specific element)
css class selector(for a group of elements)
css for several elements (for a group of elements)
styling links
css uses a pseudo-class for the different states of a 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
display
- display: none;
- display: inline;
- display: block;
- display: inline-block;
https://developer.mozilla.org/en-US/docs/Web/CSS/display
position property
- relative
- absolute
- fixed
https://developer.mozilla.org/en-US/docs/Web/CSS/position
