Meaning of Brackets in CSS

Save

CSS stands for "cascading style sheets." CSS gives a greater degree of artistic and design control to Web developers and designers by separating content from display parameters. CSS instructions are placed in the head section of a Web document, and then indicated within the body of a Web page by curly brackets -- {}. Within the curly brackets are curved brackets -- ( ) -- or square brackets -- [ ] -- which designate further CSS elements.

Curly Brackets

  • Curly brackets are the primary elements of CSS syntax. They signify the opening and closing of all CSS parameters within them. Represented as { }, they follow CSS elements that signify an image, position, display element or any combination of elements. The curly brackets exist within any div/layer element, and are always within the "<body> < /body>" tags. Here is an example:

    div#example {
    padding: 5px;
    margin: 20px;
    width: 350px;
    }.

Curved Brackets

  • Relational elements, such as percentages and colors, are contained within curved brackets (the parentheses of text documents). Curved brackets further define CSS elements. In versions of CSS before CSS3, curved brackets could define elements in the same way curly brackets can. Two examples are color (defined by hex code) and background images, respectively:

    color:rgb(128, 128, 255);
    image:URL("/images/bg.png").

Square Brackets

  • Square brackets -- [ ] -- known as attribute selectors are used to designate attribute values of an element. There were four different values in CSS2; three more were added with CSS3. The original four selectors define attribute presence -- [title], matching any element that has a "title" attribute specified; simple attribute value -- input[type="submit"], matching any input element whose type attribute equals “submit”; attribute list value -- p[class~="literary"], matching paragraphs whose class attribute is a space-separated list of words, one of which is “literary”; and partial attribute value -- a[href^="http:"], matching link elements whose attribute value starts with “http:”. Square brackets were not widely used prior to the introduction of Internet Explorer 7 because IE6 did not recognize them.

Chevrons

  • Selectors and document sections basic to hypertext markup language (HTML) and extensible markup language (XML) are enclosed by pointed brackets known as chevrons. They also signify a child of some CSS elements. In CSS, a " child selector" is made up of two or more items separated by the chevron ">." These denote certain defined sections of a Web page: the body, which is the visible page; the layer(s), which can be stacked like sheets of paper atop each other; or titling, which denotes certain objects or dates known as "microformats."

CSS Notes

  • Separate from CSS brackets, yet a valuable organizational tool for involved CSS layouts, are style sheet notes. These are comments that don't add to the HTML code, and therefore don't lengthen page loading times; they provide an outline to long and involved CSS. CSS notes are placed within their own bracketing attribute -- /* -- like this:

    / Any comment is contained within bracketed and asterisked segments /.

    They can be immensely valuable in helping navigate through sections of cascading style sheets.

References

  • "CSS Mastery: Advanced Web Standards Solutions"; Andy Budd, et al.; 2009
  • W3 Schools: CSS Syntax
  • "The Ultimate CSS Reference"; Tommy Olsson, et al.; 2008
  • Photo Credit Comstock/Comstock/Getty Images BananaStock/BananaStock/Getty Images
Promoted By Zergnet

Comments

Resources

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

M
Is DIY in your DNA? Become part of our maker community.
Submit Your Work!