CSS
Styling HTML with CSS
This definition explains the meaning of CSS (cascading style sheets) and how using them with HTML pages is a user interface (UI) development best practice that complies with the separation of concerns design pattern.
This definition explains the meaning of CSS (cascading style sheets) and how using them with HTML pages is a user interface (UI) development best practice that complies with the separation of concerns design pattern.
- CSS stands for Cascading Style Sheets.
- CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
- CSS saves a lot of work. It can control the layout of multiple webpages all at once.
CSS can be added to HTML elements in 3 ways:
Inline - By using the style attribute in HTML elements
:- An inline CSS is used to apply a unique style to a single HTMLelement.
eg: <h1 style="color:blue;">This is a Blue Heading</h1>
Internal - By using a <style> element in the <head> section
:- An internal CSS is used to define a style for a single HTML page.
An internal CSS is defined in the <head> section of an HTML
page, within a <style> element:
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
External - By using an external CSS file.An external style sheet is used to define the style for manyHTMLpages.With an external style sheet, you can change the look of an entire
web site, by changing one file.
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
CSS is the standard and preferred mechanism for formatting HTML pages.
Conforming with the separation of concerns design pattern and best practice, cascading style sheets provide a central location in which information about what various fonts, foreground colors, background colors, italicization and emphasization should be applied to various HTML elements within a webpage. Cascading style sheets can also control how various parts of a page, such as the header, footer, body, article content, sections and asides, are laid out on the page. This is extremely helpful when content must be laid out in a dramatically different fashion depending upon whether it is being viewed on a desktop, tablet or a smartphone.
Implementing CSS formatting
The cascading nature of CSS files is attributed to the fact that style information for a webpage can be defined in any of three different places, also known as style levels.
The preferred practice is to put style information in a separate file with a .css extension. Using formatting information contained within an external cascading style sheet is accomplished via the HTML link tag. A webpage can link to zero, one or may different external CSS files by using multiple link tags.
<link rel="stylesheet" type="text/css" href="what-is-css.css">
However, on smaller projects or in cases where a given webpage is interested in overriding some of the style information in an external CSS file, style information can be written within a <style> tag inside the webpage. This is known as an internal style level. Internal style level information within a webpage will override any style information provided by an external cascading style sheet.
Cascading style rules
Furthermore, all HTML5 tags have a style property that one can use to override any style information defined at either the page style level or in an external style sheet. Using an HTML tag to define CSS information is referred to as an inline style. The fact that style rules dictate that parent-level styles are overridden by page-level styles and page-level styles are overridden by tag-level styles is what is meant by style sheets being cascading.
Style sheet language
CSS syntax is relatively simple. The name of the element to style, referred to as the CSS selector, is followed by braces, within which various attributes, such as font-size and background-color are assigned values.
CSS selectors
CSS selectors can be HTML tags, class attributes assigned to HTML tags and even states of a given element, such as the disabled state of an input field or the hover state of an anchor link. Making it possible to customize the style of components depending upon their state or how they are classified on a page provides the graphic designer a great deal of flexibility in determining how a webpage will be rendered by the browser.
CSS example
Notice that, when the webpage renders, any text that is not contained within a style just renders as plain black text on a white background.
Any text contained within a paragraph tag without an inline style pulls formatting information from the internal stylesheet, which means it is rendered as blue, 14-pixel, italicized text on a silver background. However, when the inline style is used, the internal style overrides and matches properties, while leaving nonconflicting attributes alone, causing the text to render as white, 20-pixel, italicized text on a silver background.
To Get more formation visit w3 school: click here
