CSS Web Page Layout PDF

INTRO TO CSS3  CSS | Cascading Style Sheets CSS = a flexible, cross-platform, standards-based language used to define how to display HTML elements CSS describes how elements should be rendered on the screen, CSS is used for: styling, layout & design, animation, to change...

INTRO TO CSS3  CSS | Cascading Style Sheets CSS = a flexible, cross-platform, standards-based language used to define how to display HTML elements CSS describes how elements should be rendered on the screen, CSS is used for: styling, layout & design, animation, to change fonts, grid system CSS description - http://www.w3.org/Style CSS can control: Fonts, Text, Colors, Backgrounds, Sizes, Borders, Spacing, Positioning, Visual effects, Tables, Lists CSS code validator: http://jigsaw.w3.org/css-validator CSS rules contain a selector and declarations. Each declaration contains a property and a value. selector { property: value; property: value; } declaration  CSS Advantages Typography and page layout can be better controlled: text, colors, size, element positioning, line spacing, letter spacing, indents, page layout; embedding fonts, rounded corners, and transparency in CSS3. Style is separate from structure Styles can be stored and associate them with many different web pages Documents are potentially smaller Site maintenance is easier CSS3 features supported by various browsers -> http://caniuse.com/#search=css3 , https://www.quirksmode.org/css/contents.html  Incorporating CSS CSS can be included: Inline –coded in the body of the web page as style attribute of an HTML tag, Internal construct (embedded)– defined within a style block in the head section of a web page-> applied to the entire web document External construct - coded in a separate file-> associated with the web page by configuring a link element in the head section. Imported styles -> similar to external styles- used to import CSS into embedded styles or into another external style sheet by using @ import directive.  Inline Style Contained in start tag of HTML element Used to define the style of an individual element Use sparingly! In general, style should be separated from HTML content Header  Internal Style Sheet Contained in tag in header section of the HTML document. Used for simple webpage with unique style h1 {color:red;} #firstHeader {color:blue;}  External Style Sheet Separate CSS file or files linked at the beginning of the HTML element. Used to unify style across many web pages.  Selectors & Properties Selectors are ways of grabbing and manipulating HTML Selectors are used as searching expressions within DOM nodes There are many types of selectors, but all turn out the same way. A CSS selector could be: an element type/ id/ class name. p { property: value; property: value; } -> applied to all elements on the page with the specified tag name #firstHeader { property: value; property: value; } -> applied on the HTML element with id=“firstHeader”.first { property: value; property: value; }-> applied for class=“first“ – to specific items All HTML elements with the specified element type, id, or class will have the property values defined in the declarations  | COLOUR PROPERTY CSS syntax allows to configure colors in a variety of ways: colour name: p { color: red;} hexadecimal colour value: p { color: #FF0000; } hexadecimal shorthand colour value (web-safe colours): p { color: #F00; } decimal color value (RGB triplet): p { color: rgb(255,0,0); } HSL (Hue, Saturation, and Lightness) - p { color: hsl(0, 100%, 50%); } CSS3; http://www.w3.org/TR/css3-color/#hsl-color https://meyerweb.com/eric/css/colors/ - configuring color values using different notations https://color.adobe.com/create - colour selection wheel  CSS | Text Properties font-family- configures font typeface, font-size - sets the size of the font. font-weight- configures the boldness of the text font-style - used to configure text displayed in italics line-height- modifies the default height of a line of text and is often configured with a percentage value text-align- configures the alignment of text and inline elements within block display elements, text-decoration- to modify the display of text; values: none, underline, overline, and line-through, text-indent - configures the indentation of the first line of text within an element, using numeric values (px, pt, or em unit or a percentage), letter- spacing - configures the space between text characters; values: normal (default), numeric (pixel or em unit), word- spacing - configures the space between; values: normal (default), numeric (pixel or em unit), text-shadow- adds depth and dimension to text displayed on web pages text-transform - configures the capitalization of text; values: none (default), capitalize, uppercase, or lowercase  | FONT-FAMILY PROPERTY font-family property - configures font typeface (A web browser displays text using the fonts that have been installed on the user’s computer! If the specified font is missing -> the default one is substituted) => Identify common fonts to all versions of web browsers Create a built-in backup plan by listing multiple fonts and categories for the value of the font-family property. The browser will attempt to use the fonts in the order listed. p { font-family: Arial, Helvetica, sans-serif; }  | FONT-SIZE Relative font units: em unit corresponds to the width of the font and size used in the parent element (typically the body element). Percentage value font-size: 100% and font-size:1em – render the same Absolute font units: pt (1 / 72 inch), px (1 / 90 inch).  | Text-shadow Property Used to add depth and dimension to text displayed on web pages, Configure a text shadow by coding values for: horizontal offset- numeric pixel value; positive value configures a shadow on the right, negative value configures a shadow on the left, vertical offset - numeric pixel value; positive value configures a shadow below, negative value configures a shadow above, blur radius (optional) - numeric pixel value; default value=0 - configures a sharp shadow, higher values configure more blur. Color text-shadow: 3px 2px 5px #666;  CSS | Cascade, Specificity and Inheritance Style rules precedence order: General cascade Importance - depends on where CSS declaration is specified: Selector Specificity: (1) ID (#myI-id), (2) class (.my-class), (3) tag (, ) Source order - CSS rules always prioritize from left-to-right, then from top-to-bottom, rules that are defined later, will have higher priority than those defined earlier. Initial & Inherited properties (default values) – child element inherits rules from its parent -> inheritance has the lowest priority !important keyword override ordering, specificity and inline rules. p { color: red !important; }  CSS | Cascade, Specificity and Inheritance Inheritance - styles applied to a parent element are inherited by a child element in an HTML file. If an HTML element does not have a particular CSS property set, but its parent element does, that property will be determined by inheritance. The :nth-child selector - used to style content based on its relationship with parent and sibling elements Specificity - selectors are used to define which elements in your HTML will use the styles you are defining-> usually a combination of selectors is needed. Specificity has four components; let’s call them a, b, c and d. Component “a” is the most distinguishing, “d” the least. Component “a” = 1 declaration in a style attribute (inline styling), otherwise it’s 0. Component “b” = the number of id selectors (begin with a #). Component “c” = the number of attribute selectors (class selectors and pseudo-classes). Component “d”= the number of element types and pseudo-elements in the selector. The specificity of a CSS selector is calculated by adding these numbers. CSS selectors with a higher specificity value override CSS selectors with a lower specificity value. !important – override rules later in the cascade or with a higher specificity.  CSS Cascade - Example Selector a b c d Specificity h1 1 0,0,0,1.foo 1 0,0,1,0 #bar 1 0,1,0,0 html>head+body ul#nav 1 2 5 0,1,2,5 *.home a:link  Advanced SELECTORS - * general selector (select all DOM elements) - Attribute: selector[attribute=“value”] - Child node selector: selector > selector - Descend selector: Examples: Attribute selector +: h2+a - all anchor that comes directly after an h2 tag General sibling selector ~: input~button – it looks about consecutive elements sharing the same parent Child selector >: ul>li descendant selector (space) selector1 selector2  Pseudoselectors Selectors used to manage interactivity with the web app: Mouse events: hover Children: first-child, nth-child (n), only-child  The Box Model  Choosing a layout:  fluid layout - a layout in which the height and width of elements is flexible and can expand or contract based on the browser window, the operating system, and other user preferences.  fixed layout - you specify the height and width of elements, and those values remain the same regardless of which operating system or browser you use to access.  CSS Box Model – the most common way to position items in a web application, it uses positioning properties to define web page layout  Each layer can be resized, stretched, symmetrically or asymmetrically.  Setting:  width  height  min/max-width/height  overflow: visible, hidden, scroll,auto  Padding or margin: -top / -bottom / -left / -right  3px 4px 5px 6px (top, right, bottom, left) or  2px 3px (top = bottom = 2px, right = left = 3px) or  3px (all of them)  Border: -top / -bottom / -left / -right / -width / -style / -color  Managing Positions  Layout control:  display: none / inline / block  float: none / left / right  clear: none / left / right / both  Positioning inside the web page:  top, right, bottom, left, z-index  position:  CSS3 Flexible Box Layout Flexbox –used to layout the web app., to change the horizontal or vertical organization of elements and to change the order of the displayed elements. Useful to create responsive web application. Flexbox components: flex container, flex items (images, links…). To configure the flex container – using display: flex, flex-direction property: row (horizontal direction)/ column (vertical direction) #demo { display: flex; flex-direction: row; } flex-wrap property: nowrap, (single-line)/ wrap (display on multiple lines), justify-content property: flex-start | flex-end | center | space- between | space-around ->configures how the browser should display any extra space that may exist in the flex container align-items:  CSS3 Flexible Box Layout (2) To define flex items - modify the default order properties: order:x (position of items) – as style tag of div element To customize the size of each flex item: flex-basis, flex-grow, flex-shrink => flex property – shorthand property for all of them. Flex :grow, shrink, basis initial  0 1 auto-> flex item = inflexible when there is positive free space, but it shrinks to its minimum size when there is insufficient space, auto  1 1 auto-> sizes the item based on the width/height properties, but makes them fully flexible, so that they absorb any free space along the main axis. none  0 0 auto-> sizes the item according to the width/height properties, but makes the flex item fully inflexible.  1 0.-> flex item flexible and the item receives the specified proportion of the free space in the flex container. Align-self – to align an individual item  CSS3 Grid Layout Used to configure a two-dimensional grid- based layout and includes one or more grid items that can be individually defined as fixed-size or flexible. Used to change the display order of elements. To configure a grid container: define the grid container- display property: grid/inline-grid – values configure grid rows and columns: grid-template-rows, grid-template-columns property: accepted values are pixels, percentages, keywords (auto-allocates enough space to hold the content of the grid area), and flex factor units => https://www.w3.org/TR/css-grid-1/#propdef- grid-templatecolumns Justify-content: Align-content: Configure row & column gaps: Grid-gap: row_size column_size;  CSS3 Grid Layout (2) fr- flex factor unit=>1fr - allocates all remaining space, To change grid items size: grid-row:x/y - header element is placed in row x (the grid track between horizontal grid lines x and y), grid-column: a / b - occupies the grid tracks from vertical grid line a to vertical grid line b. OR grid-row:1/span b  Flex Box vs. GRID Both – are activated using display property Grid- provides more tools to control the layout FlexBox – focused mainly on width -> grid – controls both width & height  :root selector is commonly used to define variables in CSS as they can be accessed from anywhere in the code. :root { --variable:value; } var(--variable, default_value) function is used to access a variable in CSS.