CSS3 Articles
Give that website some style and get dynamic with the latest CSS and HTML5 standards, tricks, and workflows.
Articles From CSS3
Filter Results
Article / Updated 11-05-2019
In most cases, developers don’t get to choose a user’s browser. To determine whether a particular user can work with your CSS3 application, then, you need first to detect the user’s browser — and then determine whether that browser is acceptable. Creating the code required to perform this task by hand isn’t impossible, but it can be hard. Articles like the one at Javascripter.net tell you how to perform this task, but one look at the code should tell you that it’s a complex task. (You can see the output from this example code here.) jQuery makes it possible to perform the detection with relative ease. The following example shows one method to detect the name and version of the user’s browser. It relies on the latest 1.x version of jQuery, which is version 1.10.1 at the time of this writing. (You can find complete code for this example in the Chapter 06jQuery folder of the downloadable code as BrowserDetect.html.) <!DOCTYPE html> <html> <head> <title>Detect a Browser</title> <script src="http://code.jquery.com/jquery-latest.js"> </script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.js"> </script> </head> <body> <h1>Browser Information</h1> <p id="name"></p> <script language="JavaScript"> var browser = $.uaMatch(navigator.userAgent).browser; $('p[id="name"]').html( "Browser Name: <span>" + browser + "</span>"); </script> <p id="version"></p> <script language="JavaScript"> $('p[id="version"]').html( "Version Number: <span>" + $.browser.version + "</span>"); </script> </body> </html> This is an HTML5 page, so it starts with the HTML declaration, . This example begins with a basic structure that includes the , , , and <body> tags. The code begins with the first <script> tag that uses the src attribute to tell the browser where to find the jQuery library. You can copy this information as shown to any page where you want to use jQuery. Anyone who uses the application will automatically have access to jQuery as long as the browser can access the Internet. (You can also download a copy of jQuery for local access from the jQuery site.) <p class="Remember">The latest 1.<i>x</i> version of jQuery doesn’t support the browser detection feature directly. In order to make the feature work with anything newer than jQuery 1.8.3, you must also include the link for the <a href="http://code.jquery.com/jquery-migrate-1.2.1.js">jQuery Migrate library</a> as shown in the example.</p> The <body> of the page starts out with a <h1> tag that contains the page’s heading. The next step is to provide a place for jQuery to put the browser’s name. In this case, the example uses a <p> (paragraph) tag that has an id of name. The first <script> creates a var (variable) named browser and places the browser’s name in it. The browser name is always provided to your application as part of the JavaScript navigator.userAgent object, but working with this object is time-consuming, so this code shows a one-line method for obtaining the information. It’s time to display the name onscreen. The $ (dollar sign) is a special symbol that refers to the jQuery library, which is also called an Application Programming Interface (API). The bit of code that says, $('p[id="name"]').html, tells jQuery to use the <p> tag with an id value of name to hold some HTML. This is a kind of selector. You now have a specific tag selected. The code then tells jQuery to create some text, a <span>, and then place the name of the browser within that span. All this information appears in the <p> tag after the script executes. Next comes a second <p> tag. This one has an id attribute of version. The accompanying script starts out the same as before. The $('p[id="version"]').html entry tells jQuery to place some HTML in the <p> tag with an id attribute of version. In this case, jQuery provides what you need as a property. All the code has to do is tell jQuery to place the value in browser.version within the <p> tag to display the browser’s version number. When you run this example, you see output similar to this: <img src="https://www.dummies.com/wp-content/uploads/414707.image0.jpg" alt="image0.jpg" width="492" height="194" /> <p class="Remember">A library can detect only the browsers it’s designed to detect. Consequently, jQuery detects some browsers, but not others. For example, you can’t currently use it to detect an Android browser because Android isn’t in the list of browsers supported by jQuery (which focuses on desktop browsers).</p> Most browser detection methods rely on user agent strings that contain information about the browser. To see the user agent string for your browser, check out <a href="https://www.whoishostingthis.com/tools/user-agent/">Who is Hosting This</a> You can generally find lists of user agent strings for devices online.
View ArticleArticle / Updated 03-26-2016
Most developers use external styles in CSS3 to reduce the amount of work required to maintain a site. A single .CSS file contains all of the styles for the site, which means that changing a style site-wide is as simple as changing that one file (rather than each page). Because the change occurs in just one place, there isn’t any chance of missing one or more changes on individual pages. Creating and using an external style sheet isn’t much different from using an internal style sheet. The following example uses standard techniques to create an external style sheet: Create a new HTML5 file with your text editor. Type the code for the HTML page. <!DOCTYPE html> <html> <head> <title>A Simple Page</title> </head> <body> <h1>A Simple Heading</h1> <p>Simple text to go with the heading.</p> </body> </html> Make sure you type the code precisely. What you should end up with is the same plain page — one without any styles. Type the following code immediately after the tag.</p> <pre class="code"><link rel="stylesheet" href="ExternalCSS.CSS" /></pre> <p class="child-para">The <link> tag tells the browser to look for an external resource. In this case, the rel attribute says that it should look for a style sheet and the href attribute provides the name of that style sheet.</p> </li> <li><p class="first-para">Save the HTML5 file to disk.</p> </li> <li><p class="first-para">Create a new .CSS file with your text editor.</p> <p class="child-para">Your editor may not support .CSS files. Any text file will do.</p> </li> <li><p class="first-para">Type the following code in the .CSS file.</p> <pre class="code">p { font-family: cursive; font-size: large; color: #0000ff; background-color: #ffff00; } h1 { font-family: "Times New Roman",Georgia,serif; font-size: 40px; text-align: center; text-decoration: underline; color: #ff0000; background-color: #00ffff; }</pre> <p class="child-para">This may be the same code that you used to create your internal file. The only difference is that it now resides in an external file.</p> </li> <li><p class="first-para">Save the CSS file to disk as ExternalCSS.CSS.</p> <p class="child-para">It’s absolutely essential that the name of the file precisely match the name found in the href attribute. Some platforms are case sensitive, so you must use the same case for the filename. For example, externalcss.css might be viewed as a different file from ExternalCSS.CSS.</p> </li> <li><p class="first-para">Load the page in your browser.</p> <img src="https://www.dummies.com/wp-content/uploads/414625.image0.jpg" width="460" height="169" alt="image0.jpg"/> </li> </ol>
View ArticleArticle / Updated 03-26-2016
Understanding the rules of inheritance in CSS3 helps you create interesting sites that require a minimum of maintenance. By following these rules, when maintenance is required, you normally have to make just one change, rather than changing hundreds of items individually. It pays to experiment, though, so you can understand the full effects of inheritance and the effects of using multiple styles together. Create a new HTML5 file with your text editor. Your editor may not support HTML5 files. Any text file will do. Type the following code for the HTML page. <!DOCTYPE html> <html> <head> <title>Inheritance Example</title> <style> p { font-family: Arial, Helvetica, sans-serif; color: Blue; background-color: Yellow; margin: 0; font-style: italic; font-size: medium; } div p { font-style: italic; font-size: larger; } </style> </head> <body> <h1>An Example of CSS Inheritance</h1> <p>A paragraph outside a <span style="font-family: monospace"> <div></span>.</p> <div id="Container" style="text-align: left;"> <p>A paragraph inside a container.</p> </div> </body> </html> This page contains a number of inline styles, which always have the highest inheritance precedence. For example, the provides a font-family of monospace for the tag part of the sentence. You could accomplish the same thing by assigning the a class attribute for code, but this example uses the inline style instead. The uses an inline style to set the text-align style to left. Because the default style sets the alignment to left, you won’t see any difference. However, if another style change modifies the text alignment, this style will take effect and prevent movement of this paragraph. The internal style modifications all appear within the tag in the <head> element. The first style sets the general characteristics for a <p> tag. Notice that the style specifically sets the font-style to italic and the font-size to medium.</p> <p class="child-para">The second style is more specific. It sets the characteristics for <p> tags that appear as a child of a <div>. Consequently, inheritance rules say that this style will take precedence when the rules of inheritance are met, which means the font-style and font-size styles will be different in this case.</p> </li> <li><p class="first-para">Save the file as Inheritance.HTML.</p> </li> <li><p class="first-para">Load the Inheritance example into your browser.</p> <p class="child-para">You see the role that inheritance and cascading styles play.</p> <img src="https://www.dummies.com/wp-content/uploads/414686.image0.jpg" width="535" height="183" alt="image0.jpg"/> </li> <li><p class="first-para">Create a new CSS file with your text editor.</p> <p class="child-para">Your editor may not support CSS files. Any text file will do.</p> </li> <li><p class="first-para">Type the following CSS style information.</p> <pre class="code">body { text-align: center; color: DarkRed; background-color: Khaki; border: inset; border-color: Green; } h1 { border: outset; border-color: Brown; } p { text-decoration: underline; font-family: "Times New Roman", Times, serif; font-style: oblique; font-size: xx-large; }</pre> <p class="child-para">The <body> tag appears as the topmost object in a page, so the changes noted in the body style should affect everything not specifically overridden later. In this case, the example changes the text alignment to center and places a dark red border around any content. The background color is also changed. Finally, the style adds a green border around every object.</p> <p class="child-para">The h1 style overrides any body styles. In this case, that means modifying the border styles.</p> <p class="child-para">The p style also overrides any body styles. However, there aren’t any properties that are the same in this case, so the p styles enhance the styles inherited from the body style.</p> </li> <li><p class="first-para">Save the file as Inheritance.CSS.</p> </li> <li><p class="first-para">Add the following code to the <head> area of the HTML file.</p> <pre class="code"><link rel="stylesheet" href="Inheritance.CSS" /></pre> <p class="child-para">This code creates the link between the HTML file and the CSS file.</p> </li> <li><p class="first-para">Save the HTML file and reload the page.</p> <img src="https://www.dummies.com/wp-content/uploads/414687.image1.jpg" width="535" height="182" alt="image1.jpg"/> <p class="child-para">Notice that all the expected changes are in place. For example, the text is centered, except for the one paragraph that has an inline style overriding the centered text. The heading text is now in dark red — the paragraph text overrides that color selection, so it remains blue. Even though there is an external p style for the size of the text, the internal style overrides it.</p> <p class="child-para">You should notice something else about the example. The body contains an inset border of the correct color and the heading contains an outset border of the correct color, because it has overridden the default.</p> <p class="child-para">However, the paragraphs have no border. At one time, <body> tag changes affected the entire document and some of them still do. However, other changes affect only the body and not other block elements. Block elements don’t inherit some settings from the body style.</p> </li> <li><p class="first-para">Delete the h1 style from the Inheritance.CSS style sheet.</p> <p class="child-para">You can also comment out the h1 style by adding the starting (/*) and ending (*/) comment symbols to it like this:</p> <pre class="code">/* Commented out to show block settings. h1 { border: outset; border-color: Brown; } */</pre> </li> <li><p class="first-para">Save the CSS file and reload the page.</p> <img src="https://www.dummies.com/wp-content/uploads/414688.image2.jpg" width="535" height="184" alt="image2.jpg"/> <p class="child-para">Notice that the heading now lacks a border. It turns out that the heading wasn’t overriding the body-level border — it was adding a new border. Never assume that a body style will carry through to other block-level styles — some settings simply don’t. When you find that your page doesn’t look as you expected it to look, try configuring the setting at a lower block level.</p> <p class="child-para">You may also see some style sheets that access the html style, which affects the <html> tag that contains the <body> tag. It’s true: You can work with the html style to achieve some effects.</p> </li> <li><p class="first-para">Add the html style shown here to the Inheritance.CSS style sheet.</p> <pre class="code">html { border: outset; border-color: Green; background-color: White; }</pre> </li> <li><p class="first-para">Save the CSS file and reload the page.</p> <img src="https://www.dummies.com/wp-content/uploads/414689.image3.jpg" width="535" height="182" alt="image3.jpg"/> <p class="child-para">You rarely have to rely on the html style because it simply isn’t necessary. The html block is a level above the body block, as shown by this example. The html block doesn’t give you access to anything that the body block can’t change in most cases, except for special effects like the one shown here.</p> </li> </ol>
View ArticleArticle / Updated 03-26-2016
Creating tables can be error prone and difficult using the older HTML tags. In addition, they prove inflexible at times. It’s possible to create tables using another technique. All you need is a series of cascading tags to perform the task. Credit: ©iStockphoto.com/Anton Cherstvenkov Many developers have used tables for all sorts of tasks in the past. Of course, there is the use of tables to display data. However, tabular arrangements are also useful for creating forms to ensure the various elements align in a predictable manner. This second use of tables is problematic because it confuses some software such as screen readers. The problem becomes one of defining a well-organized page without creating problems for the people viewing it. Using tags to create a table makes it possible for viewers to see a table or a logical arrangement of controls with equal ease. This technique also has the benefit of not confusing screen readers and other software. Defining the HTML for a table looks somewhat like creating a table using the older tags, except you don’t have to worry about odd arrangements of arcane tags to do it. Here is the HTML for a table that contains a title, headings, and two rows of content. <div class="Table"> <div class="Title"> <p>This is a Table</p> </div> <div class="Heading"> <div class="Cell"> <p>Heading 1</p> </div> <div class="Cell"> <p>Heading 2</p> </div> <div class="Cell"> <p>Heading 3</p> </div> </div> <div class="Row"> <div class="Cell"> <p>Row 1 Column 1</p> </div> <div class="Cell"> <p>Row 1 Column 2</p> </div> <div class="Cell"> <p>Row 1 Column 3</p> </div> </div> <div class="Row"> <div class="Cell"> <p>Row 2 Column 1</p> </div> <div class="Cell"> <p>Row 2 Column 2</p> </div> <div class="Cell"> <p>Row 2 Column 3</p> </div> </div> </div> Notice that each level is defined using an easily recognized name, such as Table, Title, Heading, Row, and Cell. Using this naming method makes it a lot easier to figure out what each level of the table is supposed to do. You can find many different alternatives to this approach online, but this basic approach will serve you well. The CSS for this table uses a few special properties and a little clever formatting. Here is the CSS used to make this example functional. <style type="text/css"> .Table { display: table; } .Title { display: table-caption; text-align: center; font-weight: bold; font-size: larger; } .Heading { display: table-row; font-weight: bold; text-align: center; } .Row { display: table-row; } .Cell { display: table-cell; border: solid; border-width: thin; padding-left: 5px; padding-right: 5px; } </style> Notice the use of the display property. This is the crucial property for your table because it tells the browser how to display a particular element. Otherwise, there isn’t anything strange of out of the normal about these styles. You define text attributes that help viewers differentiate between various table elements. Cells are separated from each other using a simple border. The following figure shows you how the table will appear when you view it in a browser.
View Article