CSS - Styling Tags
Sometimes I forget how CSS sees the relationship from one tag to another and how to apply different CSS styling rules so I'm writing this post to help me remember. I'm using the book 'CSS - The missing manual' as a reference.
Ancestor : A HTML tag that wraps around another tag is its ancestor
Decendent : A tag inside one or more tags is a descendent. The <title> tag is inside the <head> and <html> tags
Parent : A parent tag is the closest ancestor of another tag. The <head> tag is the parent of <title>
Child : A tag thats wrapped by another tag is a child tag.
Sibling : Tags that are children of the same tag are called siblings
Styling Groups of Tags
To style groups of elements for example to have all header tags to have the same font and color you can create the following rule:
The Universal Selector (Asterisk *)
An asterisk * is a universal selector for selecting every element on the page.
You can also use it as part of a decendent selector.
Psuedo-Classes and Pseudo-Elements
Sometime you need to select elements or parts of the webpage that don't have tags.
:before : This pseudo-element lets you add content before a certain element
:after : This pseudo-element lets you add content after an element
:focus : This pseudo-class applies when a user clicks of focus on a element. Like an form input field, you could change the color for example.
Advanced Selectors
Child Selectors
CSS lets you format the children of another tags with a child selector. The child selector uses an additional symbol - an angle bracket >.
Adjacent Siblings
The adjacent sibling selector uses a plus sign (+) to join one element to the next. To select every paragraph tag <p> preceding a heading <h1> tag use the following.
Ancestor : A HTML tag that wraps around another tag is its ancestor
Decendent : A tag inside one or more tags is a descendent. The <title> tag is inside the <head> and <html> tags
Parent : A parent tag is the closest ancestor of another tag. The <head> tag is the parent of <title>
Child : A tag thats wrapped by another tag is a child tag.
Sibling : Tags that are children of the same tag are called siblings
Styling Groups of Tags
To style groups of elements for example to have all header tags to have the same font and color you can create the following rule:
h1, h2, h3, h4 {color: #0EF333;}The Universal Selector (Asterisk *)
An asterisk * is a universal selector for selecting every element on the page.
* {font-weight : normal;}You can also use it as part of a decendent selector.
#someDiv * {color :red} //This will make all element text color redPsuedo-Classes and Pseudo-Elements
Sometime you need to select elements or parts of the webpage that don't have tags.
:before : This pseudo-element lets you add content before a certain element
p:before {content : 'hello world';}:after : This pseudo-element lets you add content after an element
p:after {content : 'Goodbye world';}:first-child :This pseudo-element will select and format only the first element, no matter how many other child elements after it.
p:first-child{font-weight : bold;}:focus : This pseudo-class applies when a user clicks of focus on a element. Like an form input field, you could change the color for example.
input:focus {font-weight : bold;}Advanced Selectors
Child Selectors
CSS lets you format the children of another tags with a child selector. The child selector uses an additional symbol - an angle bracket >.
body > h1 //this will select any <h1> tag thats a child of the body
Adjacent Siblings
The adjacent sibling selector uses a plus sign (+) to join one element to the next. To select every paragraph tag <p> preceding a heading <h1> tag use the following.
h1 + p
Comments
Post a Comment