Inline Styles
Although CSS is different from the HTML language, but you can also use inline styles CSS code written in HTML code.
To add style to the HTML element, you can direct the opening tag add style attributes inside, then you can set it equal to the CSS style (s) you want to apply.
Inline styles are a quick way of directly styling an HTML element.
The <style> Tag
Inline styles is a quick method to add HTML style, but also has its limitations. If you need multiple <h1> elements add style, you must manually (manually) to each element add inline styling.
Fortunately, by using the <style> element, HTML allows you to write CSS code in its interior, CSS can be written between opening and closing <style> tags. However, when used, <style> Element must be placed in the <head> internal element.
The .css file
Developers To avoid mixing code, it will be HTML and CSS code stored in different files.
By using the suffix .css, you can create a CSS file, such as: style.css
Linking the CSS File
You can use the <link> element to link the HTML and CSS files. It must be placed within the head of the HTML file. It is self-closing and labels, and has the following three properties:
href — like the anchor element, the value of this attribute must be the address, or path, to the CSS file.
type — this attribute describes the type of document that you are linking to (in this case, a CSS file). The value of this attribute should be set to text/css.
rel — this attribute describes the relationship between the HTML file and the CSS file. Because you are linking to a stylesheet, the value should be set to stylesheet.
When after a good link, <link> element should appear as follows:
Tag Name
CSS can select HTML elements by using an element’s tag name. A tag name is the word (or character) between HTML angle brackets.
For example, in HTML, the tag for a paragraph element is <p>. The CSS syntax for selecting <p> elements is:
In the example above, all paragraph elements will be selected using a CSS selector.
Class Name
To select this element using CSS, we could use the following CSS selector:
To select an HTML element by its class using CSS, a period (.) must be prepended to the class’s name.
Multiple Classes
ID Name
If an HTML element that needs to be given individual style, you can add its ID attribute.
To select it in the CSS, you need to add # in front of ID name.
Specificity clarity
Specificity refers to the browser which you want to apply a CSS style. ID has the highest priority, followed by clss, and finally the tag.
H1 color image above should firebrick, since the class selector is more specific than the tag selector.
For ease of editing style, the best way is: Priority use a tag selector, if not, add a class selector, if not clear enough, then add an ID selector.
Chaining Selectors
If there was a .special class for h1 elements, the CSS would look like:
The code above would select only the h1 elements that have a class of special.
Nested Elements
CSS can also choose those elements nested within other HTML elements of.
To select nested inside the <li>:
Before CSS selector to a tag, class, or ID will increase its specificity .
Important
! important attribute may be applied with! important properties of the cover (the override) all other styles, regardless of how high a priority. Therefore, it is rarely used , because it is difficult to be covered.
! CSS important in grammatical structure is as follows:
Because! Important property p is used to color the selector, so all of the Elements p side are blue, clearer .main p selector even if there is a downward with respect to the selector p.
Multiple Selectors
To make CSS more concise (simple), you can make multiple selectors, it prevents duplicate code appears.
For example, the code is repeated in FIG winded (Repetitive) properties:
Georgia is repeated twice in two selectors, we can: font-family is not to be separated by commas (comma) two selectors, then use their common style:
By separating the CSS selectors with a comma, both the h1 and the .menu elements will receive the font-family: Georgia styling.