Web Development Book PDF

BRINGING LIFE TO OUR PAGE CASCADING STYLE SHEETS (CSS) HTML alone can create functional websites, but it’s not great for making them good-looking. CASCADING STYLE SHEETS (CSS) is a styling language that brings HTML to life by defining colors, layouts, fonts, backgrounds, and other design...

BRINGING LIFE TO OUR PAGE CASCADING STYLE SHEETS (CSS) HTML alone can create functional websites, but it’s not great for making them good-looking. CASCADING STYLE SHEETS (CSS) is a styling language that brings HTML to life by defining colors, layouts, fonts, backgrounds, and other design aspects. CSS also allows you to design your page to fit any screen, from phones to desktops, while keeping the same HTML. Just HTML With CSS (Structure) (Presentation) RRR UNDERSTANDING CSS The key to understanding how CSS works is to imagine that there is an invisible box around every HTML element. Down below you can see a basic HTML page: Now we have added some outlines to each of the elements so that you can see how CSS will treat each element: LLL By the way, many elements will always appear to start on a new line. These are known as BLOCK ELEMENTS , they will also take up the full width available (orange rectangles). Examples: , , , , Some elements stay on the same line as their neighbors. These are called INLINE ELEMENTS , and they only use as much space as they need (blue rectangles). Examples: , , , , STYLING ELEMENTS CSS works by applying RULES to HTML elements that control how each element should look. CSS rules are made by pairing a selector with declarations p{ Add a semicolon after color: red; each declaration } Curly brackets surround the declaration(s) Selector = element(s) to be styled Declaration = what the style should look like With this rule, every element would have red text. RRR CSS declarations sit inside curly brackets and each is made up of: a property and a value, seperated by a colon. h1, h2, h3 { font-family: Arial; color: green; } With this rule, every , and element will be shown with the Arial font, in a green color; Indentation in CSS isn’t required, but it makes your code easier to read. Use consistent spacing to keep things organized. DIFFERENT WAYS TO ADD CSS INLINE CSS The easiest and worst way to add styles to a single HTML element is by setting the style directly on the element with the “style” attribute. This is red text LLL Use this method sparingly, as it clutters your HTML. INTERNAL CSS A better way is to use internal CSS where you place your styles inside the tag in the section. p{ color: green; } This is green text All styles in this block apply to that specific page only. It can be used if one single HTML page has a unique style that doesn’t need to be reused on other pages. RRR EXTERNAL CSS External CSS is the best way to style a website when you have multiple pages that need the same look. With this method all your CSS lives in a separate file. 1. Start by creating a new file with the extension.css (it is best practice to call it styles.css) 2. Add all of your styles inside the css file, for example: p{ color: green; } h1 { color: blue; } 3. Link to your CSS file by adding a tag in the section: MIME type Path to CSS file specifies the relationship between the current document and the linked document. When the value is “stylesheet” you’re telling the browser that the linked file is a LLL CSS stylesheet for this page. It’s also best practice to keep all your files organized by placing them in dedicated folders within your project: project-folder/ index.html css/ styles.css images/ logo.png After moving the CSS file make sure to modify the : RRR MULTIPLE STYLE SHEETS Later on, we may use multiple stylesheets in a single project. When the same property is defined in different stylesheets, the last style read is the one that applies. FOR EXAMPLE, If you define a color for in both an inline style and an internal stylesheet, the inline style will take priority because it is the last style read (browser reads from top to bottom). h1 { color: green; } This is red text Browser displays: This is red text LLL When multiple styles are applied to the same element, CSS follows the CASCADING ORDER (where #1 has highest priority) 1. Inline styles 2. Internal and external stylesheets 3. Browser defaults An inline style will always override both internal and external styles, while browser defaults are only used if no other styles are defined. RRR  STYLING individual ELEMENTS THE ID SELECTOR ID (IDENTIFIER) SELECTORS are used to apply unique styles to a single HTML element. Each element's id attribute should be unique on the page. Only this specifc “element” should have green text LLL When using id attributes, you must work in both the CSS and the HTML file. To use the ID selector, assign the ID attribute to a HTML element you want to style: Welcome to my website No spaces are allowed and it cant start with a digit Now you can select the element in your CSS by prepending the # symbol followed by the ID name like this: #introduction { color: blue; } CLASS SELECTOR The CLASS SELECTOR is used to style a group of elements. This selector identifies multiple elements and applies the same style to all of them. To apply a class to some HTML elements we first have to choose a class name. Class names should be descriptive and follow certain rules: they are case-sensitive, cannot contain spaces, and cannot start with a digit. RRR In the CSS file, create a class selector for a CSS style by typing a period (.) and then a class name:.title { color: orange; }.description { color: gray; } After defining the styles, we can assign the classes to specific elements by adding the “class” attribute and then the class name: Zugspitze, Germany The highest peak in Germany. Zugspitze, Germany The highest peak in Germany. We can also add multiple classes to a element by listing each class in the class attribute, separated by spaces, allowing the element to inherit styles from all classes. LLL It’s also possible to select specific HTML elements whose class attibute contains a class (= combined selector): p.description { This is a CSS COMMENT. color: orange; Anything between the symbols will be ignored by browsers UNIVERSAL SELECTOR The UNIVERSAL SELECTOR applies to all elements on the page. *{ color: blue; } RRR TYPE SELECTOR The TYPE SELECTOR targets specific HTML elements by their name without the brackets. h1, h2, h3 { color: blue; } CHILD SELECTOR The CHILD SELECTOR (>) selects elements that are direct children of a specified parent. div > a { color: yellow; } LLL FOR EXAMPLE, let’s make every text turn red where the element is a direct child of a parent element. CSS: li > a { color: red; } HTML: Home About Contact Nested Link RRR DESCENDANT SELECTOR The DESCENDANT SELECTOR targets elements that are nested anywhere within another specified element (not just direct children). ul a { color: purple; } If we use the HTML code from the previous example, the browser would display: LLL ADJACENT SIBLING SELECTOR The ADJACENT SIBLING SELECTOR (+) selects an element that immediately follows another. h1+p { color: blue; } FOR EXAMPLE, let’s use the CSS from above and style every element that comes directly after any : Welcome to my Website This paragraph will turn blue. This paragraph will not be affected. About Me This paragraph will also turn blue. Welcome to my Website This paragraph will turn blue. This paragraph will not be affected. About Me This paragraph will also turn blue. RRR GENERAL SIBLING SELECTOR You will probably never use this selector in real projects. Nevertheless the GENERAL SIBLING SELECTOR (~) exists, and it selects all elements that are next siblings of a specified element. FOR EXAMPLE, let’s use following CSS rule: div ~ p { color: blue; } HTML: Paragraph 1. Paragraph 2. Paragraph 3. Some code. Paragraph 4. Paragraph 1 Paragraph 2. Paragraph 3. Some code. Paragraph 4. LLL Understanding CSS Inheritance Certain properties (mostly text-related) are naturally inheritable, meaning they are passed down from parent to child elements. FOR EXAMPLE, if you set the color on a parent , all text child elements within will take on that color. Some heading Some heading Some text Some text Thankfully some properties don’t inherit automatically as it might lead to unexpected layouts (e.g. background color, width, height, border, positioning properties) FOR EXAMPLE, if we set a solid border on a parent , none of the child elements would get a border. Some heading Some heading Some text Some text RRR If you want to inherit a certain property from its parent, you can use the inherit keyword: Some heading Some text Some heading Some text If you don’t want to inherit a certain property from its parent, you could use the unset keyword. Inheritance is especially useful for global styles, like setting a base font or text color in the body element: body { font-family: Arial; color: green; } body represents the element from which all content inherits from LLL RRR HOW CSS RULES CASCADE If there are two or more rules that apply to the same element, we have to understand which will take priority. LAST RULE - If two selectors are identical, the one that appears last will take precedence. In the next example, the second selector overrides the first. SPECIFICITY - If one selector is more specific than the others, the more specific rule takes precedence over the general ones. For example: h1 is more specific than * p > b is more specific than p p#info is more specific than p IMPORTANT RULE - 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. LLL Let's create an example to understand what we've learned. HTML: Stickman Adventures Meet Stickman: the hero with no arms and no legs! He’s great at falling and tripping, but not much else. CSS: * { font-family: Arial; } h1 { font-family: monospace; } i { color: green; } i { color: red; } Takes up 100% of the inherited font size from b { color: pink; } its parent element, in this p b { color: blue !important; } case the parent is p b { color: violet; } which has a browser default font size of 16px #info { font-size: 100%; } p { font-size: 75%; } RRR