Web Design and Programming - CSS Reviewer PDF

WEB DESIGN AND PROGRAMMING CASCADING STYLE SHEET CASCADING – refers to the sets of rules for resolving conflicts with multiple CSS rules applied to the same elements. STYLE – is how you want a certain part of your page to look. You can set things...

WEB DESIGN AND PROGRAMMING CASCADING STYLE SHEET CASCADING – refers to the sets of rules for resolving conflicts with multiple CSS rules applied to the same elements. STYLE – is how you want a certain part of your page to look. You can set things like color, font, margins for HTML elements. SHEETS – are like templates where set of rules for determining how the webpage will look is stored. ADVANTAGE OF CSS CSS saves time - You can write CSS once and then reuse same sheet in multiple HTML pages. Pages load faster - If you are using CSS, you do not need to write HTML tag attributes every time. Easy maintenance - To make a global change, simply change the style, and all elements in all the web pages will be updated automatically. Superior styles to HTML - CSS has a much wider array of attributes than HTML, so you can give a far better look to your HTML page in comparison to HTML attributes. Multiple Device Compatibility - Style sheets allow content to be optimized for more than one type of device. Global web standards - Now HTML attributes are being deprecated and it is being recommended to use CSS. W3C CSS WORKING GROUP – Creates and Maintains CSS. CSS SYNTAX – a CSS comprises of rules that are interpreted by the browser and then applied to the corresponding elements in your document. A style rule is made of three parts: selector { property: value } CSS SYNTAX RULES selector { property: value } selector - A selector is an HTML tag at which a style will be applied. This could be any tag like or etc. property - A property is a type of attribute of HTML tag. Put simply, all the HTML attributes are converted into CSS properties. They could be color, border etc. value - Values are assigned to properties. For example, color property can have value either red or #F1F1F1 etc. CSS Selector – are used to “find” (or select) the HTML elements you want to style. Type of Selector 1. Element or Type selectors 2. ID selector 3. The CSS class selector 4. The Universal selectors 5. The Descendant selectors Element or Type selectors - selects HTML elements based on the element name. element { property: value } 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. #id { property: value } 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..class { property: value } IDs vs Classes There can be only one ID on a page, but multiple classes. An ID is more specific than a class. An element can have both ID and multiple classes. Universal selector - Rather than selecting elements of a specific type, the universal selector quite simply matches the name of any element type. * { property: value } CSS 1  WEB DESIGN AND PROGRAMMING Descendant selector - A way to target elements that are descendants of a specific element; It allows you to style elements based on their relationship to another element in the HTML document hierarchy; The syntax for the descendant selector is simply placing a space between two selectors. p d { property: value } Inserting a style sheet 1. Inline Styles 2. Internal Style Sheet 3. External Style Sheet Inline Styles - An inline CSS is used to apply a unique style to a single HTML element; An inline CSS uses the style attribute of an HTML element. Internal Style Sheet - Internal styles are defined within the element, inside the section of an HTML page. selector { property: value } External Style Sheet - Styles are specified in an external CSS files; Each page must include a reference to the external style sheet file inside the element. Some things you CAN change with CSS Some things you CAN’T change with CSS colors content type markup type size backgrounds spacing sizes borders position(layout) CSS Properties CSS Colors CSS uses color values to specify a color. Typically, these are used to set a color either for the foreground of an element (text) or for the background of the element. They can also affect the color of borders and other decorative effects. You can specify your color values in various formats: CSS 2  WEB DESIGN AND PROGRAMMING CSS Colors – Hex Code A hexadecimal is a 6-digit representation of a color. A hexadecimal value can be taken from any graphics software. CSS Colors – 3-digit Hex Codes The 3-digit hex code can only be used when both the values are the same for each components. So, if we have #ff00cc, it can be written like this: #f0c. CSS Colors – RGB Absolute An RGB color value represents red, green, and blue light sources. Each parameter defines the intensity of the color between 0 and 255. CSS Colors – RGBA Value RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity for a color. The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all). CSS Colors – Keyword In CSS, a color can be specified by using a predefined color name. CSS/HTML support 140 standard color names. CSS Colors – HSL Value HSL stands for hue, saturation, and 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. CSS Background CSS Background properties is used to define the background effects of an element. List of Background Properties 1. Background-color 2. Background-image 3. Background-repeat 4. Background-position Background-color The background-color property specifies the background color of an element. You can set the background color for any HTML elements (wherever applicable) Background-image The background-image property specifies an image to use as the background of an element. Background-repeat & Background-position By default, the background-image property repeats an image both horizontally and vertically. background-repeat: repeat-x; (horizontal) background-repeat: repeat-y; (vertical) background-repeat: no-repeat; Position of an image can be set by using: CSS 2  WEB DESIGN AND PROGRAMMING background-position: right top; Shorthand Property To shorten the code, it is also possible to specify all the background properties in one single property. When using the shorthand property, the order of the property values is: 1. background-color 2. background-image 3. background-repeat 4. background-attachment 5. background-position CSS Text CSS Text properties is used to define the format of a text List of Text Properties 1. Text Color 2. Text Alignment 3. Text Decoration 4. Text Transformation 5. Text Identation Text Color Color property is used to set the color of the text. Text Alignment The text-align property is used to set the horizontal alignment of a text. text-decoration-line: overline underline; text-decoration-color: blue; text-decoration-style: dashed; text-decoration-thickness: 5px; Text Transformation The text-transform property is used to specify uppercase and lowercase letters in a text. text-transform: uppercase; (to all caps) text-transform: lowercase; (to small) text-transform: capitalize;(first letter cap) CSS 3  WEB DESIGN AND PROGRAMMING CSS Font In CSS there are five generic font families: I. Serif fonts have a small stroke at the edges of each letter. They create a sense of formality and elegance. II. Sans-serif fonts have clean lines (no small strokes attached). They create a modern and minimalistic look. III. Monospace fonts - here all the letters have the same fixed width. They create a mechanical look. IV. Cursive fonts imitate human handwriting. V. Fantasy fonts are decorative/playful fonts. Font Family In CSS, we use the font-family property to specify the font of a text. The font-family property should hold several font names as a "fallback" system, to ensure maximum compatibility between browsers/operating systems. font-family: "Times New Roman", Times, serif; Font Style The font-style property is mostly used to specify italic text. font-style: normal; font-style: italic; font-style: oblique; Font Weight The font-weight property specifies the weight of a font: font-weight: normal; font-weight: bold; Font Size The font-size value can be an absolute, or relative size. font-size: 40px; Absolute size: Sets the text to a specified size Does not allow a user to change the text size in all browsers (bad for accessibility reasons) Absolute size is useful when the physical size of the output is known CSS 4  WEB DESIGN AND PROGRAMMING Relative size: Sets the size relative to surrounding elements Allows a user to change the text size in browsers Font Size The default size for normal text, like paragraphs, is 16px (16px=1em). To allow users to resize the text (in the browser menu), many developers use em instead of pixels. The size can be calculated from pixels to em using this formula: pixels/16=em font-size: 2.5em; Margin The CSS margin properties are used to create space around elements, outside of any defined borders. margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 80px; Padding The CSS padding properties are used to generate space around an element's content, inside of any defined borders. padding-top: 50px; padding-right: 30px; padding-bottom: 50px; padding-left: 80px; HTML Document Tree We describe the elements in the tree like we would describe a family tree. There are ancestors, descendants, parents, children and siblings. It is important to understand the document tree because CSS selectors use the document tree. CSS 5  WEB DESIGN AND PROGRAMMING Ancestor An ancestor refers to any element that is connected but further up the document tree - no matter how many levels higher. Descendant A descendant refers to any element that is connected but lower down the document tree - no matter how many levels lower. Parent and Child A parent is an element that is directly above and connected to an element in the document tree. A child is an element that is directly below and connected to an element in the document tree. Sibling A sibling is an element that shares the same parent with another element. What is Bootstrap? Bootstrap is a powerful front-end framework for faster and easier web development. Bootstrap gives you ability to create flexible and responsive web layouts with much less efforts. History of Bootstrap Bootstrap was known as Twitter Blueprint. Developed by Mark Otto and Jacob Thornton at Twitter in mid 2010. It was released as an open-source product in August 2011 on GitHub. What is Responsive Web Design? Responsive web design is about creating web sites which automatically adjust depends on the screen. A list of reasons why to learn Bootstrap? 1. Mobile First Approach 2. Browser Support 3. Easy to get started 4. Responsive Design Bootstrap Grid System Bootstrap's grid system is built with flexbox and allows up to 12 columns across the page. The grid system is responsive, and the columns will re-arrange automatically depending on the screen size. If you do not want to use all 12 columns individually, you can group the columns together to create wider columns: CSS 6  WEB DESIGN AND PROGRAMMING Bootstrap Breakpoints Bootstrap Breakpoints Extra Small (xs): Used for screens smaller than 576 pixels. This is typically the default styling for mobile devices. Small (sm): Used for screens equal to or larger than 576 pixels. This is commonly used for small tablets and larger mobile devices. Medium (md): Used for screens equal to or larger than 768 pixels. This is typically used for larger tablets and small laptops. Large (lg): Used for screens equal to or larger than 992 pixels. This is commonly used for larger laptops and desktops. Extra Large (xl): Used for screens equal to or larger than 1200 pixels. This is typically used for larger desktop monitors. What is Responsive Design? Responsive web design is a process of designing and building websites to provide better accessibility and optimal viewing experience to the user by optimizing it for different devices. CSS 7