The CSS list properties allow you to set different list item markers for ordered lists, set different list item markers for unordered lists and set images as the list item marker. In HTML there are two types of lists called unordered and ordered lists. Unordered lists are marked with bullet points and ordered lists are marked with letters and numbers. CSS can style lists even further.
You can basically give any value in the syntax as long as it complies with the fact that the list is ordered or unordered. This is a code for the unordered list and ordered list:
ul.a {list-style-type: circle;} (unordered)
ol.c {list-style-type: upper-roman;} (ordered)
Each syntax must start two letters representing weather it's and unordered list or ordered list. Upper roman will give you roman numerals but if you put lower-alpha in its place it will replace the numerals with lower case letters.
An image as the list marker:
An image marker works as a unordered list marker. It uses the list-style-image property.
ul{list-style-image: url('sqpurple.gif');}
This is the usual code but in internet explorer and Opera the image will display higher up. To remove this problem a crossbrowser solution must be used. These syntax's are the solution:
ul{list-style-type: none;padding: 0px;margin: 0px;}
ul li{background-image: url(sqpurple.gif);background-repeat: no-repeat;background-position: 0px 5px; padding-left: 14px; }
The ul syntax sets the list-style-type to none to remove the list item marker and sets both padding and margin to 0px
The li and ul sets the URL of the image, and to show it only once. It also positions the image where you want it (left 0px and down 5px) and posittions the text in the list with padding-left.
Friday 8 March 2013
CSS styling 4: Links
Links can be styled in many various ways.
Links can be styled with CSS properties such as colour, font-families, backgrounds, etc.
There are four different types of links:
a:link {color:#FF0000;}
Each link syntax starts with a and is set between the style tags.
Text Decoration:
Text decoration is used most commonly to remove underline from links:
a:link {text-decoration:none;}
You can underline links by replacing none with underline.
Background colour:
The backgorund-colour property specifies the colour of the backgorund beyhind the links:
a:link {background-color:#B2FF99;}
Links can be styled with CSS properties such as colour, font-families, backgrounds, etc.
There are four different types of links:
- a:link - a normal, unvisited link
- a:visited - a link the user has visited
- a:hover - a link when the users mouses over it.
- a:active - a link the moment it is clicked
a:link {color:#FF0000;}
Each link syntax starts with a and is set between the style tags.
Text Decoration:
Text decoration is used most commonly to remove underline from links:
a:link {text-decoration:none;}
You can underline links by replacing none with underline.
Background colour:
The backgorund-colour property specifies the colour of the backgorund beyhind the links:
a:link {background-color:#B2FF99;}
CSS styling 3: Font
CSS font properties define the font family, boldness, size and style of text. All of these syntax's are in the style tags.
Font Families:
In CSS there are two types of font families:
The font family property should hold several font names as a "fallback" system. If the browser does not support the first font,it tries the next font.
Start with the font that you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.
If the name of the font family is more than one word, it must be in quotation marks, like font-family: "Times New Roman". Here's how you'd write the syntax:
p{font-family:"Times New Roman", Times, serif;}
Font style:
The font style property is commonly used to specify italic text.
This property has three value:
The size of letters:
The size of letters by change the value to normal (give you normal sized text), bold (gives you a thick sized text and 900 (which gives you a thicker sized text).
Font Families:
In CSS there are two types of font families:
- Generic family - a group of font families with a similar look for instance 'Serif' or 'monospace'.
- Font Family - a specific font family such as Times New Roman or Aerial
The font family property should hold several font names as a "fallback" system. If the browser does not support the first font,it tries the next font.
Start with the font that you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.
If the name of the font family is more than one word, it must be in quotation marks, like font-family: "Times New Roman". Here's how you'd write the syntax:
p{font-family:"Times New Roman", Times, serif;}
Font style:
The font style property is commonly used to specify italic text.
This property has three value:
- normal - text is shown normally
- Italic - The text is shown in italics
- Oblique - The text is "leaning" (oblique is very small to italic, but less supported)
p.normal {font-style:normal;}
Just like the text transformations you'd make the class name the same as the value so when typing it in you remember what the class name for the syntax is.
Font size:
The font size property obvously sets the size of the font.
Be able to change the size of the font is very important but you should never try to adjust the size of a heading to look like a paragraph or try to make a prargraph look like a heading. Just use the normal HTML tags <h1> and <p> for headings and paragraphs. If you do not specify the text size , the defult size is et which is 16px or 1em
The font size value can be an absolute, or relative size.
absolute size:
- sets the text to a specific size
- doesn't allow a user to change the text size in all browsers (bad for accessibility)
- Absolute size is useful when the physical size of the output is known
Relative size:
- Sets the size relative to surrrounding pixels.
- Allows the user to change the text size in browsers
This is the syntax for setting the font size:
h1 {font-size:40px;}
Set Font size with Em:
To avoid resizing problems with the older versions of internet explorer, many developers use em instead of pixels. 1em is equal to the current font size.
16 pixels=1em
h1 {font-size:2.5em;}
This font size is equal to 40px. With the em sizes, it's possible to adjust the size in all browser. However using em does mean that soemtime when making text larger it becomes to0 large and when making text smaller it becomes too small.
There is a solution though. Through using a combonation of percentages and em.
All you have to do is set the default font-size in a percentage for the <body> element.
The syntax that you must enter looks like this:
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
The size of letters:
The size of letters by change the value to normal (give you normal sized text), bold (gives you a thick sized text and 900 (which gives you a thicker sized text).
p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
Thursday 7 March 2013
CSS styling 2: Text
Text colour:
To change the colour of the text you do the same as you would do if you were changing the colour of the background. Therefor you would enter a code like this:
body {color:blue;}
Also like background you can choose what colour the text is by either using a colour name, a Hex value or an RGB value and by by changing the selector you choose which text changes colour.
Text alignment:
The text alignment property sets what position the text is horizontally. Text can be centred, aligned left or right or justified. Justified means that when you re size your browser or look at the text on a mobile device only the text will fit onto what ever your looking at. To arrange where your text is you should create a syntax like this and and replace the value with the appropriate value according to where you want your text:
To change the colour of the text you do the same as you would do if you were changing the colour of the background. Therefor you would enter a code like this:
body {color:blue;}
Also like background you can choose what colour the text is by either using a colour name, a Hex value or an RGB value and by by changing the selector you choose which text changes colour.
Text alignment:
The text alignment property sets what position the text is horizontally. Text can be centred, aligned left or right or justified. Justified means that when you re size your browser or look at the text on a mobile device only the text will fit onto what ever your looking at. To arrange where your text is you should create a syntax like this and and replace the value with the appropriate value according to where you want your text:
h1 {text-align:center;}
Text decoration:
Text decoration is used to set and remove decoration from text. It's most commonly used to remove the underline from links for design purposes. The types of decoration are overline, line-through, underline and blink (which makes the text flash) but this property is only supported by Opera and Mozilla browsers. This is the syntax that you need to use all you need to do is possible change the selector and the value:
h1 {text-decoration:overline;}
Text transformation:
Text transformation is used to specify what letters are uppercase and lowercase. This property can be used to turn everything into a lowercase or uppercase letter or capitalise the first letter of each word.
The syntax should look like this:
p.lowercase {text-transform:lowercase;}
When entering the syntax it will be easier to name the class the same as the value so when you enter the class into a syntax in the body you easily remember what the right name is for that type of letter transformation.
Text indentation:
Text indentation tells the computer to start entering text so many pixels away from the edge. The syntax code that you'll need to do this is:
p {text-indent:50px;}
The more pixels you enter the further away the text will start.
Advanced text editing:
Letter-spacing:
Obviously this property is used for increasing and decreasing the spacing between the letters. The syntax goes like this:
h1 {letter-spacing:2px}
Obviously the more pixels you have for you value the bigger the space in between you letter. You can also go into minus numbers meaning that letter collide together.
Line-height:
This property controls the gap between each line through percentages: The syntax is this:
p.big {line-height:200%}
Just like the text transformation its easier to remember the class is called for a certain size if you just name them big and small. The distance between each line increases and decreases with higher and lower percentages.
Vertical-align:
Refure back to horizontal-align replacing the word horizontal with vertical.
Word-spacing:
Refure back to Letter-spacing replacing letter for word.
CSS Styling 1: Background and colour
Within the styling of backgrounds there are many different properties such as colour,image,repeat,attachment,position. The background syntax's go within the style tags.
Background colour:
To change the colour of the whole background the syntax must go:
body {background-color:#b0c4de;}
This is so the whole body of text has a background. If you wanted to have certain colour behind certain text you would change the body for h1,h2,h3,p or div.
Background image:
If you want the background to be an image the syntax should look like this:
body {background-image:url ('paper.gif ');}
The words inside the normal brackets is the name and type of file containing that image. It doesn't matter what type of image it is it will still work. Just like the colour of the background you can replace the selector for a different selector.With background images you can choose which way to repeat the image as normally the image with repeat both vertically and horizontally.
You can make the image repeat horizontally only by entering this declaration on the end of your background code.
background-repeat:repeat-x;
If you want have an image in a set position with no repeat you should replace repeat-x with no-repeat and then add another declaration saying where to put the image like this:
background-position:right top;.
It's also possible to write all of this syntax in shorthand by all writing it like it's all one long property like this:
body {background:#ffffff url('img_tree.png') no-repeat right top;}
When writing shorthand this is the order the properties should be listed in:
Colour:
Colour can be given in a hex value an RGB value and a Colour name
Hex value - '#ff0000'
RGB value - 'rgb(255,0,0)'
Colour name - red
In this image there is a small sample of the colour that can be used:
Background colour:
To change the colour of the whole background the syntax must go:
body {background-color:#b0c4de;}
This is so the whole body of text has a background. If you wanted to have certain colour behind certain text you would change the body for h1,h2,h3,p or div.
Background image:
If you want the background to be an image the syntax should look like this:
body {background-image:url ('paper.gif ');}
The words inside the normal brackets is the name and type of file containing that image. It doesn't matter what type of image it is it will still work. Just like the colour of the background you can replace the selector for a different selector.With background images you can choose which way to repeat the image as normally the image with repeat both vertically and horizontally.
You can make the image repeat horizontally only by entering this declaration on the end of your background code.
background-repeat:repeat-x;
If you want have an image in a set position with no repeat you should replace repeat-x with no-repeat and then add another declaration saying where to put the image like this:
background-position:right top;.
It's also possible to write all of this syntax in shorthand by all writing it like it's all one long property like this:
body {background:#ffffff url('img_tree.png') no-repeat right top;}
When writing shorthand this is the order the properties should be listed in:
- background-colour
- background-image
- background-repeat
- background-attachment
- background-position
Colour:
Colour can be given in a hex value an RGB value and a Colour name
Hex value - '#ff0000'
RGB value - 'rgb(255,0,0)'
Colour name - red
In this image there is a small sample of the colour that can be used:
CSS basics 2: Id & Class selectors
I touched upon the subject of Id and classes in my my last blog as they are the sector part of the Syntax. The style for each Id or Class is specified in the style tags which are in the head tags.
Id Selectors:
Id selctors change the style for one element. When defining the style for an Id the Id name will start with a "#". The Id name with the # is the selector which is followed by ordinary declorations. These declorations will set the style for the element with the Id selector.
Class Selectors:
class selectors can change the style for multuple elements. When defining a class name it will always start with a ".". Just like the Id the Class is the selector and is followed by declorations. These declorations will set the style for all the elements that are to have the class selector.to change the header (h1,h2,h3) or the paragraph (p) specificly the letters representing that elements are put before the dot.
This is a video I found it explains all:
Id Selectors:
Id selctors change the style for one element. When defining the style for an Id the Id name will start with a "#". The Id name with the # is the selector which is followed by ordinary declorations. These declorations will set the style for the element with the Id selector.
Class Selectors:
class selectors can change the style for multuple elements. When defining a class name it will always start with a ".". Just like the Id the Class is the selector and is followed by declorations. These declorations will set the style for all the elements that are to have the class selector.to change the header (h1,h2,h3) or the paragraph (p) specificly the letters representing that elements are put before the dot.
This is a video I found it explains all:
CSS basics 1:Syntax
The first thing that anyone should know when learning CSS is that every line of code called a syntax. A syntax might look like this:
sector Decloration Decloration
h1 {color:blue; font-size: 12xp;}
property value property value
The syntax is made of two parts. One part is called a sector and the other part is called a decloration. A synax is made of one sector which is the id or class in this case h1, and one or more declorations whcih is the parts in side the unusuall brackets. Each decloration is made of a property and a value. The property is what you want to change, in this cas the colour and the font size, and the value is what you want to change it to, in this case blue and size 12. In the syntax colour is spelt color because CSS coding what crreated by World Wide Web Consortium based in America. It also doesn't matter what order the declorations go in.
sector Decloration Decloration
h1 {color:blue; font-size: 12xp;}
property value property value
The syntax is made of two parts. One part is called a sector and the other part is called a decloration. A synax is made of one sector which is the id or class in this case h1, and one or more declorations whcih is the parts in side the unusuall brackets. Each decloration is made of a property and a value. The property is what you want to change, in this cas the colour and the font size, and the value is what you want to change it to, in this case blue and size 12. In the syntax colour is spelt color because CSS coding what crreated by World Wide Web Consortium based in America. It also doesn't matter what order the declorations go in.
Subscribe to:
Posts (Atom)