-
Book Overview & Buying
-
Table Of Contents
-
Feedback & Rating

Mastering CSS
By :

HTML, CSS, and JavaScript are the three core languages of the web. The more you know about all three of them, the better off you'll be. Of these three, the role of CSS is as the presentation language of the web. It describes things such as the colors, fonts, and layout of your pages.
There are some basic prerequisites for this book. I expect you understand how to write HTML, and understand basic CSS including styling fonts, adding margins, padding and background colors, and other things, such as what a hexadecimal color code is. In the coming chapters, I'll cover some of the basic concepts such as the box model, display properties, and types of style sheet. I'll also touch on a small amount of JavaScript and jQuery. You don't need any prior knowledge of these, but you will be getting a taste of them in this book.
Now, take a look at the final site we're going to build. In order to learn CSS, we'll finish building the following HTML5 website, which is all about sharks. I say finish building this site because the basic HTML and CSS will already be in place, and you can download them from the download package for this book. We'll add all the things that I will show you, and more. This site features modular and reusable CSS, which you will learn about as we move through the book. The site will first be built with floats for layout, before we rewrite the layout using flexbox. And we use web fonts for our text:
The navigation features a drop-down menu that uses CSS animations:
The site also features a call-to-action button with a CSS gradient:
The site is fully responsive. When we resize the browser, you can see that our two-column layout shifts into a single-column layout:
Also, our menu turns into a menu designed for mobile devices:
If we scroll down a little bit, we can see that we have ghost buttons that use CSS transitions. It's ready for HiDPI devices such as Apple's retina displays:
Most of the imagery on the site uses SVG:
At the very bottom of the page, we are using an icon font:
So, as you can see, you'll learn some really cool stuff in this book. To get the most out of it, I recommend that you follow along with me as I code.
Chapter 1, CSS Foundations, covers the fundamental concepts necessary to master CSS.
Chapter 2, Ramping Up, talks about the Sublime text editor; CSS reset, which resets the default styles in the browser; and descendant selectors.
Chapter 3, Creating a Page Layout with Floats, deep dives into floats. We'll cover the basic usage of floats, followed by creating the layout with floats, and understanding the common headaches caused by floats and how to solve for them .
Chapter 4, Creating Buttons with Modular, Reusable CSS Classes, and CSS3, covers modular CSS and multiple classes, and uses CSS3 to add transitions, hover states, transforms, and gradients to our buttons.
Chapter 5, Creating the Main Navigation and Drop-Down Menu, explains the functionality and presentation of our primary navigation.
Chapter 6, Becoming Responsive, covers the foundations of responsive web design and explains how to implement it to transform our static website into a mobile website.
Chapter 7, Web Fonts, discusses the basic syntax of the @font-face
rule, font services, usage scenarios, and providers of web fonts and icon fonts.
Chapter 8, Workflow for HiDPI Devices, covers techniques for preparing images to account for Retina using SVG and techniques like the srcset
attribute.
Chapter 9, Flexbox, Part 1, introduces the Flexbox module covering the basic implementation and properties.
Chapter 10, Flexbox, Part 2, covers more depth on Flexbox, building a new product listing and more advanced properties.
Chapter 11, Wrapping Up, wraps up the concepts of CSS that we covered in this book and provides some information on other CSS features that you can explore.
Throughout the book, I've used Chrome as my browser because of its DevTools, among other things, but other browsers have similar tools. We'll use DevTools to explore code directly in the browser.
I've also used macOS throughout. If you're a Windows user and I refer to the command (cmd) key anywhere in the book, you should pretend that I am referring to the Ctrl key. Other than that, I don't think this will be an issue.
I have used the text editor Sublime Text 3. I should say that Sublime isn't the only good one out there. There are others like Atom and Visual Studio Code that do many of the same things.
Even though this book is on mastering CSS, we can't do much with CSS without HTML. So, we'll be working in HTML quite a bit. The goal is to use very clean, semantic HTML; that's what we want to aim for.
This book is for web designers and developers who wish to master the best practices of CSS in their web projects. You should already know how to work with a web page, and be ready to use CSS to master website presentation.
In this book, you will find a number of text styles that distinguish between different kinds of information. Here are some examples of these styles and an explanation of their meaning.
Code words in text, database table names, folder names, filenames, file extensions, path names, dummy URLs, user input, and Twitter handles are shown as follows: "To change the size of text use the font-size
property."
A block of code is set as follows:
h2 { font-size: 26px; font-style: italic; color: #eb2428; margin-bottom: 10px; }
When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:
h2 {
font-size: 26px;
font-style: italic;
color: #eb2428;
margin-bottom: 10px;
}
Any command-line input or output is written as follows:
# cp /usr/src/asterisk-addons/configs/cdr_mysql.conf.sample/etc/asterisk/cdr_mysql.conf
New terms
and important words
are shown in bold. Words that you see on the screen, for example, in menus or dialog boxes, appear in the text like this: "Clicking on the Next
button moves you to the next screen."
Warnings or important notes appear in a box like this.
Tips and tricks appear like this.
Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of.
To send us general feedback, simply email [email protected]
, and mention the book's title in the subject of your message.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide at www.packtpub.com/authors.
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
You can download the example code files from your account at http://www.packtpub.com for all the Packt Publishing books you have purchased. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files emailed directly to you. You can download the code files by following these steps:
SUPPORT
tab at the top.Code Downloads & Errata
.Search
box.Code Download
.Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:
The code bundle for the book is also hosted on GitHub at https://github.com/PacktPublishing/Mastering-CSS. We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!
We also provide you with a PDF file that has color images of the screenshots/diagrams used in this book. The color images will help you better understand the changes in the output. You can download this file from https://www.packtpub.com/sites/default/files/downloads/MasteringCSS_ColorImages.pdf.
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you could report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the Errata Submission Form
link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website or added to any list of existing errata under the Errata section of that title.
To view the previously submitted errata, go to https://www.packtpub.com/books/content/support and enter the name of the book in the search field. The required information will appear under the Errata
section.
Piracy of copyrighted material on the internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at [email protected]
with a link to the suspected pirated material.
We appreciate your help in protecting our authors and our ability to bring you valuable content.
If you have a problem with any aspect of this book, you can contact us at [email protected]
, and we will do our best to address the problem.
Change the font size
Change margin width
Change background colour