Download to read offline
Uploaded byJJFajardo1
PPTX, PDF94 views
HTML to CSS Basics Exer 2.pptx
CSS (Cascading Style Sheets) is used to determine the display and formatting of HTML elements. It separates content from presentation. There are three ways to use CSS - inline styles within HTML elements, internal style sheets within the <head> section, and external style sheets in separate files linked via <link> tags. External style sheets allow consistent formatting across multiple pages by editing one file. Browsers prioritize conflicting styles based on their origin, with inline styles taking highest priority and external styles the lowest.
Recommended
![[Final] ReactJS presentation](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2f65cfd4f9-740f-4f41-b769-b496b6e60802-170119143904-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
More Related Content
What's hot
Similar to HTML to CSS Basics Exer 2.pptx
Recently uploaded
HTML to CSS Basics Exer 2.pptx
- 1.
- 2.What is CSS?CSS ("Cascading Style Sheets") determines how theelements in HTML5 documents are displayed andformatted. By using CSS, we separate the content of a web pagefrom the presentation (format and styling) of that content. CSS enables us to make all pages of our website looksimilar and consistent. The power of CSS is that it allows us to make site-wideformatting changes by making edits to a single file.
- 3.Three Ways toUse CSS1. Inline Style - CSS code is placed directly into an HTML elementwithin the <body> section of a web page.2. Internal Style Sheet - CSS code is placed into a separate, dedicatedarea within the <head> section of a web page.3. External Style Sheet - CSS code is placed into a separate computerfile and then linked to a web page.We can add CSS code in any combination of three differentways:Let's take a look now at examples of each of these methods.
- 4.Inline StyleTo definean inline CSS style, we simply add the style attribute to anHTML element with the CSS declaration as the attribute value:An inline style declaration ishighly specific and formats justone element on the page. Noother elements, including other<h2> elements on the page, willbe affected by this CSS style.Since inline styles have limited scope and do not separate content from presentation,their use is generally discouraged. We won't be using inline styles much in this class.<h2 style="color:red;">CAUTION: Icy Road Conditions</h2><h2>Please Slow Down!</h2>
- 5.Internal Style SheetTouse an internal CSS style sheet, we add a <style> section within the<head> of the page. All our CSS declarations go within this section:Styles declared in the internal style sheet affect all matching elements on thepage. In this example, all <h2> page elements are displayed in the color red.Since formatting declarations are entirely in the <head> section, away from the actualpage content, internal CSS style sheets do a much better job than inline styles atseparating content from presentation.<head>...<style type="text/css">h2 {color:red;}</style></head><body><h2>CAUTION: Icy Road Conditions</h2><h2>Please Slow Down!</h2></body>
- 6.External Style SheetTouse an external CSS style sheet, we create a new file (with a .cssextension) and write our style declarations into this file. We then add a<link> element into our HTML file, right after the opening <head> tag:h2 {color:red;}style.css (separate file):<head><link rel="stylesheet" type="text/css"href="style.css">...</head><body><h2>CAUTION: Icy Road Conditions</h2><h2>Please Slow Down!</h2></body>example.html file:The <link> element instructs the browser to load the external file specified bythe href attribute and to apply the CSS style declarations contained there.
- 7.page1.htmlBenefit of ExternalStyle SheetThe real power of using an external style sheet is that multiple webpages on our site can link to the same style sheet:h1 {color:red;}style.css :Styles declared in an external style sheet will affect all matching elements onall web pages that link to the style sheet. By editing the external style sheet,we can make site-wide changes (even to hundreds of pages) instantly.page2.html page3.html
- 8.Internal vs. ExternalStyle Sheets are appropriate for very small sites, especially those that have just asingle page. might also make sense when each page of a site needs to have acompletely different look.Internal Style Sheets: are better for multi-page websites that need to have a uniform lookand feel to all pages. make for faster-loading sites (less redundant code). allow designers to make site-wide changes quickly and easily.External Style Sheets:External style sheets create the furthest separation between content andpresentation. For this reason - and the others listed above - we'll considerexternal style sheets to be the best option when creating a new site.
- 9.p {color:red;}CSS Terminologyand Syntax:Now let's take a closer look at how we write CSS code. The correctsyntax of a CSS declaration is: selector {property:value;}Internal and external style sheets use this identical CSS syntax. Internal stylesheets must use the opening and closing <style> tags to surround the CSScode, while external style sheets do not use the <style> element.A semicolon must be placed after each CSS declaration. Omitting this semicolon is thesingle most common mistake made by those learning CSS.selectorpropertyvalue
- 10.Setting Multiple PropertiesWecan define as many properties as we wish for a selector:In this example, all text within paragraph elements will show in red italics thatis centered on the page.p {color:red;font-style:italic;text-align:center;}p {color: red;font-style: italic;text-align: center;}Just as with HTML, browsers ignore space characters in CSS code. Manydesigners take advantage of this fact by placing the opening and closing curlybrackets on their own dedicated lines. Each of the property and valuepairings are placed on their own indented line, with a space after the colon.This makes the code far easier to read.
- 11.CSS Text PropertiesThefollowing properties can be specified for any element that containstext, such as <h1> through <h6>, <p>, <ol>, <ul>, and <a>:Property Some Possible Valuestext-align: center, left, right, justifytext-decoration: underline, line-through, blinkcolor: blue, green, yellow, red, white, etc.font-family: Arial, Verdana, "Times New Roman"font-size: large, 120%, 20px (pixels)font-weight: bold, normalfont-style: italic, normalThe actual list of available properties and values is quite long, but the oneslisted above are the most common for formatting text via CSS.
- 12.How Browsers ProcessCSS A web browser will process all CSS code it encounters, even if it isfrom all three methods. For example, an external style sheet could define the font of aheading, an internal style sheet could specify the font size of theheading, and an inline style could italicize the heading. All threewould be applied. Sometimes a browser will receive conflicting instructions from theCSS code. For example, what if each of the above CSS sourcesspecified a different color for the heading text?Browsers need a consistent way of settling these formatting conflicts in aconsistent fashion. That is where the "cascade" of cascading style sheetscomes into effect.
- 13.What Does "Cascading"Mean?1. Inline style (highest priority)2. Internal style sheet (second priority)3. External style sheet (third priority)4. Web browser default (only if not defined elsewhere)We use the term "cascading" because there is an established order ofpriority to resolve formatting conflicts:For each HTML element, the browser will see which styles are defined inlineand from internal and external style sheets. For any conflicts detected, it willuse this priority system to determine which format to display on the page.In the prior example, the heading text would display in the color specified bythe inline style, which outranks all the others.If multiple, conflicting styles are defined in the same style sheet, only the final one willbe applied. Be careful, as this is another common mistake committed by beginners.