Home |
Last modified: 23-02-2024 |
https://www.htmlprimer.com/htmlprimer/selectors-properties-and-values-basic-css-concepts
Every CSS document is composed of many CSS declaration that follow the same syntax. It is of the form: Selector
{property: value}
Selectors can be page elements, div elements, or class elements. Page elements can be recognized by the absence of any symbol before the element's name. Divs are written as #div_name, and classes as .class_name. Values for CSS properties can be hexadecimal notation for colors or the names of the colors, zero, or positive and negative integers for pixel and em values.
Having a doctype is an important requirement to make sure your CSS designs work in all browsers:
HTML follows certain rules—these rules are contained in a Document Type Definition file, otherwise known as a DTD. A DTD is an XML document that explains what tags, attributes, and values are valid for a particular type of HTML. And for each version of HTML, there’s a corresponding DTD.
You must validate your page to ensure there aren’t any typos or other mistakes that can mess up how your HTML displays. To validate your pages, either visit http://validator.w3.org or install an extension in your browser. Use http://jigsaw.w3.org/css-validator/ to validate a CSS file.
A style is, in fact, made up of two elements: the web page element that the browser formats (the selector) and the actual formatting instructions (the declaration block).
The <div> tag and the <span> tag are like empty vessels that you fill with content. A div is a block, meaning it has a line break before it and after it, while a span appears inline, as part of a paragraph. Otherwise, divs and spans have no inherent visual properties, so you can use CSS to make them look any way you want. The <div> tag is a great way to subdivide a page into logical areas, like a banner, footer, sidebar, and so on. The <span> tag is used for inline elements; that is, words or phrases that appear inside of a larger paragraph or heading.
When there’s no HTML tag that exactly delineates where you want to put a class or ID style you’ve created, use a <div> or <span> to fill in the gaps. The div tag identifies a logical division of the page, like a banner, navigation bar, sidebar, or footer.
The div tag has the unique ability to contain several block-level elements, making it a great way to group tags that are logically related such as the logo and navigation bar in a page’s banner or a series of news stories that compose a sidebar.
A <span> tag, on the other hand, lets you apply a class or ID style to just part of a tag. You can place <span> tags around individual words and phrases (often called inline elements) within paragraphs to format them independently.
Stop using <b> and <i> to make text bold and italic. CSS can make any tag bold or italic, so you don’t need these formatting-specific tags. However, if you want to really emphasize a word or phrase, then use the <strong> tag (browsers display <strong> text as bold anyway). For slightly less emphasis, use the <em> tag (browsers italicize content inside this tag).
Don’t abuse the <br> tag. If you grew up using the <br> tag (<br /> in XHTML) to insert a line break without creating a new paragraph, then you’re in for a treat. Using CSS’s margin controls you can easily set the amount of space you want to see between paragraphs, headers, and other block-level elements.
To force the browser to refetch a CSS file from the web, hit CTRL+F5.
Slightly different ways to include a style sheet in an HTML/XHTML pages:
Here's how to include extra files:
Every CSS style has two basic parts: a selector and a declaration block. The declaration block carries the formatting properties—text color, font size, and so on—but that’s just the pretty stuff.
When you want to give one or more elements a look that’s different from related tags on a page, you can use a class selector. You create a class selector by giving it a name and then applying it to just the HTML tags you wish to format.
All class selector names must begin with a period. CSS permits only letters, numbers, hyphens, and underscores in class names. After the period, the name must always start with a letter. Class names are case sensitive. Once you create a class style, you can apply it to just about any tag on the page. After you create a class rule, you must then indicate where you want to apply that formatting. To do so, you add a class attribute to the HTML tag you wish to style, eg. <p class="special">.
CSS reserves the ID selector for identifying a unique part of a page, like a banner, navigation bar, or the main content area. Use IDs to identify sections that occur only once per page. Consider using an ID selector to sidestep style conflicts, since web browsers give ID selectors priority over class selectors. An ID selector is identified with a pound or hash symbol, eg. #banner. To use an ID: <p id="copyright">. IDs also let you link to a specific part of a page, making long web pages quicker to navigate.
Group selectors let you apply a style to multiple selectors at the same time: h1, p, .copyright, #banner { color: #F1CD33; }
An asterisk (*) is universal selector shorthand for selecting every single tag, eg. * { font-weight: bold; }. You can even use the universal selector as part of a descendent selector, so you can apply a style to all of the tags that descend from a particular page element. For example, #banner * selects every tag inside the page element to which you’ve applied the #banner ID.
Choosing whether to style your page with tag selectors or class selectors is a tradeoff. What you need is a way to combine the ease of tag selectors with the precision of classes and IDs. CSS has just the thing—descendent selectors. Descendent selectors let you take advantage of the HTML family tree by formatting tags differently when they appear inside certain other tags or styles: h1 strong { color: red; } . The descendent selector approach adds no HTML and no more work beyond creating the style!
You can build complex descendent selectors combining different types of selectors: p.intro a { color: yellow; } Quick translation: Apply this style to every link (a) that’s a descendent of a paragraph (p) that has the intro class applied to it.
Pseudo-Classes and pseudo-elements are used to select parts of a web page that don’t have tags per se, but are nonetheless easy to identify, like the first line of a paragraph or a link as you move your mouse over it (a:link, a:visited, a:hover, a:active, :first-letter, :first-line, etc.)
.myclass -> use in <span></span>
#mycontainer -> use with "id="
<div class=#myclass> or <div id=mycontainer>
In element, don't confuse margin (outside) and padding (inside).
To put first letter in capital: p:first-letter {...}
"as divs are supposed to be unique on a page, it's generally better to use class styles when you are talking about controlling text.)"
you need to create a class style. Instead of using an HTML tag, you will use .(dot)name.
.redtext {
color: #FF0000;
}
<p class="redtext">
instead of adding the redtext style to the whole paragraph, add it only to a few words with the span tag: <p>Simple <span class="redtext">content text</span> ready for control.</p>
.menu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
}
.menu a:link {
color: #336600;
text-decoration: none;
}
<p class="menu"><a href="services.html">services</a> | <a href="products.html">products</a>
| <a href="company.html">company</a> | <a href="cotnact.html">contact</a></p>