Web based School

Chapter 01, Learn how to use visual CSS rules to style various elements

Cascading Style Sheets is used to customizes how HTML elements appears. You can change the layout and design of any html page by defining different CSS styles.

1- CSS styles <h2 style="text-align: center;">This test is centered</h2> <p style="color: Red; font-size: 14px;">Red, 14-point text</p> CSS styles can be directly added to HTML elements by using the style attribute in the element’s opening tag. Each style declaration is ended with a semicolon.

2- CSS code <head> <style> h1 { color : Red ; } </style> </head> CSS code is enclosed in <style> tags, so the code surrounded by <style> tags will be interpreted as CSS syntax. In the above example we used the CSS code to set the foreground color for h1 element.

3- Using separate CSS files <head> <link href="style1.css" type="text/css" rel="stylesheet"> <link href="style2.css" type="text/css" rel="stylesheet"> <link href="mystyle3.css" type="text/css" rel="stylesheet"> </head> We can write differnet CSS codes into different .css files and then link these files to an HTML page using a <link> tag in the <head> section.

4- CSS styling code in HTML
It is a common practice to separate the styling code in CSS files from HTML page code. So we can change page styling in .css files without changing the HTML page code.

5- Linking an external stylesheet <link href="./directory/to/stylesheet/style1.css" rel="stylesheet" type="text/css"> The <link> element is used to link HTML documents to external CSS files. <link> uses the href attribute to specify the URL to the external CSS files, and 'type' is used to define the type of linked content ("text/css").

6- Class selectors .cell { color: #f0f0f0; } The CSS class selector matches elements based on the contents of their class attribute. For selecting elements having cell as the value of the class attribute, a . 'dot' needs to be inserted.

7- Multiple attribute values <div class=”valueA valueB valueC”></div> If you want to use multiple HTML attributes you need to use spaces to separate different values.

8- ID selectors #Page-title { font-weight: bold; } The CSS ID selector matches elements based on the contents of their id attribute which should be unique in the entire page.

9- Classes and ID selectors /* Selects all elements with class="column" */ .column { } /* Selects element with id="Page-title" */ #Page-title { } CSS classes can be reusable and applied to many elements. Class selectors are denoted with a period . followed by the class name. CSS ID selectors should be unique and used to style only a single element. ID selectors are denoted with a hash sign # followed by the id name.

10- CSS Selector Specificity /*implemented*/ h1#header { color: black; } /*not implemented*/ h1 { color: blue; } Specificity is a ranking system that is used when there are multiple conflicting property values that point to the same element. When determining which rule to apply, the selector with the highest specificity wins out. The most specific selector type is the ID selector, followed by class selectors, followed by type selectors. In this example, only ‘color: black’ will be implemented as it has an ID selector whereas ‘color: blue’ has a type selector.

11- CSS declaration format /* CSS declaration format: property-name: value; */ /* CSS declarations */ text-align: left; color: black; width: 200px; CSS declarations are used to set style properties and construct rules to apply to elements. The property name and value are separated by a colon.

12- Rule Sets h2 { color: black; text-align: left; } The rule set is the main building block of a CSS sheet and it contains selectors and declarations. The selector in the above example is h2 element. The declarations in the above example are color: black and text-align: left.

13- CSS fonts h1 { font-family: Arial; } #page-title { font-family: "Times New Roman"; } The font-family CSS property is used to specify the typeface in a rule set. Selected fonts need to exist on the computer.

14- Font size .entry-title { font-size: 18px; } To set the text size you need to use the "font-size" property.

15- Font weight p { font-weight: bold; } To set the boldness of text you need to use the font-weight property, the values are: bold or normal. <br><br> <b>16- Text alignment</b> <xmp> p { text-align: left; } To set the text alignment you need to use the "text-align" property, the values are : left, right, or center .

17- Foreground text color p { color : #f0f0ff ; } span { color : blue ; } To set the foreground text color of an element you need to use the color property, the value can be any supported color name or color code.

18-Background colors background-color: green; To set the background color of an element you need to use the background-color property, the value can be any supported color name or color code.

19- Background image body { background-image: url("back01.jpg"); } To set the background image of an element you need to use the background-image property, the value can be an image url.