Embed Size (px)
Citation preview
CSSHTML is a style sheet language used for describing the presentation of a document written in a markup language (e.g. HTML).
CSS stands for Cascading Style Sheets.
Why CSS?HTML was intended to describe the content of a web page, not the design.
As HTML developed it allowed web designers to define design style information for a page and so the HTML for each web page became unwieldy. Changing a web site design involved changing the attributes on every web page.
Why CSS?HTML was intended to describe the content of a web page, not the design.
As HTML developed it allowed web designers to define design style information for a page and so the HTML for each web page became unwieldy. Changing a web site design involved changing the attributes on every web page.
CSS removes the style information from the HTML page.
CSS style definitions are commonly stored in a separate file. Changes to the style information in this file can change the style of the entire website.
Inline, Internal & External CSSInline CSSWith Inline CSS, the style attribute is included within an HTML tagOverrides any other CSS formattingAdvantage: Can be used for quick fixesDisadvantage: Somewhat defeats the purpose of CSS
Inline, Internal & External CSSInternal CSSWith internal CSS, the internal styles are defined in the <head> of each HTML page.Advantage: Faster download – CSS loads with the pageDisadvantage: Each page may need to be updated if redesigning the style.Larger file size.
Inline, Internal & External CSSExternal CSSWith external CSS, the CSS is held in a separate file.Advantage: Changing the file will update the style change across all pages in website
CSSCSS RuleA CSS rule set consists of a selector and a declaration block.
CSSCSS RuleA CSS rule set consists of a selector and a declaration block.
CSSIn this example:Each page will have the background colour #ffffb3All h1 content will be red, centredAll paragraph content will be Times New Roman 18
CSSID SelectorIt’s possible to define individual elements which to have a style specified in CSS. To do this, use an ID Selector.Note that ID Selectors can only be used once on any page.
CSS HTML
CSSClass SelectorClass selectors work like ID selectors but they can be applied to many elements on a page.
CSS HTML
CSSExternal CSSWhen using external CSS, each page needs to specify the name of the CSS file being usedThe <link> tag is used and should be placed within the <head> element of the page
