Styles allow us to change the properties of HTML elements. Properties can range from setting the color of an element to the more advanced such as increasing the volume by which a screen reading applciation reads the text on the screen for someone who is visually impaired. In this course you will lear enough of the basic style rules to produce an effective web iste.
Inline Styles
You have already seen inline styles at work with the image tag. We added width, height, float, and margin. Each was added within a style attribute of the image tag. Each property and its subsequent value was included as part of the style attributes own value.
In the line above the orange type shows the style and its contained properties and their values. The green text shows two different attributes and their values.
Inline styles can be effective for making one time changes to text in a given area of the page. For example:
<p style="color: blue;">This paragraph text will be blue</p>
However what if we wanted to make all paragraph text blue on the entire page? In that case we have a better place to put the style rules for a document and that is within the head element, conventionally following the title element.
<style>
p{
color: blue;
}
</style>
In the above the 'p' is referred to as the selector. This means that it will select all paragraph elements on the page and make them blue.
<style>
p{
color: blue;
}
h1{
font-family: san-serif;
}
</style>
In the above we are now selecting all h1 tags on the page and displaying them using the default san-serif font on the users computer.
Here is a list of properties you may wish to try-out:
color: value
Can either be a color name or its hexadecimal value
color: red;
color: #ff0000;
font-size: value
Set as a numeric value and can accept numerous types of units such as pixels (px), ems (em), and percentages (%). For this class I recommend you stick with percentages. In the examples to the right 50% would represent half the size of the default font size the user has set and 200% would be twice the size of the default font size.
font-size: 50%;
font-size: 200%;
font-family: value
The value is set as the name of a single font or multiple fonts separated by commas. The reason for multiple fonts? Allows you to set the preferred font first with additional options following. This is important in case the font you may wish to be used is not present on the users computer. If the name of a font contains two words then you must palce single quotation marks around the font name.
font- family: arial, helvetica, san-serif;
font-family: 'Times New Roman', Palatino, serif;
text: align: value;
Sets the alignment to the text on either margin, centers, or justifies it. Left is default. This is only for block level elements.
text-align: right;
text-algin: center;
text-algin: justify;
margin: value;
Sets the number of pixels between the element with the style and surrounding elements. You can also specify a margin for a specific side of the element (top, bottom, left, right). This is only for block level elements.
margin: 10px;
margin-top: 6px;
margin-left: 40px;
padding: value;
Sets the number of pixels between the edge of the element and its contents. You can also specify padding for a specific side of the element (top, bottom, left, right). This is only for block level elements.
padding: 10px;
padding-top: 6px;
padding-left: 40px;
border-width: value;
Sets a border around an element. The width of the border is determined by the value. You can also specify a border for a specific side of the element (top, bottom, left, right).
border: 2px;
border-top: 6px;
border-left: 40px;
border-style: value;
Sets the style of a border around an element. Some possible values are: dotted, dashed, solid. Note that you must set a border width on an element in order to be able to see its style.
border-style: dotted;
border-style: solid;
border-color: value;
Sets the color of the border. The value can be a color name or its hexadecimal equivalent. Note that you must set a border width on an element in order to be able to see its color.
border-color: red;
border-color: #ff0000;
Border Shorthand Option
You can set all three of the above border properties using this option border: width style color;
Note that link and visited refer to the state of the link before and after being clicked. Hover is used for whent he cursor is over the link and active is for when the user is pressing the link. Also in order for the pseudo-class to work as anticipated the order of the styles must be as shown above.
