Welcome To CSS - Css Rules & Selectors Flashcards
CSS
Cascading Style Sheets
Cascading
(the way CSS applies one style on top of another)
Style sheets
control the look and feel of web documents
Inline CSS
An online style enables a unique style to be applied to a single element.
In order to use an inline style, add the style attribute to the relevant tags.
Example:
<p>
This is an example of inline styling.
</p>
Embedded/ Internal CSS
Internal styles are defined within the element inside the head section of an HTML page.
Example:
The following code styles all paragraphs…
<html>
<head>
<style>
p {
color:white;
background-color:gray;
}
<p> This is my first paragraph. </p>
<p> This is my second paragraph. </p>
External CSS
With this method, all styling rules are contained in a single text file, which is saved with the .css extension.
This CSS file is then referenced in the HTML using the tag. The element goes inside the head section.
The example:
HTML
<p> This is my first paragraph. </p>
<p> This is my second paragraph. </p>
<p> This is my third paragraph. </p>
CSS
P {
color: white;
background-color:gray;
}
CSS Syntax
A style rule has three parts:selector,property, andvalue.
For example, the headline color can be defined as:
h1 { color: orange; }
Type Selectors
This selector targets element types on the page.
For example, to target all the paragraphs on the page:
p {
color: red;
font-size:130%;
}
CSS Declarations
always end with a semicolon, and declaration groups are surrounded by curly braces
id and class Selectors
id selectorsallow you to style an HTML element that has anidattribute, regardless of their position in the document tree. Here is an example of an id selector:
The HTML:<div><p> This paragraph is in the intro section.</p></div><p> This paragraph is not in the intro section.</p>
The CSS:
#intro {
color: white;
background-color: gray;
}
Descendant Selectors
These selectors are used to select elements that are descendants of another element. When selecting levels, you can select as many levels deep as you need to.
For example, to target only <em> elements in the first paragraph of the “intro” section:</em>
The HTML:<div><p class="first">This is a <em> paragraph.</em></p><p> This is the second paragraph. </p></div><p class="first"> This is not in the intro section.</p><p> The second paragraph is not in the intro section. </p>
The CSS:
#intro .first em {
color: pink;
background-color:gray;
}
The descendant selector matches all elements that are descendants of a specified element.</em>
