CSS CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem External Style Sheets can save a lot of work External Style Sheets are stored in CSS files CSS Syntax A CSS rule set consists of a selector and a declaration block: The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a property name and a value, separated by a colon.
CSS Example A CSS declaration always ends with a semicolon and declaration groups are surrounded by curly braces: p {color:red;text-align:center; CSS Comments Comments are used to explain your code, and may help you when you edit the source code at a later date. Comments are ignored by browsers. A CSS comment starts with /* and ends with */. Comments can also span multiple lines: Example p { color: red; /* This is a single-line comment */ text-align: center; /* This is a multi-line comment */
Styling HTML with CSS CSS was introduced together with HTML 4, to provide a better way to style HTML elements. CSS can be added to HTML in the following ways: Inline - using the style attribute in HTML elements Internal - using the <style> element in the <head> section External - using an external CSS file Inline Styles An inline style can be used if a unique style is to be applied to one single occurrence of an element. To use inline styles, use the style attribute in the relevant tag. The style attribute can contain any CSS property. <p style="color:blue;margin-left:20px;">this is a paragraph.</p>
HTML Style Example - Background Color The background-color property defines the background color for an element: <!DOCTYPE html> <html> <body style="background-color:yellow;"> <h2 style="background-color:red;">this is a heading</h2> <p style="background-color:green;">this is a paragraph.</p> </body> </html>
HTML Style Example - Font, Color and Size The font-family, color, and font-size properties defines the font, color, and size of the text in an element: <!DOCTYPE html> <html> <body> <h1 style="font-family:verdana;">a heading</h1> <h2 style="text-align:center;">center-aligned heading</h2ss> <p style="font-family:arial;color:red;font-size:20px;"> A paragraph.</p> </body> </html>
Internal Style Sheet An internal style sheet can be used if one single document has a unique style. Internal styles are defined in the <head> section of an HTML page, by using the <style> tag, like this: <head> <style> body {background-color:yellow; p {color:blue; </style> </head>
External Style Sheet An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing just one file. Each page must include a link to the style sheet with the <link> tag. The <link> tag goes inside the head section: <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> An external style sheet can be written in any text editor. The file should not contain any html tags. The style sheet file must be saved with a.css extension. An example of a style sheet file is shown below: "mystyle.css": hr {color: sienna; p {margin-left: 20px; body {background-image: url("images/background.gif");
Background Color The background-color property specifies the background color of an element. The background color of a page is defined in the body selector: body { background-color: #b0c4de; 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. The background image for a page can be set like this: body { background-image: url("paper.gif");
Background Image - Repeat Horizontally or Vertically By default, the background-image property repeats an image both horizontally and vertically. body { background-image: url("gradient.png"); background-repeat: repeat-x; Background Image - Set position and no-repeat body { background-image: url("img_tree.png"); background-repeat: no-repeat;
CSS Text body { color: blue; h1 { color: #00ff00; h2 { color: rgb(255,0,0); It can also be used to decorate text: h1 { text-decoration: overline; h2 { text-decoration: line-through; Text Decoration The text-decoration property is used to set or remove decorations from text. The text-decoration property is mostly used to remove underlines from links for design purposes: Example a { text-decoration: none; h3 { text-decoration: underline;
Text Transformation The text-transform property is used to specify uppercase and lowercase letters in a text. It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word. Example p.uppercase { text-transform: uppercase; p.lowercase { text-transform: lowercase; p.capitalize { text-transform: capitalize;
Text Indentation The text-indent property is used to specify the indentation of the first line of a text. Example: p { text-indent: 50px; CSS Font Families Font Family The font family of a text is set with the font-family property. p { font-family: "Times New Roman";
Font Style The font-style property is mostly used to specify italic text. This property has three values: normal - The text is shown normally italic - The text is shown in italics oblique - The text is "leaning" (oblique is very similar to italic, but less supported) p.normal { font-style: normal; p.italic { font-style: italic; p.oblique { font-style: oblique;
Font Size The font-size property sets the size of the text. h1 { font-size: 40px; h2 { font-size: 30px; p { font-size: 14px;
CSS Lists In HTML, there are two types of lists: unordered lists - the list items are marked with bullets ordered lists - the list items are marked with numbers or letters Example ul.a { list-style-type: circle; ul.b { list-style-type: square; ol.c { list-style-type: upper-roman; ol.d { list-style-type: lower-alpha;
HTML Tables Tables are defined with the <table> tag. A table is divided into rows with the <tr> tag. (tr stands for table row) A row is divided into data cells with the <td> tag. (td stands for table data) A row can also be divided into headings with the <th> tag. (th stands for table heading) The <td> elements are the data containers in the table. The <td> elements can contain all sorts of HTML elements like text, images, lists, other tables, etc. The width of a table can be defined using CSS.
Example <table style="width:300px"> <tr> <td>jill</td> <td>smith</td> <td>50</td> </tr> <tr> <td>eve</td> <td>jackson</td> <td>94</td> </tr> </table>
An HTML Table with a Border Attribute If you do not specify a border for the table, it will be displayed without borders. A border can be added using the border attribute: <table border="1" style="width:300px"> <tr> <td>jill</td> <td>smith</td> <td>50</td> </tr> <tr> <td>eve</td> <td>jackson</td> <td>94</td> </tr> </table>
To add borders with CSS, use the border property: <style> table,th,td { border:1px solid black; </style> An HTML Table with Collapsed Borders (If you want the borders to collapse into one border). <style> table,th,td { border:1px solid black; border-collapse:collapse </style>
An HTML Table with Cell Padding Cell padding specifies the space between the cell content and its borders. th,td { padding:15px; To left-align the table headings, use the CSS text-align property: th { text-align:left; An HTML Table with Cell Spacing Cell spacing specifies the space between the cells. table { border-spacing:5px;
HTML Table Headings Table headings are defined with the <th> tag. By default, all major browsers display table headings as bold and centred. <table style="width:300px"> <tr> <th>firstname</th> <th>lastname</th> <th>points</th> </tr> <tr> <td>eve</td> <td>jackson</td> <td>94</td> </tr> </table>
Table Text Alignment The text in a table is aligned with the text-align and vertical-align properties. The text-align property sets the horizontal alignment, like left, right or center. td { text-align: right; The vertical-align property sets the vertical alignment, like top, bottom, or middle td { height: 50px; vertical-align: bottom;
Table Color The example below specifies the color of the borders, and the text and background color of th elements: table, td, th { border: 1px solid green; th { background-color: green; color: white;
HTML Forms and Input HTML Forms HTML forms are used to pass data to a server. An HTML form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset and label elements. The <form> tag is used to create an HTML form: <form>. input elements. </form>
HTML Forms - The Input Element The most important form element is the <input> element. The <input> element is used to select user information. An <input> element can vary in many ways, depending on the type attribute. An <input> element can be of type text field, checkbox, password, radio button, submit button, and more. Text Fields <input type="text"> defines a one-line input field that a user can enter text into: <form> First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"> </form>
Password Field <input type="password"> defines a password field: <form> Password: <input type="password" name="pwd"> </form> Radio Buttons <input type="radio"> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices: <form> <input type="radio" name= gender" value="male">male<br> <input type="radio" name= gender" value="female">female </form>
Checkboxes <input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices. <form> <input type="checkbox" name="vehicle" value="bike">i have a bike<br> <input type="checkbox" name="vehicle" value="car">i have a car </form> Text Area <html> <body> <textarea rows="10" cols="30"> The cat was playing in the garden. </textarea> </body> </html>
Submit Button <input type="submit"> defines a submit button. A submit button is used to send form data to a server. The data is sent to the page specified in the form's action attribute. The file defined in the action attribute usually does something with the received input: <form name="input" action="demo_form_action.asp" method="get"> Username: <input type="text" name="user"> <input type="submit" value="submit"> </form>
Drop down List <html> <body> <form action=""> <select name="cars"> <option value="volvo">volvo</option> <option value="saab">saab</option> <option value="fiat">fiat</option> <option value="audi">audi</option> </select> </form> </body> </html>
Drop-down list with a pre-selected value <html> <body> <form action=""> <select name="cars"> <option value="volvo">volvo</option> <option value="saab">saab</option> <option value="fiat" selected>fiat</option> <option value="audi">audi</option> </select> </form> </body> </html>
HTML Layouts Website Layouts Most websites have put their content in multiple columns (formatted like a magazine or newspaper). Multiple columns are created by using <div> or <table> elements. CSS are used to position elements, or to create backgrounds or colourful look for the pages. HTML Layouts - Using <div> Elements The div element is a block level element used for grouping HTML elements. The following example uses five div elements to create a multiple column layout.
<html> <body> <div id="container" style="width:500px"> <div id="header" style="background-color:#ffa500;"> <h1 style="margin-bottom:0;">main Title of Web page</h1></div> <div id="menu" style="backgroundcolor:#ffd700;height:200px;width:100px;float:left;"> <b>menu</b><br> HTML<br> CSS<br> JavaScript </div>
<div id="content" style="backgroundcolor:#eeeeee;height:200px;width:400px;float:left;"> Content goes here</div> <div id="footer" style="backgroundcolor:#ffa500;clear:both;text-align:center;"> Copyright W3Schools.com</div> </div> </body> </html>
CSS Box Model All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout. The CSS box model is essentially a box that wraps around HTML elements and it consists of: margins, borders, padding and the actual content. The box model allows us to place a border around elements and space elements in relation to other elements. The image below illustrates the box model:
The different parts are: Margin - Clears an area around the border. The margin does not have a background color, it is completely transparent Border - A border that goes around the padding and content. The border is inherited from the color property of the box Padding - Clears an area around the content. The padding is affected by the background color of the box Content - The content of the box, where text and images appear Example div { width: 220px; padding: 10px; border: 5px solid gray; margin: 0px;
CSS Border Properties The CSS border properties allow you to specify the style and color of an element's border. Border-style values: none: Defines no border dotted: Defines a dotted border dashed: Defines a dashed border solid: Defines a solid border Example p { border-top-style: dotted; border-right-style: solid; border-bottom-style: dotted; border-left-style: solid;
CSS Image Opacity / Transparency img { opacity: 0.4; filter: alpha(opacity=40); /* For IE8 and earlier */ the property opacity for transparency. The opacity property can take a value from 0.0-1.0. A lower value makes the element more transparent.
Text in Transparent Box <html> <head> <style> div.background { width: 500px; height: 250px; background: url(klematis.jpg) repeat; border: 2px solid black;
div.transbox { width: 400px; height: 180px; margin: 30px 50px; background-color: #ffffff; border: 1px solid black; opacity: 0.6; filter: alpha(opacity=60); /* For IE8 and earlier */ div.transbox p { margin: 30px 40px; font-weight: bold; color: #000000; </style> </head> <body>
<div class="background"> <div class="transbox"> <p>this is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. </p> </div> </div> </body> </html>