Presentation is loading. Please wait.

Presentation is loading. Please wait.

Basics CSS Chapter 3 and chapter 4 Page Sections and the CSS Box Model 1.

Similar presentations


Presentation on theme: "Basics CSS Chapter 3 and chapter 4 Page Sections and the CSS Box Model 1."— Presentation transcript:

1 Basics CSS Chapter 3 and chapter 4 Page Sections and the CSS Box Model 1

2 Inheriting styles (explanation)explanation Inheriting styles (explanation)explanation body { font-family: sans-serif; background-color: yellow;} p { color: red; background-color: aqua; } a { text-decoration: overline underline; } h2 { font-weight: bold; text-align: center; } 2 CSS Output when multiple styles apply to an element, they are inherited a more tightly matching rule can override a more general inherited rule not all properties are inherited (notice link's color above)

3 The HTML id attribute and Internal Linking Spatula City! Spatula City! Our mission is to provide the most spectacular spatulas and splurge on our specials until our customers esplode with splendor! 3 CSS Output id attribute allows you to give a unique ID to any element on a page each ID must be unique; can only be used once in the page Spatula City! Our mission is to provide the most spectacular spatulas and splurge on our specials until our customers "esplode" with splendor!

4 The HTML id attribute and Internal Linking Visit textpad.com to get the TextPad editor. View our Mission Statement 4 CSS Output The a tag can be used to link to another section of the same document by specifying the element’s id as the link’s href. a link target can include an ID at the end, preceded by a # browser will load that page and scroll to element with given ID Visit textpad.com to get the TextPad editor.textpad.com View our Mission Statement

5 5 The HTML id attribute and Internal Linking Sets the id attribute for the h1 element Creates a link to the element in this document with id = bugs

6 6 The HTML id attribute and Internal Linking Creates a link to the element in this document with id = features Sets the id attribute for this h1 element

7 CSS ID selectors #mission { font-style: italic; font-family: "Garamond", "Century Gothic", serif; } 7 CSS Output ID Selector: CSS rule that applies only to a particular element on the page with a given ID.  In our example style applies only to the p that has the ID of mission Rule can be specified explicitly using a hash sign (#) followed by the id to select such as #mission  Also tagname#id cab be use: p#mission means the rule will be applied on p with id mission Spatula City! Our mission is to provide the most spectacular spatulas and splurge on our specials until our customers esplode with splendor!

8 The HTML class attribute Spatula City! Spatula City! See our spectacular spatula specials! Today only: satisfaction guaranteed. 8 CSS Output If you want to apply the same style to a several paragraphs, then the id attribute is not a good choice An id must be unique; no two elements can have the same id value. classes are a way to group some elements and give a style to only that group (I don't want ALL paragraphs to be yellow, just these three...) unlike an id, a class can be reused as much as you like on the page Spatula City! See our spectacular spatula specials! Today only: satisfaction guaranteed.

9 The CSS class selectors.special { /* any element with class="special" */ background-color: yellow; font-weight: bold; } p.shout { /* applies only to p elements with class=“shout" */ color: red; font-family: cursive; } 9 CSS Output Style-class declarations are preceded by a period and are applied to elements of the specific class – The HTML class attribute applies a style class to an element – Class selector is a CSS rule that applies only to particular elements on the page that have a given class applies rule to any element with class special, or a p with class shout

10 The CSS for tables table { caption-side: left; } 10 CSS caption-side CSS property sets the position of the table caption: – Can be top ( default ), bottom, left, right What will happen if we want to style columns? One option: create a class for the column then set the class attribute of each td and th tag in the column to be that of CSS class Another option to use the HTML col and colgroup elements to alter the appearance of the tag  The tag is useful for applying styles to entire column or set of columns, instead of repeating the styles for each cell, for each row  It can only be used inside a or a element

11 The CSS for tables.title { background-color : red; }.price { background-color : yellow; } 11 CSS Define two CSS classes Web Titles ISBN Title Price My first HTML $ My first CSS $49

12 CSS pseudo-classespseudo-classes CSS pseudo-classespseudo-classes 12 classdescription :active an activated or selected element :focus an element that has the keyboard focus (i.e., input element) :hover an element that has the mouse over it :link a link that has not been visited :visited a link that has already been visited :first-letter the first letter of text inside an element :first-line the first line of text inside an element :first-child an element that is the first one to appear inside another a:link { color: blue; } /* unvisited link */ a:visited { color: red; } /* visited link */ a:hover { color: green; } /* mouse over link */ a:active {color: black;} /* selected link */ CSS

13 Motivation for page sections 13 want to be able to style individual elements, groups of elements, sections of text or of the page (later) want to create complex page layouts

14 CSS for following examples for the next several slides, assume that the following CSS rules are defined.special { background-color: yellow; font-weight: bold; }.shout { color: red; font-family: cursive; } CSS

15 Sections of a page: Sections of a page: 15 Spatula City! Spatula City! See our spectacular spatula specials! We'll beat any advertised price! HTML a tag used to indicate a logical section or area of a page has no appearance by default, but you can apply styles to it Represents a major section or division of your HTML page (block) Output

16 16 Inline sections: Inline sections: 16 Spatula City! Spatula City! See our spectacular spatula specials! We'll beat any advertised price ! HTML has no onscreen appearance, but you can apply a style or ID to it, which will be applied to the text inside the span an inline element used purely as a range for applying styles Mostly used when you have a short inline piece of text that you want to apply a style to it Output

17 CSS context selectors 17 selector1 selector2 { properties } CSS applies the given properties to selector2 only if it is directly inside selector1 on the page (selector2 tag is immediately inside selector1 with no tags in between) Context selector: a CSS rule that applies only to elements that reside inside another particular elements applies the given properties to selector2 only if it is inside a selector1 on the page selector1 > selector2 { properties } CSS outerSelector innerSelector { property: value; property value; … }

18 Simple Example of CSS context selectors 18 Shop at Hardwick's Hardware... The best prices in town! Act while supplies last! HTML Output li strong { text-decoration: underline; } CSS

19 More complex example of CSS context selectors 19 Shop at Hardwick's Hardware... The best prices! Act while supplies last! HTML Output #ad li.important strong { text-decoration: underline; } CSS

20 Introduction to Layout Document flow - block and inline elements 20 Browsers uses a standard layout for pages. Block elements are laid out in the order they appear in the document from top to left.  Each block causes a line break.  A block element’s width is equal to entire page width in the browser.  A block element’s height is just enough to fit its text and contents.  A Block element may contain several inline elements. … Today, 24 hrs only, blowout sale! See Products info.

21 The CSS Box ModelBox Model The CSS Box ModelBox Model 21 For layout purposes, every element is composed of:  the actual element's content  a border around the element  padding between the content and the border (inside)  a margin between the border and other content (outside ) Box model is a set of rules that governs the size, shape, spacing, borders, and margins of page elements width = content width + L/R padding + L/R border + L/R margin height = content height + T/B padding + T/B border + T/B margin L: left; R: right; T: top; B =bottom

22 CSS properties for borders 22 h2 { border: 5px solid red; } Output CSS propertydescription border thickness/style/size of border on all 4 sides

23 More border properties 23 propertydescription border-colorborder-color, border-width, border-styleborder-width border-style specific properties of border on all 4 sides border-bottomborder-bottom, border-left, border-right, border-topborder-left border-rightborder-top all properties of border on a particular side border-bottom-colorborder-bottom-color, border-bottom-style, border-bottom-width, border-left-color, border-left-style, border-left-width, border-right-color, border-right-style, border-right-width, border-top-color, border-top-style, border-top-widthborder-bottom-style border-bottom-widthborder-left-color border-left-styleborder-left-width border-right-colorborder-right-style border-right-widthborder-top-color border-top-styleborder-top-width properties of border on a particular side Complete list of border properties

24 Border example 2 24 h2 { border-left: thick dotted #CC0088; border-bottom-color: rgb(0, 128, 128); border-bottom-style: double; } Output each side's border properties can be set individually if you omit some properties, they receive default values (e.g. border-bottom-width above)

25 Rounded corners with border-radius (CSS3)border-radius Rounded corners with border-radius (CSS3)border-radius 25 P { border: 3px solid blue; border-radius: 12px; padding: 0.5em; } Output each side's border radius can be set individually, separated by spaces

26 CSS properties for padding 26 propertydescription padding padding on all 4 sides padding-bottom padding on bottom side only padding-left padding on left side only padding-right padding on right side only padding-top padding on top side only Complete list of padding properties

27 Padding example 1 27 p { padding: 20px; border: 3px solid black; } h2 { padding: 0px; background-color: yellow; } Output

28 Padding example 2 28 p { padding-left: 150px; padding-top: 30px; background-color: fuchsia; } Output each side's padding can be set individually notice that padding shares the background color of the element

29 CSS properties for margins 29 propertydescription margin margin on all 4 sides margin-bottom margin on bottom side only margin-left margin on left side only margin-right margin on right side only margin-top margin on top side only Complete list of margin properties

30 Margin example 1 30 p { margin: 50px; background-color: fuchsia; } notice that margins are always transparent (i.e., they don't contain the element's background color, etc.) css Output

31 Margin example 2 31 p { margin-left: 8em; background-color: fuchsia; } each side's margin can be set individually css Output

32 CSS properties for dimensionsdimensions CSS properties for dimensionsdimensions 32 p { width: 350px; background-color: yellow; } h2 { width: 50%; background-color: aqua; } css Output propertydescription widthwidth, heightheight how wide or tall to make this element (block elements only) max-widthmax-width, max-height, min-width, min-heightmax-height min-widthmin-height max/min size of this element in given dimension Block element: default position is staked down vertically; default width is 100% of the page width; default height is the height of its inline content. Inline element: default position is left-to-right within the block ; default size is just large enough to fit its contents. Can we change these default values?

33 Centering a block element: auto margins 33 p { margin-left: auto; margin-right: auto; width: 750px; } css Output auto lets the browser decide the margins. Setting both margin sides to auto places the elements horizontally in the center works best if width is set (otherwise, may occupy entire width of page) to center inline elements within a block element, use text-align: center ;

34 Finding box model with Firebug 34 add-on tool that allows you to inspect the code to see a visual layout of its box model


Download ppt "Basics CSS Chapter 3 and chapter 4 Page Sections and the CSS Box Model 1."

Similar presentations


Ads by Google