2,99 €
Mehr erfahren.
- Herausgeber: BookRix
- Kategorie: Fachliteratur
- Sprache: Englisch
This title is one of the "Essentials" IT Books published by TechNet Publications Limited.
This Book is a very helpful practical guide for beginners in the topic , which can be used as a learning material for students pursuing their studies in undergraduate and graduate levels in universities and colleges and those who want to learn the topic via a short and complete resource.
We hope you find this book useful in shaping your future career.
This book will be available soon...
Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:
Veröffentlichungsjahr: 2016
Ähnliche
Getting Started CSS3
BookRix GmbH & Co. KG81371 MunichTable Of Contents
Table of Contents
The Story behind the Succinctly Series of Books
About the Author
Chapter 1 What is CSS3?
Chapter 2 Basic CSS Refresher
Chapter 3 New Selectors
Chapter 4 New Pseudo Selectors
Chapter 5 Eye Candy
Chapter 6 Color
Chapter 7 Web Fonts
Chapter 8 Generated Content and Calculations
Chapter 9 The Mixed Bag of Tricks
Detailed Table of Contents
Chapter 1 What is CSS3?
Chapter 1 What is CSS3?
If you've been a web developer for any length of time, then CSS won't be strange to you. You might, however, be wondering what the fuss over CSS3 is all about.
Just like the new HTML 5 specifications, CSS3 (or CSS Version 3, to be more precise) is the latest set of specifications designed to mold, shape, and define just what capabilities the newest version of CSS has.
To get the most from CSS3, you do need to have a general understanding of the concept of CSS first. Chapter 2 will cover a very basic refresher to help with this, but if you've never used CSS in any way, then you might feel a little lost reading this book, as it does assume that you have at least a passing familiarity with the technology.
CSS3 is also not a "new CSS" as many people think; like HTML 5, it's backwardly compatible with everything that's come before it. Going forward, however, there's an amazing amount of new functionality, allowing a multitude of creative possibilities that simply did not exist in previous versions.
Code Samples
Code Samples
As we make our way through the book, I'll be creating various code samples for you to study. These code samples won't be available for download, but they will be small enough to type in by hand.
In most cases the code will be given only to highlight a specific topic, especially in the case of mixed CSS and HTML code. With the HTML code (unless it's a quite complex example) in general, I’ll just describe what's needed, then show the CSS code as a code sample.
Because of this, I will be assuming that the reader understands HTML, how it's structured, and how to create standard simple HTML tags and elements. If you do not, then I strongly advise that you read at least some background material on the subject before you proceed any further with this book.
To try and make things somewhat easier, however, the following HTML code should serve as a very minimal example of an HTML 5 standards document. This is by no means a complete example; its purpose is to provide a boilerplate starting point for other code in the book.
All the examples I present throughout this book will make an assumption that you’re using a similar piece of code, and will seek to build on top of that code.
<!doctype html>
<html>
<head>
<title>Basic HTML 5 document</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>This is a basic HTML 5 document</h1>
</body>
</html>
Code Listing 1: Basic HTML 5 document
Pay close attention to the link tag in the header—this specifies a file with the name of styles.css.
It's in a file with this (or a similar) name that we'll be placing most of our CSS code.
Good practice dictates that CSS code be separated from HTML code, and since one of the underlying principles of the Succinctly series is to promote good practices, then we shall endeavor to maintain this throughout the course of the book.
Of course, you don't have to call your file styles.css; you may call it anything you wish. However, if you do change its name, then please remember that you've used a different name when creating basic HTML documents to experiment with.
You’ll be able to tell if you get the file name wrong—you'll see an error in your browser debugging tools, something similar to Figure 1.
Figure 1: Chrome browser tools showing CSS file failing to load
If your HTML file is unable to find a linked CSS file, then none of the style rules you define will be used, and your result will look nothing like it should.
A quick word on browser compatibility
A quick word on browser compatibility
One final thing that we need to address before moving on is browser compatibility.
Anyone who's done any kind of HTML frontend-driven web development knows all too well the pain involved in making code appear uniform across all browsers.
This won't be more true if you've spent any time working with the CSS2 and HTML4 standards, and the browser wars of not-too-distant years.
Because CSS3 comes in, in-line with the newer HTML 5 standards, then I'll not be going out of my way to ensure the code I present will work without fail on all older browsers.
For the course of this book I'll be working with the following browser:
Google Chrome 39.0.2171.95 m
I'll also have the following browser versions available, but won't necessarily be using them:
Firefox 34.0.5Internet Explorer 11.0.9600.17501 Update 11.0.15 (KB3008923)Maxthon Cloud Browser 4.4.3.4000Since I'll mostly be sticking to features that are more or less complete, or have identical support across the four browsers mentioned, then you should have no problems using a different browser. I will, however, note where possible any changes that may be needed.
Be aware that there may be cases, when using a different browser, where a vendor prefix may be needed (but that I've missed due to my use of Chrome).
As a general rule of thumb, I develop using Chrome, then modify to accommodate other browsers. If something does not work as expected, then please do look up the CSS3 syntax for the nonworking code, online, before assuming that the code is broken.
As for minimum versions, I won't be attempting to make any code in this book work correctly you may need to use an appropriate helper library of some kind to fill in the gaps. Due to the sheer number of helpers available, there is unfortunately no room in this book to discuss them all.
Chapter 2 Basic CSS Refresher
Chapter 2 Basic CSS Refresher
Before we get started on the main core of the book, let’s go through a basic CSS refresher.
If you've worked with CSS before, or are up to speed with the language and how it works, then you can safely skip this part of the book. If your CSS skills are a little rusty, or you’re quite new to the concept of CSS in general, then you should read this chapter, as it will provide the basic groundwork for what's to come in the following chapters.
Defining CSS
Defining CSS
So what exactly is CSS?
CSS stands for Cascading Style Sheets, and the idea behind them is a very simple one. CSS documents are created solely for the purpose of styling (that is, managing color, size, layout, position, and much more) the contents of an HTML document.
While HTML code's purpose is to define the structure of the document, CSS is there to define how that content is presented to the end user.
CSS was originally created to reduce the amount of markup that was being used in an HTML document to dictate what a particular chunk of HTML looked like.
Many modern-day web developers may never have seen this older syntax, so to give you an example of how things used to be done, look at Code Listing 2:
<body>
<font family="serif" size="20pt" color="#FF0000">
<i>
<b>
<h1>This is my header in bold italic, 20 point red serif font</h1>
</b>
</i>
</font>
</body>
Code Listing 2: A typical example of pre-CSS styling
Today's browsers will still obey this and style it appropriately, as shown in the following image:
Figure 2: The output produced by the pre-CSS code sample in Code Listing 2
As you can see from the HTML code presented in Code Listing 2, vastly more markup was required to produce a simple one-line, bold, red header than most are used to today.
That was just one line—imagine having to do this every time you wanted to produce a similarly styled header for your page.
CSS rules solve two of these problems immediately. First, they typically define the rules that define how the text should look in a separate file. This immediately means that a designer or graphics-only person can easily change these rules without ever having to worry about the code in the HTML file.
Secondly, they promote re-use of a rule on multiple elements through the use of the class attribute, which means you only have to specify the settings once, then tell the markup when to use those settings.
Let's now revisit Code Listing 2, and examine the difference I've just described.
<h1 class="boldred">This is my header in bold italic, 20 point red serif font</h1>
Code Listing 3a: Our new HTML markup for the bold red style
.boldred
{
font-family: serif;
font-size: 20pt;
color: red;
}
Code Listing 3b: The bold red style rule now defined in styles.css
You can immediately see the difference here, and to re-use the rule on another line, we simply have to add class="boldred" as an attribute to our tag. If we then proceed to change the style rule from, say, red to green, every element using that rule will suddenly change to a green color without ever having to touch any HTML markup.
So now we know why CSS was defined; next we'll start to look at how.
Cascading the rules
Cascading the rules
The astute reader may already be asking themselves what the “cascading” part of CSS stands for. To cascade is to flow or follow downwards, and that’s exactly what CSS style sheets do.
Not considering the subject of specificity for now, which is covered later in this book, rules that are obeyed or discovered further down the chain override anything further up the chain. If you’re not used to this, it can present some interesting bugs and challenges for you, especially when you first start out exploring what is and isn’t available.
Once you see it in action, however, the concept is quite simple.
Take the following style rule:
.mystyle
{
font-size: 10pt;
color: green;
}
Code Listing 4: Simple green text CSS rule
If you were to attach that to an element, you would rightly expect the text to be 10 points in size and green in color.
Now imagine this rule was defined in a style sheet that was already implemented in a CSS document, included elsewhere in your project (as part of a content management system, for example).
Furthermore, imagine you've been asked to make all text using that rule red, but without being able to change the style file previously created.
The reasons why you might not be able to change the original file are many and varied; the style sheet may be also being used by a second site where the text must remain green, or the styles may be being produced dynamically, for example. Whatever the reason, this scenario happens much more than you might anticipate.
However, if you simply create a second style file (let's call it styles2.css), then duplicate the link tag (as seen in the basic HTML code in the previous chapter) and change the file name appropriately, we can then proceed to add the following CSS rule to this new file.
.mystyle
{
color: red;
}
Code Listing 5: Our duplicate rule created in 'styles2.css'
If you've done things correctly, then you should be greeted by red text in your browser, rather than green text.
In order to continue to use the green version, you simply leave out the second link that loads styles2.css, and include it to “adjust” your rule to be red.
If you change the font size in the original file, you'll see that, that one single change will affect both the red and green versions of the text.
This cascading of styles can be used in many different ways; before I explain that however, there's one more important refresher topic you need to understand first.
CSS Selectors
CSS Selectors
So far you've only seen the use of a “class” attribute-based CSS rule, but there are many other ways that rules can be defined.
Take the following example HTML.
<p id="importantInfo">This is a standard text paragraph, with no explicit style rule defined, all it has is an 'id' attribute that essentially gives the HTML parser a name for it</p>
Code Listing 6a: HTML markup with an ID attribute
#importantInfo
{
color: red;
font-size: 14pt;
}
Code Listing 6b: CSS Style rule that targets a given ID
In Code Listing 6a, I define a standard HTML paragraph tag. It has no associated style information or class selectors applied to it; all it has is a simple id attribute, which essentially allows us to give the element a name.
If you look at the CSS rule defined in Code Listing 6b, however, you'll see that instead of a period [.] being placed in front of the rule name, we now have a number sign [#] in front of it.
CSS can use a number of different symbols when defining rules. These symbols are known as CSS selectors, and how you define a selector dictates how you intend the rule to be used.
In the case of Code Listing 6, we've used the ID selector. The purpose of the ID selector is to target one specific, named element in a document.
In Code Listings 4 and 5, the class selector was intended to be used on many different elements, simply by adding a class attribute. Because a given ID can only be applied to one element at a time, when we specify a CSS rule that targets an ID, we are for all purposes saying that this rule applies to that element and ONLY that element—never any other.
However (as you'll see in just a moment), ID selectors are often used deliberately to control hierarchy in a CSS document, and make full use of the cascading nature of the technology.
Cascading can be used to great effect when we chain selectors together, because it allows us to drill down deep into the HTML markup, without ever having to make sure that we dictate what the markup should look like.
Let's imagine for a moment that we’re creating an HTML document containing news posts.
Every news post in the document has to obey the same set of style rules, and as such, takes on the same look and feel for every post.
Each post should be shown on a different color background to the rest of the page, and should always have blue, bold headers with smaller, red paragraph text.
Based on what we've seen so far, we might be tempted to write the following code.
<div id="newspost">
<h1 class="newsheader">News article 1</h1>
<p class="newstext">The article text for news article one, this should be standard paragraph text<p>
<h1 class="newsheader">News article 2</h1>
<p class="newstext">The article text for news article 2 goes right here, and looks the same as article one</p>
</div>
Code Listing 7a: Possible news article HTML code
#newspost
{
background-color: silver;
}
.newsheader
{
color: blue;
font-size: 15pt;
}
.newstext
{
color: red;
font-size: 10pt;
}
Code Listing 7b: Possible news article CSS code
While this will work very well and produce the desired output, we can actually take advantage of CSS's cascading nature here, and actually make things a little more obvious—even to the point where our HTML and CSS are almost describing their own intent.
If we change the HTML in Code Listing 7a so that we remove all the class tags from each of the h1 and p elements, we should end up with the following code:
<div id="newspost">
<h1>News article 1</h1>
<p>The article text for news article one, this should be standard paragraph text<p>
<h1>News article 2</h1>
<p>The article text for news article 2 goes right here, and looks the same as article one</p>
</div>
Code Listing 8: The code from Listing 7a with the class attributes removed
As you can see, all we have left now is the ID defining the name of newspost for the div element that wraps all of our articles.
Now change the CSS code as follows:
#newspost
{
background-color: silver;
}
#newspost h1
{
color: blue;
font-size: 15pt;
}
#newspost p
{
color: red;
font-size: 10pt;
}
Code Listing 9: The CSS code from Listing 7b with changed selectors
You should find that when you render it in your browser, you still get the following output:
Figure 3: Output produced by Code Listings 8 and 9
One of the really great things about letting the cascading nature take care of things like this, is that you could easily add another article to your newspost div just by inserting the h1 and p elements as appropriate. You don't in any way need to worry about assigning the correct class name to each h1 and p element as you add it, nor do you have to keep checking that both elements are using the correct styles.
As long as the elements are within a section that has the named ID, they will be colored accordingly. Note also that the cascading behavior we've just seen doesn’t apply only to ID-based selectors; you can, for example, have a class-based selector for the newspost div, that you might intend to reuse, and you can still cascade the styles for the other elements off of that, as the following code shows:
.newspost
{
background-color: silver;
}
.newspost h1
{
color: blue;
font-size: 15pt;
}
.newspost p
{
color: red;
font-size: 10pt;
}
Code Listing 10: The CSS code from Listing 9 using class selectors
Using a cascaded, class-based selector like this allows you to reuse your newspost class in many different places in your HTML, and any h1 or p elements placed inside of said element will automatically take on the look and feel of the blue headers with red text.
