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
This test is centered
Red, 14-point text
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
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
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
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
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
If you want to use multiple HTML attributes you need to use spaces to separate different values.
8- ID selectors
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" */
/* Selects element with id="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
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:
/* CSS declarations */
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
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
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
To set the text size you need to use the "font-size" property.
15- Font weight
To set the boldness of text you need to use the font-weight property, the values are: bold or normal.
16- Text alignment
To set the text alignment you need to use the "text-align" property, the values are : left, right, or center .
17- Foreground text color
color : #f0f0ff ;
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.
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
To set the background image of an element you need to use the background-image property, the value can be an image url.