CSS stands for Cascading Style Sheets, is a tool to add layout to your websites. It controls the presentation of web pages. CSS provides information to the browser about how the content on the page should be displayed. CSS covers fonts, lines, margins, width, height, advanced positions and background images. It controls layout of many documents from a single style sheet, apply different layout to different media-types (print, screen, etc) and many more. Compared to HTML, CSS offers more options and is supported by all browsers today.
To structure content html is used, but to format structured content, CSS is used. CSS command consists of three parts: selector – property – value.
Selector {property: value; }
Selector comes first, followed by property and then value. Each property and its value is separated by a colon and ended with a semi-colon. They are also have to be surrounded by curly brackets. Example:
body {background-color: red;}
Selector: what html element applied in this area
Property: what will be changed to the selector.
Value: the value of what you are going to change.
Note: Don't leave spaces between property value and the units. It only works in IE but not in Opera or Firefox.
CSS can be applied in 3 ways to an html document:
- by using the html attribute style (inline) – example:
<body style="background-color: yellow;">
- By inserting the CSS codes between style tag (<style>) – example:
<html>
<head>
<title>Example</title>
<style type="text/css">
body {background-color: yellow;}
</style>
</head>
- By inserting the CSS codes in an external style sheet (a text file with the extension “.css”) and linked to the html document. The link can be created with a line of html code that is inserted in the header section of your html file (between <head> and </head> tag):
<link rel="stylesheet" type="text/css" href="name-of-the-folder/name-of-the-file.css" />
We will look at the one which is the most preferred and widely used: external (the last option above). To understand how it works, you can simply copy and paste each of two of the following codes into a separate notepad and save one as “.htm” and the other as “.css” file but keep both files in the same directory or folder:
| Save this to "mypage.htm": | Save this to "style.css": |
<html>
<head>
<title>My Page</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Hello, I’m Edy Bright</h1>
</body>
</html>
| body {
background-color: red;
}
|
Open the .htm file by double-click it and you will see that the css file will effect the other file in terms of layout or design. You can change the CSS file to update the style of all HTML documents that linking to it.
Some other common CSS coding:
Properties and Values:
Colors and background
color:green;
- (choose the color)
background-color:#ff0000;
- (choose background color)
background-image:url("mypic.gif");
- (background image)
background-repeat:no-repeat;/repeat;/repeat-x;/repeat-y;
- (image background pattern)
Background-attachment:scroll/ fixed
- (whether still image or movable)
background-position:2cm 2cm/ 50% 25%/ top right
- (image background position)
Font
font-family:"Times New Roman", serif;
- (what types of font will be used, a comma appears between alternate values, it means if the browser can’t find Times New Roman, it loads Serif). A comma can also separate multiple selectors.
font-style:italic;/ oblique;
- (font style)
font-variant:small-caps;/ normal;
- (font variant)
font-weight:bold;/ normal;
- (font weight)
font-size:30px;/ 12pt;/ 120%;/1em;
- (font size)
Text
text-indent:30px;
- (text indent)
text-align:right;/ center;/ justify;
- (text align)
text-decoration:underline;/ overline;/ line-through;
- (add a line in the text)
letter-spacing:6px;
- (space between letters)
text-transform:uppercase;/ lowercase;/ none;
list-style-type:circle;/ square;/ upper-roman;
- (list item markers)
p:first-letter{color:#ff0000;font-size:xx-large;}
– (to change the first letter of a paragraph)
p:first-line {color:#0000ff;font-variant:small-caps;}
–(to change the first line of a paragraph).
Margin, Padding, Border
margin-top/ right/ bottom/ left: 100px;
- (position of the margin)
or margin:100px 40px 10px 70px;
- (clock-wise= top, right, bottom, left)
padding:20px 20px 20px 80px;
- (padding= space between the border and content)
border-width:thick;/ thin;/medium;
border-style:dotted;/ dashed;/ solid;/ double;/ groove;/ ridge;/ inset;/ outset;
border-style:dotted solid double dashed;
- (adding different border style from top-right-bottom-left/ clock-wise direction)
border-top/ left/ bottom-color:red;
-(apply a color to only one side of a border)
border-bottom/ top/ right-style:solid;
-(add style to only one side of a border)
border-top/ left/ bottom-width:thick;
-(set the size of a border)
outline:green dotted thick;
- (a line drawn around elements (outside the borders).
outline-color:#00ff00;/ style:dotted;/ width:5px;
position:absolute;/ relative; top:150px; left:500px;
- (locating an element whether in absolute or relative position)
z-index:1;/2;/3; etc.
- (To make an element become layers and the value of its property can be used as an order of which elements overlap one another)
visibility:hidden
– (to hide an element, but it still take up the same space as before)
display:none
– (to hide an element and it will not take up any space)
max-height:/min-height:/max-width:/min-width:100px;
- (set the maximum/ minimum height and width of an element)
display:inline
– (to change block element become inline)
display:block
– (to change an inline element to a block element)
Selectors:
Link
a:visited
- (a visited link)
a:active
- (a link the moment it is clicked.)
a:hover
- (when you place a cursor over a link)
Class, Id and Div
class="....."
- (to specify a style to a particular element or group of elements)
id="....."
- (to specify a style for a single, unique element)
span class="....."
- (for adding visual features to selected parts of text)
div id="....."
- (to group one or more block-level elements)
Comment
/*put your comment here*/
- (you can add comment on top of css coding to explain your code, comments are ignored by browsers)
