P6_Cascading Style Sheet.PDF

Cascading Style Sheet What is CSS?  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 web pages all at once  External stylesheets are stored in CSS files Why Use CSS?  CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.  CSS Example body { background-color: lightblue; } h1 { color: white; text-align: center; } p{ font-family: verdana; font-size: 20px; } CSS Solved a Big Problem  HTML was created to describe the content of a web page, like: ◦ This is a heading ◦ This is a paragraph.  When tags like font, and color attributes were added to the HTML specification, it started a nightmare for web developers.  Development of large websites, where fonts and color information were added to every single page, became a long and expensive process.  To solve this problem, the World Wide Web Consortium (W3C) created CSS.  CSS removed the style formatting from the HTML page!  CSS Saves a Lot of Work! ◦ The style definitions are normally saved in external.css files. ◦ With an external stylesheet file, you can change the look of an entire website by changing just one file! CSS Syntax  A CSS rule-set consists of a selector and a declaration block: ◦ The selector points to the HTML element you want to style. ◦ The declaration block contains one or more declarations separated by semicolons.  Each declaration includes a CSS property name and a value, separated by a colon.  Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces. Example  In this example all elements will be center- aligned, with a red text color: p{ color: red; text-align: center; } ◦ p is a selector in CSS (it points to the HTML element you want to style: ). ◦ color is a property, and red is the property value ◦ text-align is a property, and center is the property value How To Add CSS  When a browser reads a style sheet, it will format the HTML document according to the information in the style sheet.  There are three ways of inserting a style sheet: ◦ External CSS ◦ Internal CSS ◦ Inline CSS External CSS  With an external style sheet, you can change the look of an entire website by changing just one file!  Each HTML page must include a reference to the external style sheet file inside the element, inside the head section. External CSS(Cont’s)  External styles are defined within the element, inside the section of an HTML page: This is a heading This is a paragraph.  An external style sheet can be written in any text editor, and must be saved with a.css extension.  The external.css file should not contain any HTML tags.  Here is how the "mystyle.css" file looks like: body { background-color: lightblue; } h1 { color: navy; margin-left: 20px; }  Note: Do not add a space between the property value and the unit (such as margin-left: 20 px;). The correct way is: margin-left: 20px; Internal CSS  An internal style sheet may be used if one single HTML page has a unique style.  The internal style is defined inside the element, inside the head section.  Example body { background-color: linen; } h1 { color: maroon; margin-left: 40px; } This is a heading This is a paragraph. Inline CSS  An inline style may be used to apply a unique style for a single element.  To use inline styles, add the style attribute to the relevant element.  The style attribute can contain any CSS property.  Inline styles are defined within the "style" attribute of the relevant element:  Example This is a heading This is a paragraph.  Tip: An inline style loses many of the advantages of a style sheet (by mixing content with presentation). Use this method sparingly. Multiple Style Sheets  If some properties have been defined for the same selector (element) in different style sheets, the value from the last read style sheet will be used.  Assume that an external style sheet has the following style for the element: h1 { color: navy; }  Then, assume that an internal style sheet also has the following style for the element: h1 { color: orange; }  If the internal style is defined after the link to the external style sheet, the elements will be "orange": h1 { color: orange; }  However, if the internal style is defined before the link to the external style sheet, the elements will be "navy": h1 { color: orange; } Cascading Order  All the styles in a page will "cascade" into a new "virtual" style sheet by the following rules, where number one has the highest priority: ◦ Inline style (inside an HTML element) ◦ External and internal style sheets (in the head section)  So, an inline style has the highest priority, and will override external and internal styles. CSS Selectors  CSS selectors are used to "find" (or select) the HTML elements you want to style.  Common CSS selectors ◦ The CSS element Selector ◦ The CSS id Selector ◦ The CSS class Selector ◦ The CSS Universal Selector ◦ The CSS Grouping Selector The CSS element Selector  The element selector selects HTML elements based on the element name.  Here, all elements on the page will be center- aligned, with a red text color: p{ text-align: center; color: red; } The CSS id Selector  The id selector uses the id attribute of an HTML element to select a specific element.  The id of an element is unique within a page, so the id selector is used to select one unique element!  To select an element with a specific id, write a hash (#) character, followed by the id of the element.  The CSS rule below will be applied to the HTML element with id="para1": #para1 { text-align: center; color: red; } The CSS class Selector  The class selector selects HTML elements with a specific class attribute.  To select elements with a specific class, write a period (.) character, followed by the class name.  In this example all HTML elements with class="center" will be red and center-aligned:.center { text-align: center; color: red; } The CSS class Selector(Cont’s)  You can also specify that only specific HTML elements should be affected by a class.  In this example only elements with class="center" will be center-aligned: p.center { text-align: center; color: red; }  HTML elements can also refer to more than one class.  In this example the element will be styled according to class="center" and to class="large": This paragraph refers to two classes.  Note: A class name cannot start with a number! The CSS Universal Selector  The universal selector (*) selects all HTML elements on the page.  The CSS rule below will affect every HTML element on the page: *{ text-align: center; color: blue; } Hello world! Every element on the page will be affected by the style. Me too! And me! The CSS Grouping Selector  The grouping selector selects all the HTML elements with the same style definitions.  Look at the following CSS code (the h1, h2, and p elements have the same style definitions): h1 { text-align: center; color: red; } h2 { text-align: center; color: red; } p{ text-align: center; color: red; }  It will be better to group the selectors, to minimize the code.  To group selectors, separate each selector with a comma. The CSS Grouping Selector(Cont’s)  In this example we have grouped the selectors from the code above: h1, h2, p { text-align: center; color: red; } h1, h2, p { text-align: center; color: red; } Hello World! Smaller heading! This is a paragraph. CSS Comments  Comments are used to explain the code, and may help when you edit the source code at a later date.  Comments are ignored by browsers.  A CSS comment is placed inside the element, and starts with :  Example p { color: red; }  You can add comments wherever you want in the code as shown in next example p{ color: red; }  Comments can also span multiple lines as shown next example p { color: red; } HTML and CSS Comments  From the HTML tutorial, you learned that you can add comments to your HTML source by using the syntax.  In the following example, we use a combination of HTML and CSS comments: p{ color: red; } My Heading Hello World! This paragraph is styled with CSS. CSS comments are not shown in the output. CSS Colors  Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.  CSS Color Names can be specified by using a predefined color name:  CSS Background Color You can set the background color for HTML elements:  Example Hello World Lorem ipsum... CSS Color(Cont’s)  You can set the color of text:  Example Hello World Lorem ipsum... Ut wisi enim...  You can set the color of borders:  Example Hello World Hello World Hello World CSS Color Values  In CSS, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values: ◦ Same as color name "Tomato": ◦ rgb(255, 99, 71) ◦ #ff6347 ◦ hsl(9, 100%, 64%) ◦ rgba(255, 99, 71, 0.5) ◦ hsla(9, 100%, 64%, 0.5)  Example............... CSS RGB Colors  In CSS, a color can be specified as an RGB value, using this formula: rgb(red, green, blue)  Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255.  For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255) and the others are set to 0.  To display black, set all color parameters to 0, like this: rgb(0, 0, 0).  To display white, set all color parameters to 255, like this: rgb(255, 255, 255). RGBA Colors  RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity for a color.  An RGBA color value is specified with:  rgba(red, green, blue, alpha)  The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all) HEX Colors  In CSS, a color can be specified using a hexadecimal value in the form: #rrggbb  Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255).  For example, #ff0000 is displayed as red, because red is set to its highest value (ff) and the others are set to the lowest value (00). HSL Colors  In CSS, a color can be specified using hue, saturation, and lightness (HSL) in the form: hsl(hue, saturation, lightness)  Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.  Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color.  Lightness is also a percentage, 0% is black, 50% is neither light or dark, 100% is white HSLA Colors  HSLA color values are an extension of HSL color values with an alpha channel - which specifies the opacity for a color.  An HSLA color value is specified with:  hsla(hue, saturation, lightness, alpha)  The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all): Opacity / Transparency  The opacity property specifies the opacity/transparency of an element. It can take a value from 0.0 - 1.0. The lower value, the more transparent: h1 { background-color: green; opacity: 0.3;}  An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). h1 { background: rgba(0, 128, 0, 0.3) } CSS Backgrounds  The CSS background properties are used to define the background effects for elements.  Here, we will learn about the following CSS background properties: ◦ background-color ◦ background-image ◦ background-repeat ◦ background-attachment ◦ background-position  CSS background-color ◦ The background-color property specifies the background color of an element as shown in next example that set background color of a page like this: body { background-color: lightblue; } ◦ You can set the background color for any HTML elements as shown in next example h1 { background-color: green; } p { background-color: yellow; } CSS Background Image  The background-image property specifies an image to use as the background of an element.  By default, the image is repeated so it covers the entire element.  Example: Set the background image for a page: body { background-image: url("paper.gif"); }  Note:When using a background image, use an image that does not disturb the text.  The background image can also be set for specific elements, like the element: p{ background-image: url("paper.gif"); } CSS Background Image (Conts)  By default, the background-image property repeats an image both horizontally and vertically. ◦ For horizontally repeating (background-repeat: repeat-x;) body { background-image: url("gradient_bg.png"); background-repeat: repeat-x; } ◦ For vertically repeating (background-repeat: repeat-y;) body { background-image: url("gradient_bg.png"); background-repeat: repeat-y; }  Showing the background image only once is also specified by the background-repeat property: body { background-image: url("img_tree.png"); background-repeat: no-repeat; }  The background-position property is used to specify the position of the background image. The next example set background image in the top-right corner: body { background-image: url("img_tree.png"); background-repeat: no-repeat; background-position: right top; } CSS Background Image (Conts)  The background-attachment property specifies whether the background image should scroll or be fixed (will not scroll with the rest of the page):  Example: Specify that the background image should be fixed: body { background-image: url("img_tree.png"); background-repeat: no-repeat; background-position: right top; background-attachment: fixed; }  Example: Specify that the background image should scroll with the rest of the page: body { background-image: url("img_tree.png"); background-repeat: no-repeat; background-position: right top; background-attachment: scroll; } CSS Background Shorthand  To shorten the code, it is also possible to specify all the background properties in one single property. This is called a shorthand property.  Instead of writing: body { background-color: #ffffff; background-image: url("img_tree.png"); background-repeat: no-repeat; background-position: right top; }  You can use the shorthand property background: body { background: #ffffff url("img_tree.png") no-repeat right top; }  When using the shorthand property the order of the property values is: ◦ background-color ◦ background-image ◦ background-repeat ◦ background-attachment ◦ background-position  It does not matter if one of the property values is missing, as long as the other ones are in this order. Note that we do not use the background-attachment property in the examples above, as it does not have a value. CSS Borders  The CSS border properties allow you to specify the style, width, and color of an element's border. CSS Border Style  The border-style property specifies what kind of border to display.  The following values are allowed: ◦ dotted - Defines a dotted border ◦ dashed - Defines a dashed border ◦ solid - Defines a solid border ◦ double - Defines a double border ◦ groove - Defines a 3D grooved border. The effect depends on the border-color value ◦ ridge - Defines a 3D ridged border. The effect depends on the border-color value ◦ inset - Defines a 3D inset border. The effect depends on the border-color value ◦ outset - Defines a 3D outset border. The effect depends on the border-color value ◦ none - Defines no border ◦ hidden - Defines a hidden border  The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border). Example The border-style Property p.dotted {border-style: dotted;} This property specifies what kind of border to p.dashed {border-style: dashed;} display: p.solid {border-style: solid;} p.double {border-style: double;} A dotted border. p.groove {border-style: groove;} A dashed border. p.ridge {border-style: ridge;} A solid border. p.inset {border-style: inset;} A double border. p.outset {border-style: outset;} A groove border. p.none {border-style: none;} A ridge border. p.hidden {border-style: hidden;} An inset border. p.mix {border-style: dotted dashed solid double;} An outset border. No border. A hidden border. A mixed border. CSS Border Width  The border-width property specifies the width of the four borders.  The width can be set as a specific size in px unit or by using one of the three pre-defined values: thin, medium, or thick:  Example: Demonstration of the different border widths: p.one { border-style: solid; border-width: 5px; } p.two { border-style: solid; border-width: medium; } p.three { border-style: dotted; border-width: 2px; } p.four { border-style: dotted; border-width: thick; } Specific Side Widths  The border-width property can have from one to four values (for the top border, right border, bottom border, and the left border):  Example The border-width Property The border-width property can have from one to p.one { four values (for the top border, right border, bottom border-style: solid; border, and the left border): border-width: 5px 20px; Some text. } Some text. Some text. p.two { border-style: solid; border-width: 20px 5px; } p.three { border-style: solid; border-width: 25px 10px 4px 35px; } CSS Border Color  The border-color property is used to set the color of the four borders.  The color can be set by: ◦ name - specify a color name, like "red" ◦ HEX - specify a HEX value, like "#ff0000" ◦ RGB - specify a RGB value, like "rgb(255,0,0)" ◦ HSL - specify a HSL value, like "hsl(0, 100%, 50%)" ◦ Transparent  Example: Demonstration of the border color p.one { border-style: solid; border-color: red; }  Note: If border-color is not set, it inherits the color of the element. Specific Side Colors  The border-color property can have from one to four values (for the top border, right border, bottom border, and the left border).  Example p.one { border-style: solid; border-color: red green blue yellow; } p.one { border-style: solid; border-color: red green blue yellow; } The border-color Property The border-color property can have from one to four values (for the top border, right border, bottom border, and the left border): A solid multicolor border CSS Border - Individual Sides  It is possible to specify a different border for each side.  In CSS, there are also properties for specifying each of the borders (top, right, bottom, and left):  Example p{ border-top-style: dotted; border-right-style: solid; border-bottom-style: dotted; border-left-style: solid; } CSS Border - Shorthand Property  Like you saw in the previous page, there are many properties to consider when dealing with borders.  To shorten the code, it is also possible to specify all the individual border properties in one property.  The border property is a shorthand property for the following individual border properties: ◦ border-width ◦ border-style (required) ◦ border-color  Example p{ border: 5px solid red; } CSS Rounded Borders  The border-radius property is used to add rounded borders to an element:  Example The border-radius Property This property is used to add rounded borders p.normal { to an element: border: 2px solid red; } Normal border Round border p.round1 { Rounder border border: 2px solid red; Roundest border border-radius: 5px; } p.round2 { border: 2px solid red; border-radius: 8px; } p.round3 { border: 2px solid red; border-radius: 12px; }

P6_Cascading Style Sheet.PDF

Document Details

Related

Full Transcript