CSS CSS means Cascading Style Sheets. It is used to style HTML documents. Like we mentioned in the HTML tutorial, CSS can be embedded in the HTML document but it's better, easier and neater if you style in a separate document. The cool thing about it is that you can style a whole website with a single CSS document. The CSS document has to be linked to the HTML before it can work. Open a new document in your text editor Save the document as "website.css" (without the quotation marks) in the "website" folder we created in the HTML tutorial. You have to add the ".css" extension. Now we have to link the CSS file to the HTML document Open the two files we created in the HTML tutorial (index.html and about.html) in your text editor. * To open the HTML files in your text editor: Launch the text editor, click file, open, and in the open dialog box type the name of the file you want to open (in this case index.html), click open. Change the code of the head section (top of the page, before the <body> tag) of the "index.html" and "about.html" to look like this: <!DOCTYPE html PUBLIC "-////DTD XHTML 1.0 Transitional//EN" "http://www.vijaymeghwal.wordpress.com"> <html> <head> <title>your Search Engine Guide</title> <link rel="stylesheet" type="text/css" href="/website.css" /> </head> <body>... Save the file. Open the "index.html" in your browser. Nothing changed right? Nothing is supposed to change. The extra line of code we just added is <link rel=... href="/website.css" />. website.css is the name of the CSS file we just created; so if you have a CSS file named john.css then the code will be: href="/john.css", every other code remains the same. There are other ways to link documents to HTML but they are advanced stuff. That's it, we just linked our CSS file to our two paged website. CSS Rule
A CSS rule consists of a selector and a declaration. The declaration can be more than one. For example: p color: red; font-size: 13px; *You can place all declarations on a single line but to make the document more readable place each declaration on a separate line. "P" above is the selector; it is the HTML document you want to style. The code below the "p" is a declaration group. A declaration group is usually surrounded by curly bracket. Above, we have two declarations i.e "color:red" and "font-size:13px". Each declaration consists of a property and a value. "Color" and "font-size" are properties; "red" and "13px" are values. A colon separates a property and a value. A declaration usually ends with a semicolon. Colors There are about 16 million colors you can use with CSS. A color can be added to a CSS with a name or a hex code, since there are only about 17 predefined color names in CSS, its best to use the hex code. You don't really need to know the history of the hex color code but there are some basic things you need to know. It is impossible for a human to know all the codes to all the colors but, the more you work with them the more they are stored in your brain's database. The hex code is prefixed by the harsh (#) character, it is usually six digits gotten from 0 to f. Let's see an example. Type the code below into your "website.css" document /*this is a comment*/
Tips: *The text in purple is the new addition to the previous code. document and refresh your browser so that you can see the effect of each code but, make sure each curly bracket is closed. Save the "website.css" file and refresh your browser. The color of all the headings should be blue; click the "about us" link, the headings should be blue too; if not, make sure your css is linked to the HTML files, go through the first steps of this tutorial again. There is a very easy way to get the hex code of any color you want; you can do this with any graphic software like Photoshop, Illustrator and others. All you have to do is select a color of your choice from the color picker then copy the hex color code (the software will generate the hex color code) to your CSS document. If you don't have any graphic software, not to worry, I've provided a color picker here for you; just click the color box below, select any color you like, click OK and copy the hex color code to your CSS document. #fff200 The id and class Selector CSS allows you to style different sections of your website differently. In the HTML tutorial, we specified some id and class (e.g. <div id="header">) which didn't make any difference to the look of the website; yeah it's going to make a difference here. Now I can style a section of the website with the name "header". The class selector uses the HTML class attribute, and is defined with a dot (.). The id selector uses the HTML id attribute, and is defined with a harsh character (#) Let's look at an example Change the code above to this: #header
color:#ff0000; Tips: *The text in purple is the new addition to the previous code. document and refresh your browser so that you can see the effect of each code but make sure each curly bracket is closed. This will make all the text within the opening <div> tag (i.e. <div id="header">) and the closing </div> tag to have a red color (apart from the links). All other text in the website will not be affected. Font Family The font family property defines the font style of the text in a website. I know you'll be tempted to download a very crazy or sexy font for your website but you shouldn't. A website opens in a viewer's computer with the font available in the viewer's computer, so if you download a very unique font available to very few of the world's population, then a large number of your viewers will see your website with another font and it usually isn't pretty. There are some safe fonts you can use for your website, by safe I mean font that is available to at least 90 percent of the world's population. Fonts like Arial, Verdana, Times New Roman, sansserif and Helvetica are considered safe fonts. You can list more than one font in a css, if the browser cannot find the first font; it checks your css list and use the next available font. *If a font name has more than one word, it should be placed in a quotation mark. For example "Times New Roman" Font Size Font size is the size of the text in a website. It could be in pixel, point, inches and so on, we are going to stick with pixel in this tutorial because I prefer it. The font size of a heading is supposed to be bigger than that of a paragraph, of course you can do it the other way round but please don't. It won't look good. Also you should not write a text that is supposed to be a heading as a paragraph with a big font size; headings should be headings and paragraphs should be paragraphs. Don't ask me why. Font Weight This is used to state whether the text is bold or not. In practice it is either bold or normal. Text Align
The text align property will align text in a page to left, right, center or justify. Let's put all the above headings in an example Add some extra code to the above code so it looks like this: #header color:#ff0000; font-weight:bold; body font-family: Verdana, Arial, Helvetica, "Times New Roman"; font-size: 14px; #nav #footer Tips: *The text in purple is the new addition to the previous code. document and refresh your browser so that you can see the effect of each code but make sure each curly bracket is closed. Save and refresh. The body selector is used to style all the elements inside the <body> opening tag and the </body> closing tag.
We now have a font family, notice that the font in our website changed to Verdana, the font size also changed. We also aligned some text to the center and made all the text in the header section bold. Cute. Background Color Background color property specifies the background color of an element. Background Image The background-image property specifies an image to use as the background of an element. By default, the image is repeated so it covers the entire element. You can choose to repeat the image horizontally background-repeat: repeat-x; or vertically background-repeat: repeat-y;or no repeat at all background-repeat: no-repeat;. Change your code to this: body font-family: Verdana, Arial, Helvetica, "Times New Roman"; font-size: 14px; background-color:#898989; #nav background-color:#000066; #footer background-
#all background-color:#ffffff; #header color:#ff0000; font-weight:bold; background- background-image:url(header.jpg); background-repeat:no-repeat; Tips: *The text in purple is the new addition to the previous code. document and refresh your browser so that you can see the effect of each code but make sure each curly bracket is closed. *Header.jpg is the name of the image I want to use, you can use any image you have, but for simplicity and uniformity sake, just save the image below in the website folder. *If you're using your own image Copy the image to the "website" folder. If you don't want to copy the image then you have to state the full url of the image, for example instead of "header.jpg" it should be "C:/Users/Desktop/folder/header.jpg". Width and Height The width and height properties are used to set the width and height of a content area. Setting the height of a content area can be tricky because, when you add content to that area, you have to adjust the height to fit the content, especially if you have a background color. It is better to use the "minimum height" property, but of course that has some challenges with some old browsers. Personally, I don't use the height property unless I absolutely have to. When the height of a content area is not stated, the browser calculates the height based on the content inside that content area, so it adjusts itself as you add new content. Works for me. Let's look at an example Adjust your code to this:
body font-family: Verdana, Arial, Helvetica, "Times New Roman"; font-size: 14px; background-color:#898989; #nav background-color:#000066; #footer background- #all background-color:#ffffff; width:800px; #header color:#ff0000; font-weight:bold; background- background-image:url(header.jpg); background-repeat:no-repeat; Tips:*The text in purple is the new addition to the previous code. document and refresh your browser so that you can see the effect of each code but make sure each curly bracket is closed.
Save the CSS file then refresh your browser. The id attribute named "all" covers all the elements in the body of the website, so by giving it a width of 800px, all the elements inside it will automatically adopts that width. You can specify another width for them. Margin and Padding Margin is a space outside an element while padding is a space inside an element. You can style the different sides of the element with margin-top, margin-bottom, margin-right, margin-left, padding-top, padding-bottom, padding-left, and padding-right properties. Example Change your code to this: body font-family: Verdana, Arial, Helvetica, "Times New Roman"; font-size: 14px; background-color:#898989; #nav background-color:#000066; #footer background- margin-bottom:-10px; padding:1px;
#all background-color:#ffffff; width:800px; margin:0 auto; #header color:#ff0000; font-weight:bold; background- background-image:url(header.jpg); background-repeat:no-repeat; margin-top:-10px;.content Tips: *The text in purple is the new addition to the previous code. document and refresh your browser so that you can see the effect of each code but make sure each curly bracket is closed. Now the website looks really good. Let me explain some of the codes we have above. "Margin: 0 auto" is usually used to tell your browser to put your content in the middle of the browser window. It's possible to have a negative margin as you can see above; I used a negative margin to remove the little space on top of the header and below the footer. "padding:5px" and "margin:5px", is used when you want all four sides of the element to have the same amount of padding or margin, if you want different padding or margin size for different sides then you have to specify the side. Example: padding-left:2px. Borders To make a border around an element, you need a border style, this could be dashed, dotted, solid, others, properties like: "border-top-style:solid", "border-bottom-style: dotted" e.t.c can be used. You also need to set the width and the color of the border. You can specify different widths and colors for different sides using properties like: "border-right-width", "border-top-width", "border-bottom-color", "border-left-color", you know the rest. I'll give you an example on borders later in this tutorial. List
CSS allows you to style your list marker, the default is circle but you can make it square, upperroman, upper-alpha and so on, you can even use an image as a list marker. Example: ulliststyle-type:none; or ullist-style-type:square; or ullist-style-image:url (image.jpg); try those code to see the different results. Links Links are special in the sense that they can be styled differently depending on their state. There are four link states, they are: a:link - a normal, unvisited link a:visited - a visited link a:hover - a link when the mouse is on it a:active - a link the moment it is clicked There are some ordering rules when styling a link: a:link and a:visited must come before a:hover a:active must come after a:hover Text Decoration The text-decoration property is mostly used to remove or add underlines from and to links. It could be a:linktext-decoration:none or a:linktext-decoration:underline amongst others. This example covers the four above explanations: Adjust your code to this: body font-family: Verdana, Arial, Helvetica, "Times New Roman"; font-size: 14px;
background-color:#898989; #nav background-color:#000066; #footer background- margin-bottom:-10px; padding:1px; #all background-color:#ffffff; width:800px; margin:0 auto; #header color:#ff0000; font-weight:bold; background- background-image:url(header.jpg); background-repeat:no-repeat; margin-top:-10px;.content ul list-style-type:square; a:link color:#ffffff; text-decoration:none; a:visited
color:#ffffff; text-decoration:none; padding:1opx; a:hover color:#ffffff; text-decoration:underline; background-color:#fbaf5d; a:active color:#000066; text-decoration:none; Tips: *The text in purple is the new addition to the previous code. document and refresh your browser so that you can see the effect of each code but make sure each curly bracket is closed. Nesting You can apply a style for a selector within a selector, let me explain. Take a look at this: #header pcolor:red This means that all the paragraphs inside the header will be colored red. If there is headings or images inside the header, they won't be colored red. Also any other paragraph outside the header won't be colored red. Let's add some well-deserved finishing touches to our website. Change your code to this:
body font-family: Verdana, Arial, Helvetica, "Times New Roman"; font-size: 14px; background-color:#898989; #nav background-color:#000066; #footer background- margin-bottom:-10px; padding:1px; color:#727272; font-size:12px; #all background-color:#ffffff; width:800px; margin:0 auto; #header color:#ff0000; font-weight:bold; background- background-image:url(header.jpg); background-repeat:no-repeat; margin-top:-10px;.content ul list-style-type:square; a:link
color:#ffffff; text-decoration:none; a:visited color:#ffffff; text-decoration:none; padding:1opx; a:hover color:#ffffff; text-decoration:underline; background-color:#0101ff; a:active color:#000066; text-decoration:none; #header p color:#ffffff; margin-top:-5px; padding-left:10px; img margin-left:30px; Tips: *The text in purple is the new addition to the previous code. document and refresh your browser so that you can see the effect of each code but make sure each curly bracket is closed.