Drawing on the Web CSS CSCI-UA 380 Cascading Style Sheets
Drawing on the Web CSS CSCI-UA 380 Cascading Style Sheets Defines a Web page’s appearance CSS CSS separates style and content Cascading Style Sheets Consists of a plain text file with rules for the display of HTML elements Formatting includes fonts and colors as well as layout and position Can be created outside of your HTML and applied to multiple Web pages Well-formed HTML is important for your CSS to work properly
Drawing on the Web CSS CSCI-UA 380 Cascading Style Sheets CSS can be applied in three different CSS ways to a Web page: Application • In an external .css file • In the <head> section of an HTML document • Inline with HTML code
Drawing on the Web CSS CSCI-UA 380 Cascading Style Sheets Selector: Indicates which HTML CSS element will be formatted Rule Set Declaration block: Describes the formatting to apply Property/value pair: Specifies format Style rules are separated by a semicolon h1 { color: green; background: yellow; }
Drawing on the Web CSS CSCI-UA 380 Cascading Style Sheets The principle of the “cascade” is CSS applied when style rules are in conflict Cascade Three primary factors determine which style rule wins out: • Inheritance • Specificity • Location
Drawing on the Web CSS CSCI-UA 380 Cascading Style Sheets In a web page, every element is CSS rendered as a rectangular box. Box Model This box includes the following, changeable properties. • Content • Padding • Border • Margin
Drawing on the Web CSS CSCI-UA 380 Cascading Style Sheets
Drawing on the Web CSS CSCI-UA 380 Cascading Style Sheets There are two types of length units in CSS CSS, relative and absolute. Units of Length Relative units of length include: • em (relative to font size) • % (relative to the containing element) Absolute units of length include: • px (pixels) Alternatively specifications: • auto (browser calculates length) • inherit (from the parent element)
Drawing on the Web Web Page Layout CSCI-UA 380 HTML and CSS
Drawing on the Web Web Page Layout CSCI-UA 380 HTML and CSS Elements in HTML are primarily “inline” CSS or “block” elements. Display Mode • An inline element allows content to flow around its left and right sides. • A block element fills the entire line and nothing is displayed on its left or right side. The CSS display property allows you to specify the type of box used for an HTML element.
Drawing on the Web CSS CSCI-UA 380 Cascading Style Sheets There are several ways to design the Page Layout layout of a web page with CSS. • CSS float property • CSS positioning • CSS flexible box • CSS grid
Drawing on the Web CSS CSCI-UA 380 Cascading Style Sheets The CSS float property allows you to Page Layout position block elements inline CSS Float Property This means that any element, block or inline, can be positioned alongside another element The CSS float property is one of the main techniques of web page layout
Drawing on the Web CSS CSCI-UA 380 Cascading Style Sheets The CSS position property specifies Page Layout the type of positioning used for an CSS Positioning element on a page. static : Default document flow absolute : Element is positioned relative to its first positioned (not static) parent element fixed : Element is positioned relative to the browser window relative : Element is positioned relative to its normal position sticky : Positioned based on the user's scroll position
Drawing on the Web CSS CSCI-UA 380 Cascading Style Sheets Flexible box, or flexbox, is a new Page Layout layout mode in CSS3 that is becoming CSS Flexible Box increasingly common on web pages. Flexbox consists of flexible containers and flexible items within. A flex container expands items to fill available free space or shrinks them to prevent overflow. In practice, flexbox can accommodate different screen sizes and different display devices more easily than the CSS float property.
Drawing on the Web CSS CSCI-UA 380 Cascading Style Sheets Web pages are often laid out using Page Layout grid systems. CSS Grid CSS grids are intended to make this process more intuitive by defining a grid and then specifying where content should be placed within it. Use the CSS Grid Layout Module for the overall page structure.
Drawing on the Web CSS CSCI-UA 380 Cascading Style Sheets Latest standard for CSS CSS3 CSS2 is best supported CSS3 is still evolving but offers new features for designers and developers Modern browsers support many aspects of CSS3 Backwards compatible with CSS2
Drawing on the Web CSS CSCI-UA 380 Cascading Style Sheets
Recommend
More recommend
