WEEK 5 Flashcards
This rule will render all the paragraphs in black if they are a direct child of the
element. Other paragraphs put inside other elements like or would not have any
effect of this rule.
body > p {
color: #000000;
}
Child Selectors
You can also apply styles to HTML elements with particular attributes. The style
rule below will match all the input elements having a type attribute with a value of
text:
input [type=”text”]{
color: #0000000;
}
Attribute Selectors
Selects all paragraph elements whose lang attribute contains the
word “fr”.
p[lang~=”fr”]
There are following rules applied to attribute selector:
- p[lang]
- p[lang=”fr”]
- p[lang~=”fr”]
- p[lang|=”en”]
Selects all paragraph elements with a lang attribute.
p[lang]
Selects all paragraph elements whose lang attribute has a value of
exactly “fr”.
p[lang=”fr”]
Selects all paragraph elements whose lang attribute contains
values that are exactly “en”, or begin with “en-“.
p[lang|=”en”]
You may need to define MULTIPLE STYLE RULES for a single element. You can define
these rules to combine multiple properties and corresponding values into a single
block.
Here all the property and value pairs are separated by a semicolon (;). You can
keep them in a single line or multiple lines. For better readability, we keep them in
separate lines.
Multiple Style Rules
You can apply a style to many selectors if you like. Just separate the selectors with
a comma, as given in the following example:
Group Selectors
You can use style attribute of any HTML
element to define style rules. These rules will be applied to that element only.
Inline CSS – The <style> Attribute</style>
The element can be used to include an
external stylesheet file in your HTML document. An external style sheet is a
separate text file with .css extension. You define all the Style rules within this text
file and then you can include this file in any HTML document using element.
External CSS – The <link></link> Element -
You can put your CSS rules into an
HTML document using the tags. Rules defined using this syntax will be applied to
all the elements available in the document
Embedded CSS – The <style> Element</style>
It is used to import an external
stylesheet in a manner similar to the element.
Imported CSS - @import Rule
Specifies the style sheet language as a content-type (MIME type). This is a required attribute
Attribute- type
Value- text/css
Attributes of the Embedded CSS
Attribute- type
Value- text/css
