04 – CSS Informatics Department Parahyangan Catholic University

 CSS allows us to create rules that specify how the content of an element should appear.  For example, we can specify that:  The background of the page is cream  All paragraphs should appear in gray using the Arial typeface  All level one headings should be in a blue, italic, Times typeface  Etc.

 The key to understanding how CSS works is to imagine that there is an invisible box around every HTML element.  CSS allows you to create rules that control the way that each individual box (and the contents of that box) is presented.

 CSS works by associating rules with HTML elements.  These rules govern how the content of specified elements should be displayed.  A CSS rule contains two parts: a selector and a declaration.

 Selectors indicate which element the rule applies to. To apply the same rule to more than one element, separate the element names with commas.  Declarations indicate how the elements referred to in the selector should be styled. Declarations are split into two parts (a property and a value),and are separated by a colon.

 Example:  This rule indicates that all elements should be shown in the Arial typeface.

 Example:  This rule indicates that all, and elements should be shown in the Arial typeface, in a yellow color.

 There are some ways to use CSS to your web page:  External CSS  Internal CSS  Inline CSS

 When building a site with more than one page, you should use an external CSS file.  This:  Allows all pages to use the same style rules (rather than repeating them in each page).  Keeps the content separate from how the page looks.  Means you can change the styles used across all pages by altering just one file (rather than each individual page).

 The element can be used in an HTML document to tell the browser where to find the CSS file used to style the page.  It is an empty element.  It lives inside the element.

 It should use three attributes:  href This specifies the path to the CSS file (which is often placed in a folder called css or styles).  type This attribute specifies the type of document being linked to. The value should be text/css.  rel This specifies the relationship between the HTML page and the file it is linked to. The value should be stylesheet when linking to a CSS file.

 An HTML page can use more than one CSS file  To do this it could have a element for every CSS file it uses.  For example, some authors use one CSS file to control the presentation (such as fonts and colors) and a second to control the layout. Using External CSS

 You can also include CSS rules within an HTML page by placing them inside a element (which usually sits inside the element of the page). body { background-color: linen; } h1 { color: maroon; margin-left: 40px; } Example:

 An inline style may be used to apply a unique style for a single element.  An inline style loses many of the advantages of a style sheet (by mixing content with presentation). Use this method sparingly!

 To use inline styles, add the style attribute to the relevant tag. The style attribute can contain any CSS property.  Example: This is a heading.

 When there is more than one style specified for an HTML, we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules (where number three has the highest priority): 1. Browser default 2. External and internal style sheets (in the head section) 3. Inline style (inside an HTML element)  If the link to the external style sheet is placed below the internal style sheet in HTML, the external style sheet will override the internal style sheet!

 LAST RULE If the two selectors are identical, the latter of the two will take precedence.  SPECIFICITY If one selector is more specific than the others, the more specific rule will take precedence over more general ones. Example:  h1 is more specific than *  p b is more specific than p  p#intro is more specific than p

 IMPORTANT You can add !important after any property value to indicate that it should be considered more important than other rules that apply to the same element.  Understanding how CSS rules cascade means you can write simpler style sheets because you can create generic rules that apply to most elements and then override the properties on individual elements that need to appear differently.

 There are many different types of CSS selector that allow you to target rules to specific elements in an HTML document.  CSS selectors are case sensitive, so they must match element names and attribute values exactly.

SelectorsMeaningExample Universal Selector Applies to all elements in the document * {} Targets all elements on the page. Type SelectorMatches element names h1, h2, h3 {} Targets the, and elements Class SelectorMatches an element whose class attribute has a value that matches the one specified after the period (or full stop) symbol..note {} Targets any element whose class attribute has a value of note p.note {} Targets only elements whose class attribute has a value of note.

SelectorsMeaningExample ID SelectorMatches an element whose id attribute has a value that matches the one specified after the pound or hash symbol. #introduction {} Targets the element whose id attribute has a value of introduction. Child Selector Matches an element that is a direct child of another. li>a {} Targets any elements that are children of an element (but not other elements in the page) Descendant Selector Matches an element that is a descendent of another specified element (not just a direct child of that element) p a {} Targets any elements that sit inside a element, even if there are other elements nested between them.

SelectorsMeaningExample Adjacent Sibling Selector Matches an element that is the next sibling of another. h1+p {} Targets the first element after any element (but not other elements) General Sibli ng Selector Matches an element that is a sibling of another, although it does not have to be the directly preceding element. h1~p {} If you had two elements that are siblings of an element, this rule would apply to both

 Every HTML element can carry the id attribute.  It is used to uniquely identify that element from other elements on the page.  Its value should start with a letter or an underscore (not a number or any other character).

 Giving an element a unique identity allows us to style it differently than any other instance of the same element on the page.  For example:  we want to assign one paragraph within the page (perhaps a paragraph containing a pull quote) a different style than all of the other paragraphs.

 Every HTML element can also carry a class attribute.  Sometimes, rather than uniquely identifying one element within a document, we want a way to identify several elements as being different from the other elements on the page.

 For example:  we have some paragraphs of text that contain information that is more important than others and want to distinguish these elements  we want to differentiate between links that point to other pages on our own site and links that point to external sites.

 The element is a block-level element that is often used as a container for other HTML elements.  The element has no required attributes, but style and class are common.  When used together with CSS, the element can be used to style blocks of content: London London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

 The element is an inline element that is often used as a container for some text.  The element has no required attributes, but style and class are common.  When used together with CSS, the element can be used to style parts of the text: My Important Heading

 The element is often used as a layout tool, because it can easily be positioned with CSS.

 Example: The CSS ? See

 HTML5 offers new semantic elements that define different parts of a web page:  header: Defines a header for a document or a section  nav: Defines a container for navigation links  section: Defines a section in a document  article: Defines an independent self-contained article  aside: Defines content aside from the content (like a sidebar)  footer: Defines a footer for a document or a section  details: Defines additional details  summary: Defines a heading for the details element

City Gallery #header { background-color:black; color:white; text-align:center; padding:5px; } HTML CSS City Gallery header { background-color:black; color:white; text-align:center; padding:5px; } HTML CSS BEFORE HTML 5AFTER HTML 5

 All HTML elements can be considered as boxes.  The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.  Content - The content of the box, where text and images appear  Padding - Clears an area around the content. The padding is transparent  Border - A border that goes around the padding and content  Margin - Clears an area outside the border. The margin is transparent

 Important: The width and height properties set through CSS is for the content area. To calculate the full size of an element, we must also add padding, borders and margins. div { width: 320px; padding: 10px; border: 5px solid gray; margin: 0; }320px 340px 350px 350px Internet Explorer 8 and earlier versions, include padding and border in the width property. To fix this problem, add a to the HTML page.

 The CSS3 box-sizing property allows us to include the padding and border in an element's total width and height..div1 { width: 300px; height: 100px; border: 1px solid blue; }.div2 { width: 300px; height: 100px; padding: 50px; border: 1px solid red; }

 The CSS3 box-sizing property allows us to include the padding and border in an element's total width and height..div1 { width: 300px; height: 100px; border: 1px solid blue; box-sizing: border-box; }.div2 { width: 300px; height: 100px; padding: 50px; border: 1px solid red; box-sizing: border-box; }

 RWD can deliver web pages in variable sizes Example see:

Example:.city { float: left; margin: 5px; padding: 15px; width: 300px; height: 300px; border: 1px solid black; }

 The viewport is the user's visible area of a web page.  When browsing on a mobile device, fixed sized web page might be too large to fit the viewport. To fix this, the browser on that devices scale down the entire web page to fit the screen.

 HTML5 introduced a method to let web designers take control over the viewport, through the tag. The width=device-width part sets the width of the page to follow the screen- width of the device (which will vary depending on the device). The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

BeforeAfter

 If the width property is set to 100%, the image will be responsive and scale up and down:  If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size: img { width: 100%; height: auto; } img { max-width: 100%; height: auto; }

 If the background-size property is set to "contain", the background image will scale, and try to fit the content area. However, the image will keep its aspect ratio div { width: 100%; height: 400px; background-image: url('img_flowers.jpg'); background-repeat: no-repeat; background-size: contain; border: 1px solid red; }

 If the background-size property is set to "100% 100%", the background image will stretch to cover the entire content area: div { width: 100%; height: 400px; background-image: url('img_flowers.jpg'); background-size: 100% 100%; border: 1px solid red; }

 If the background-size property is set to "cover", the background image will scale to cover the entire content area. The "cover" value keeps the aspect ratio, and some part of the background image may be clipped div { width: 100%; height: 400px; background-image: url('img_flowers.jpg'); background-size: cover; border: 1px solid red; }

 We can load a totally different images for different viewport sizes /* For width smaller than 400px: */ body { background-image: url('img_smallflower.jpg'); } /* For width 400px and larger: only screen and (min-width: 400px) { body { background-image: url('img_flowers.jpg'); } }

 use min-device-width instead of min-width to check the device’s width instead of the browser’s width /* For width smaller than 400px: */ body { background-image: url('img_smallflower.jpg'); } /* For width 400px and larger: only screen and (min-device-width: 400px) { body { background-image: url('img_flowers.jpg'); } }

 HTML5 introduced the element, which lets us define more than one image. The first source that fits the preferences is the one being used. The srcset attribute is required, and defines the source of the image. The media attribute is optional. The element should be defined for browsers that do not support the element. The srcset attribute is required, and defines the source of the image. The media attribute is optional. The element should be defined for browsers that do not support the element.