Download to read offline
Module 2 CSS . cascading style sheet and its uses
- 1.
- 2. CSS is aW3C standard for describing the appearance of HTML elements. Another common way to describe CSS’s function is to say that CSS is used to define the presentation of HTML documents. With CSS, we can assign font properties, colors, sizes, borders, background images, and even position elements on the page. Benefits of css Improved control over formatting. The degree of formatting control in CSS is significantly better than that provided in HTML. CSS gives web authors fine-grained control over the appearance of their web content. Improved site maintainability. Websites become significantly more maintainable because all formatting can be centralized into one CSS file, or a small handful of them. This allows you to make site-wide visual modifications by changing a single file.
- 3. Improved accessibility. CSS-drivensites are more accessible. By keeping presentation out of the HTML, screen readers and other accessibility tools work better, thereby providing a significantly enriched experience for those reliant on accessibility tools. Improved page download speed. A site built using a centralized set of CSS files for all presentation will also be quicker to download because each individual HTML file will contain less style information and markup, and thus be smaller. Improved output flexibility. CSS can be used to adopt a page for different output media. This approach to CSS page design is often referred to as responsive design.
- 4. Css Syntax A CSSdocument consists of one or more style rules. A rule consists of a selector that identifies the HTML element or elements that will be affected, followed by a series of property:value pairs The series of declarations is also called the declaration block. A declaration block can be together on a single line, or spread across multiple lines. The browser ignores white space (i.e., spaces, tabs, and returns) between your CSS rules so you can format the CSS however you want.
- 6. Location of styles INLINESTYLES • Inline styles are style rules placed within an HTML element via the style attribute • An inline style only affects the element it is defined within and overrides any other style definitions for properties used in the inline style • Using inline styles is generally discouraged since they increase bandwidth and decrease maintainability
- 7. Embedded style sheet EmbeddedStyle (also called internal styles) are style rules placed within the <style> element (inside the <head> element of an HTML document) While better than inline styles, using embedded styles is also by and large discouraged. Since each HTML document has its own <style> element, it is more difficult to consistently style multiple documents when using embedded styles. External Style Sheet External style sheets are style rules placed within a external text file with the .css extension. This is by far the most common place to locate style rules because it provides the best maintainability. To reference an external style sheet, you must use a <link> element (within the <head> element
- 10. Selectors When defining CSSrules, you will need to first use a selector to tell the browser which elements will be affected by the property values. CSS selectors allow you to select individual or multiple HTML elements. • element selectors • Class selectors • id selectors • attribute selectors • pseudo-element and pseudo-Class selectors • Contextual selectors
- 11. Element selectors • Elementselectors select all instances of a given HTML element. • You can select all elements by using the universal element selector, which is the * (asterisk) character. • You can select a group of elements by separating the different element names with commas.
- 12. Class selectors • Aclass selector allows you to simultaneously target different HTML elements regardless of their position in the document tree. • If a series of HTML elements have been labeled with the same class attribute value, then you can target them for styl ing by using a class selector, which takes the form: period (.) followed by the class name.
- 14. id selectors An idselector allows you to target a specific element by its id attribute regardless of its type or position. If an HTML element has been labeled with an id attribute, then you can target it for styling by using an id selector, which takes the form: pound/hash (#) followed by the id name.
- 15. Attribute Selectors An attributeselector provides a way to select HTML elements either by the presence of an element attribute or by the value of an attribute.
- 17. Pseudo-element And Pseudo-classSelectors • A pseudo-element selector is a way to select something that does not exist explicitly as an element in the HTML document tree but which is still a recognizable select able object. • For instance, you can select the first line or first letter of any HTML element using a pseudo-element selector. A pseudo-class selector does apply to an HTML element, but targets either a particular state or, in CSS3, a variety of family relationships.
- 20. Contextual selectors A contextualselector (in CSS3 also called combinators) allows you to select elements based on their ancestors, descendants, or siblings.
- 21. The Cascade: howstyles interact • The “Cascade” in CSS refers to how conflicting rules are handled. • CSS uses the following cascade principles to help it deal with conflicts: inheri tance, specificity, and location Inheritance • Inheritance is the first of these cascading principles. • Many (but not all) CSS proper ties affect not only themselves but their descendants as well. Font, color, list, and text properties are inheritable • layout, sizing, border, background, and spacing properties are not.
- 24. Specificity Specificity is howthe browser determines which style rule takes precedence when more than one style rule could be applied to the same element. In CSS, the more specific the selector, the more it takes precedence (i.e., overrides the previous definition). Another way to define specificity is by telling you how it works. The way that specificity works in the browser is that the browser assigns a weight to each style rule; when several rules apply, the one with the greatest weight takes precedence.
- 27. Location Finally, when inheritanceand specificity cannot determine style precedence, the principle of location will be used. The principle of location is that when rules have the same specificity, then the latest are given more weight. For instance, an inline style will override one defined in an external author style sheet or an embedded style sheet. Similarly, an embedded style will override an equally specific rule defined in an external author style sheet if it appears after the external sheet’s <link> element. Styles defined in external author style sheet X will override styles in external author style sheet Y if X’s <link> element is after Y’s in the HTML document.
- 29. The Box Model InCSS, all HTML elements exist within an element box
- 30.
- 31. Borders Borders provide away to visually separate elements. You can put borders around all four sides of an element, or just one, two, or three of the sides.
- 32. Margins and padding Marginsand padding are essential properties for adding white space to a web page, which can help differentiate one element from another.
- 34.
- 36.
- 37.
- 39. <span> and <div>in HTML and CSS Both <span> and <div> are generic HTML container tags. They don't inherently convey any semantic meaning on their own. Their power comes from how we use them in conjunction with CSS (and JavaScript). <div> (Division): Default Display: block Behavior: A <div> typically takes up the full available width of its parent container and forces a new line before and after it.
- 40. Use Cases: • StructuringLayouts: Ideal for creating major sections or divisions of your webpage (e.g., header, navigation, main content area, sidebar, footer). • Grouping Block-level Elements: When you want to apply common styling or positioning to a group of paragraphs, headings, lists, etc. • Containing Other divs: You often nest divs to create complex layouts.
- 41. span> (Span): • DefaultDisplay: inline • Behavior: A <span> only takes up as much width as its content requires and does not force a new line. It flows along with the surrounding text, just like a strong (<strong>) or emphasis (<em>) tag. Use Cases: • Styling Small Portions of Text: Perfect for applying a specific style (color, font-size, bolding, etc.) to a few words or characters within a larger block of text. • Highlighting Keywords: Changing the color of a specific term in a sentence. • Targeting Inline Elements for JavaScript: If you need to manipulate a small piece of text dynamically.