CSS Learn CSS FAST (Acodemy) (z-library.sk, 1lib.sk, z-lib.sk)

CSS Programming Learn CSS Programming FAST!

Disclaimer The information provided in this book is designed to provide helpful information on the subjects discussed. The author’s books are only meant to provide the reader with the basics knowledge of a certain topic, without any warranties regarding whether the student will, or will not, be able to incorporate and apply all the information provided. Although the writer will make his best effort share his insights, learning is a difficult task and each person needs a different timeframe to fully incorporate a new topic. This book, nor any of the author’s books constitute a promise that the reader will learn a certain topic within a certain timeframe.

Preface CSS has been constructed into a great language as well as a language of great importance. Not only does CSS make life easier for programmers who are styling HTML documents. CSS creates the ability to make life easier for so many other professions. The formatting and styling can be used to create a sales funnel for a marketing company. The gradients and transitions can be used to lighten the workload of graphic designers. Perhaps most importantly the @media rules that allow responsive design to change the layout of a website based on screen size have made the web user friendly for millions and millions of regular people. Without this single feature the internet of things would be out the window, perhaps CSS is to blame for a new generation of young ones that walk around staring at their cell phone all day. Maybe that is simply a testament to the quality that CSS can produce. A vital ingredient to the success of the modern tech industries boom. CSS is possibly one of the most under- rated assets any developer could possess. Sure everyone needs to know it to even have a chance at getting hired in the field today. The difference between knowing CSS and thriving with your CSS creations may be the difference from getting by and getting ahead of the competition. This is the true glory of CSS. No matter what kind of website you want to make. Everyone wants to produce something that will look good in a way that makes it easy to use and understand. Anyone can create a list of links and throw it in an HTML document. Fewer can say that they know how to style links to look like buttons so that their users will feel more at home. The most famous of this type of need is the call to action. Any marketing expert will fill you in on why you need a call to action. I will fill you in on what parts actually make a call to action. A call to action is simply a link to a form that collects user meta data and gets them to sign up for something or buy something. However to increase the odds that anyone will click a link and spend their valuable time giving you resources at a minimum it needs to look good and by easy to find. Adding a box around the link and giving it a background color that stands out from the text inside and the rest of its containing element is a great way to do that. CSS is what makes that all possible for you. This book will not only contain the fundamental know how that will guide you in your quest of learning CSS. It will also provide extensive examples that will show you the code in use. Chapter Two contains a long list of valuable resources which includes all of the available properties as well as the accepted values for each. While reading through the material and studying the examples it is highly recommended that you try to decipher why each set of code works the way it does. It is also a great idea to plug the

code into an HTLM document of your own and play around with different values just to see what it does. Like anything in life, mastering CSS takes practice. A lot of practice. All coding in general becomes easier as time goes on and you have gained more experience. CSS has grown up from a newly invented language to its more adult version of wider more impressive capabilities quickly. For that reason it can reasonably be assumed it will continue to do so. It is very important therefor to do your best to stay up to date with the changes in new releases as they roll out. While the rules, selectors, and values you use are completely up to you as you seek to pursue your agenda. It is also advised to abide by World Wide Web Consortium standards. The easiest way to code to these standards that we teach in this book is to practice them in a habit forming manner. These standards are designed to save you and other programmer’s time by making your code easier to read. This also makes your code easier for other programmers to may pick up the project after you to decipher. The World Wide Web Consortium also has a list of many other appropriate standards for many web development languages such as HTML. If you are using CSS to style an HTML document it is also advised to do your best to try and stay within the habit of using these beneficial and common coding standards. They will also make you less prone to mistakes and help you prevent frequent confusion. The more standardized the code you get used to writing is the quicker you will be able to pick up code written by foreign authors and understand what they are intending to have happen. Clean code is also easier to check for bugs. While many consider this phase of coding in CSS to be boring it can pay off big in the long run. Whether they are small errors that are hard to notice or errors that alter the functionality of the intended project, the size of the error is often less important than the psychological response it triggers in your users. Things that look hacked or put together without effort can make your customers or users think your work is not important to you. It erodes your credibility and undermines the reliability of information you are trying to get across or receive with you HTML document. This makes it important to take enough pride in your work to test it thoroughly. Testing your own work for errors, bugs, or any unintended behavior will also provide a great opportunity to learn your trade of coding in CSS far more in depth. Regardless of what level programmer you are currently you know that mistakes will be made. It is not an if they will be made but more of a when. Make sure things are placed where they are intended. Make sure they look like they are the right size. Make sure they are layered in the intended order. Make sure the intended appearance does not hide or complicate functionality. Make sure that the code is not doing anything redundant or needlessly

overlapping itself. This is just a short and brief list of things to look for in testing your code. You will like find a how-to guide that will walk you through testing your code more in depth. It is wise to use a guide or some form of checklist to make sure you don’t accidentally look over anything. While this book will give you everything you need to become a CSS expert if used properly and frequently. How much of it you take in and make it a point to practice it will be completely up to you. As such it should be clarified that this is a guide and not an all inclusive course. Meaning that the results you receive are dependent only on yourself. I sincerely hope you will find this book helpful and fun enough to continue enjoying the possibilities offered by CSS. If you are studying this for career related reasons than I am confident you are well on your way to a bright and rewarding future. If not for a career, but instead a hobby this book will certainly guide you into a great experience full of challenges to overcome and experiences to grow from. Through CSS we can all fulfill accomplishments, achieve goals, make things to be proud of and show off. With that being said, I would like to leave it at that and wish you the best of luck on your quest to become a CSS expert.

Table of Contents Part I – Beginner 1. Introduction to CSS 1.1 What is CSS 1.2 Why is CSS Needed 1.3 What Does CSS Do 1.4 How to use Style Sheets 1.5 Cascading Orders 2. Selectors, Properties, and Values 2.1 Defining HTML Elements with Selectors, Properties, Values, and Units 2.2 Saving Time With the Universal Selector 2.3 The Child Selector 2.4 The Adjacent Selector 2.5 The Attribute Selector 2.6 Properties and Values 2.7 Units 3. Colors, Text, and Backgrounds 3.1 Colors 3.2 Hexadecimal Notation 3.3 RGB 3.4 HSL and Alpha Transparency 3.5 Text 4. Images, Padding, Margins, and Borders 4.1 Images 4.2 The Box Model 4.3 Shorthand 4.4 Padding 4.5 Borders 4.6 Margins Part II – Intermediate 5. Class, ID Selectors, with Grouping, Nesting, and Pseudo Elements 5.1 Classes and ID Selectors

5.2 Grouping 5.3 Nesting 5.4 Pseudo Classes 6. Shorthand Properties, Specificity, Pseudo Elements 6.1 Shorthand Properties 6.2 Specificity 6.3 Pseudo Elements 7. Box Display, Rounded Corners, Shadows, and Page Layout 7.1 Box Displays 7.2 Rounded Corners 7.3 Shadows 7.4 Page Layout Part III - Advanced 8. Importing Style Sheets 8.1 The Link Tag 8.2 The @import Rule 8.3 The @media Rule 8.4 Embedding Fonts 9. Transitions and Gradients 9.1 Transitions 9.2 Selecting Multiple Properties 9.3 Gradients 9.4 Linear Gradients 9.5 Radial Gradients 10. Media Queries 10.1 Media Queries 10.2 Browser-Size Specific CSS 10.3 Orientations and Device Specific CSS

PART I - BEGINNERS

CHAPTER 1 – INTRODUCTION TO CSS Chapter Objectives Learn who created CSS. Learn what CSS stands for. Learn what CSS is and why it is used. Learn what CSS can do. Learn the three different types of style sheets. Learn how to incorporate each type of stylesheet. Understand the opportune time to use each type of style sheet. What does cascading mean. 1.1 What is CSS? CSS is a language created by the World Wide Web Consortium (W3C) that was designed specifically to format HTML documents. More specifically CSS is an acronym for Cascading Style Sheets. A style sheet is a type of template file that contains font, styling, formatting, and display settings that allow a file to give a standardized look to the intended document. We’ll get back to these style sheets soon as there are various ways to incorporate them into your HTML document. CSS first appeared in HTML 4.0 in order to solve a big problem with earlier versions on HTML. 1.2 Why is CSS Needed? So what is this big problem that CSS solved? Original versions of HTML never intended to use the tags that are needed for formatting a document. That’s because HTML was designed to define the content of HTML documents. This was done using body, paragraph, and heading tags to name a few. These may be familiar to you, if not they would look like this: <html> <header>

</header> <body> <p> Hello World! </p> <h1> This is an H1 heading font size. </h1> </body> <footer> </footer> </html> The problem with using these content tags to style a document is the same reason that most experienced CSS programmers don’t like to use inline style sheets to style their documents. It is a very long and extensive process. Albeit even this basic form of styling using <font> and color attributes did not come out until HTML 3.2. As you can deduce from the amount of version upgrades it took to fix, this form of styling was an absolute nightmare for the programmer. This was because every content item on every page had to be restyled individually one at a time. It also created room for frequent errors that eroded the uniformity of a site. Without uniformity an HTML document can look unprofessional and quickly take great strides away from being user friendly. 1.3 What Does CSS Do? CSS is what makes HTML websites look good, easy to use, and even disabled user friendly. This is done by allowing the programmer to customize fonts, content items sizes, spacing, colors, background, borders, placement, overlays, margins, boxes, formatting, link effects, buttons, and the list goes on. In newer versions like CSS3 you can even play with gradients, transitions, and other advanced features like transparencies. 1.4 How to Use Style Sheets There are three types of style sheet you can use. Which one you use will be up to you, although there are situations which it would be advised to use a particular type. The three types of style sheets are inline style sheets, internal style sheets, and external style sheets. The difference between each being simply where the code is placed in relation to the HTML document that it will be styling.

We already covered why inline style sheets are discouraged as they basically defeat the entire purpose of even using CSS in the first place. Meaning they are inconvenient and tedious to use or modify on a large scale. That being said, in the rare case of a small HTML document with only one file and not many repetitive content pieces it could be faster and easier to just style the content tags as you write them. In this form of style sheet the style attributes are placed directly in the tag of the element they are effecting. This would look like: <html> <header> </header> <body> <p style=”color: red ; font: Calibri ;”>This will create red text using the Calibri font. </p> </body> <footer> </footer> </html> The second type of style sheet is an internal style sheet. In this type of style sheet the CSS code is placed directly inside the HTML file. The CSS is rendered by using the <style> </style> tags. While they can be placed in numerous areas of the document it is not only faster to load but also easiest to find and therefor advised to use these tags in one specific place. Then you can put all of the needed CSS inside those tags. Typically when using an internal style sheet the <style> tags are placed within the header section of the document. Placing yours there would be good practice and make it easier for other coders to find later on. This would look like: <html> <header> <style> p { font: calibri ;

color: red ; align: right ; } .logo-image { align: left ; min-height: 120px ; border: 2px solid #fff ; } </style> </header> <body> </body> <footer> </footer> </html> The third type of style sheet is an external style sheet. These are the most common due to being the most convenient especially on a document that needs to style multiple files each containing multiple uses of the same content tags. An external style sheet is placed external to the HTML document in its own file. Additionally, these types of style sheets should not include any HTML. External style sheet files always end in a .css file extension. The most common file name being simply style.css. However, custom.css, mobile.css, bootstrap.css, or anything else you make up will all work just the same as long as it is called from within the HTML document correctly. You can call the external file sheet by placing any of the following links or calls in the HTML documents <header> section: <html> <header> <link rel=”stylesheet” type=”text/css” href=“…style.css” /> </header>

<body> </body> <footer> </footer> </html> You can also use the @import method as shown below: <html> <header> <style type=”text/css”> @import url(…style.css) </style> </header> <body> </body> <footer> </footer> </html> 1.5 Cascading Orders Cascading order is the system used to sort rules by which declarations are sorted out and given priority to prevent conflicts from affecting the presentation of content. The rules are always sorted in this specific order so as to remain predictable. Using a Boolean (true or false) method the sorting goes in order so if rule 1 is not met then it sorts by rule two if it is met the search ends, if not it sorts by rule three and so on. The rules are as follows: 1. Search for all declarations that are relevant to a certain attribute. Declare the specific attribute style if the attribute matches the element, if there isn’t any let the element inherit the parent property if there is not an initial value. 2. Sort by weight (! Important) weight attributes will take priority over normal weight attributes. 3. Original rules with normal weight attributes declared in the origin author’s style

sheet will override rules with normal weight declared in the user’s personal style sheets. Rules with increased weight in the user’s personal style sheet will override rules with normal weight declared in the author’s style sheet. Rules with increased weight declared in the author’s sheet will override rules with increased weight from the user’s personal sheets. Both the author’s and user’s rules will override the default style sheet. 4. Sort by an attributes specificity. More specific selectors will override less specific selectors. ID-selectors are the most specific. The second most specific are classified contextual selectors. Third are class selectors. Contextual selectors gain more and more weight as more of them are used. 5. Sort by the order specified. If two rules have the same weight, the latter will override the earlier rule. Style sheet types are sorted as follows, inline style sheets override all other styles. Internal style sheets will override linked and imported style sheets. The linked stylesheet will override a sheet called with the @import statement. If multiple external style sheets are used they will cascade in the same order that they are imported. It is also possible to use inline, internal, and external style sheets all at once. They will simply cascade in order of priority. Practical Use Exercise Questions 1. Who created CSS? 2. What does the acronym CSS stand for? 3. In what version of HTML did CSS first appear? 4. What was the big problem that CSS solved? 5. What types of content can CSS customize? 6. What do newer versions of CSS allow to modify? 7. What are the three types of style sheet? 8. Name two ways of calling an external style sheet? 9. Describe what is meant by cascading? 10. Which type of style sheet overrides all others? 11. Which type of style sheet is overridden by any other? Chapter Summary and Exercise Solutions CSS was created by the World Wide Web Consortium. CSS stands for Cascading Style Sheets. CSS first appeared in HTML 4.0

CSS made formatting and standardizing large projects quicker and easier by allowing programmers to style every item of similar attribute across entire sites from one file with the same statement. CSS can style any HTML content. CSS3 allows gradients, transitions, and transparencies. The three types of style sheets are inline style sheets, internal style sheets, and external style sheets. External style sheets can be called using a link statement or an @import statement. Cascading refers to the order in which style sheets and their statements take priority in order to eliminate confusion in the case of conflicting statements. Inline style sheets override all other style sheets. External style sheets are overridden by any other type of style sheet.

CHAPTER 2 – SELECTORS, PROPERTIES, AND VALUES. Chapter Objectives Learn what selectors can name. Learn how to use a Selector. Learn how to use a Universal Selector. Learn how to use a Child Selector. Learn how to use Adjacent Selectors. Learn how to use Attribute Selectors. Learn how to use a Property. Learn some common Property Units. Learn how to use a Value and a unit. Learn the purpose of the z index. 2.1 Defining HTML Components with Selectors, Properties, Values, and Units A selector can be used to name any specific HTML item or component that you want to style. To go more in depth selectors are modified by defining their properties with values which are defined in units. So one more time since that was a long string on explanation. Selectors are defined with properties. Properties are defined with values. Values are defined with units. All of these combined make a statement. Now what do you do with all these selectors, properties, values, and units? Fortunately all CSS statements follow the same format. The selector is placed first in the CSS statement. Then after the selector inside the opening curly brace { the property is followed with a colon, after the colon the value is stated in units followed with a semi- colon and the closing curly brace. Altogether it would look like this: button {width: 100 px;} There are many properties, values, and units that will modify a given selector. You can also save more time by adding as many properties as you need to a selector by just

putting the next property after the closing semi-colon of the previous property. Don’t worry as usual we will show you how this should look. In the example below the tag <h1> will be the selector we have chosen to style. This will be done by using the properties font-family, color, border, and border-width. While these properties will be defined using the values times new roman, blue, solid, and 2px respectively. The HTML for this example may look like: <html> <header> </header> <body> <h1> Lets make this heading blue times-new-roman with a solid border of 2px. </h1> </body> <footer> </footer> </html> To style the above HTML we can use the CSS below inserted into the style sheet with a .css file extension: h1 {font-family: times new roman; color: blue; border: solid; border- width: 2px;} Also in CSS, spacing is not used by the parser so it is treated like it is not even there. This means the above example will work the exact same as either of the statements below, although you may note that the third is a lot easier on the eyes to read. This is the standard format used by most CSS programmers for that reason. h1{font-family: times new roman ; color: blue ; border: solid ; border- width: 2px ; } or