CSS Rules and Selectors part 2

Type Selectors



The most common and easy to understand selectors are 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%;
}Try It Yourself

A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly braces.

Comments

Post a Comment

Popular posts from this blog

font-family part 1

Image
The font-family Property The font-family property specifies the font for an element.  There are two types of font family names:  -  font family : a specific font family (like Times New Roman or Arial) -  generic family : a group of font families with a similar look (like Serif or Monospace) Here is an example of different font styles: The HTML: <p class="serif"> This is a paragraph shown in serif font. </p> <p class="sansserif"> This is a paragraph shown in sans-serif font. </p> <p class="monospace"> This is a paragraph shown in monospace font. </p> <p class="cursive"> This is a paragraph shown in cursive font. </p> <p class="fantasy"> This is a paragraph shown in fantasy font. </p> The CSS: p.serif { font-family: "Times New Roman", Times, serif ; } p.sansserif { font-family: Helvetica, Arial, sans-serif ; } p.monospace { font-family: ...
Read more

Word-spacing part 1

Image
The word-spacing Property The word-spacing property specifies the  space between words  in a text. Just like the letter-spacing property, you can set the word-spacing values as  normal ,  length , and  inherit .  The HTML: <p class="normal">This paragraph has no additional word-spacing applied.</p> <p class="px">This paragraph is word-spaced at 30px.</p> The CSS: p.normal { word-spacing: normal ; } p.px { word-spacing: 30px ; } Try It Yourself Result: When a weird spacing is used, and it is necessary to keep the selected paragraph with normal word spacing, the  normal option is usually used.
Read more

Background attachment part 1

Image
The background-attachment Property The background-attachment property sets whether a background image is fixed or scrolls with the rest of the page. Even if an element has a scrolling mechanism, a "fixed" background doesn't move with the element. The CSS: body { background-image: url("css_logo.png"); background-repeat: no-repeat; background-attachment: fixed ; } Try It Yourself Result: Tap  Try It Yourself  to play around with the code!
Read more