Warning: Cannot modify header information - headers already sent by (output started at /home/dealkhus/cosmoread.com/wp-includes/formatting.php:5100) in /home/dealkhus/cosmoread.com/wp-content/themes/cosmoread/header.php on line 18

Warning: Cannot modify header information - headers already sent by (output started at /home/dealkhus/cosmoread.com/wp-includes/formatting.php:5100) in /home/dealkhus/cosmoread.com/wp-content/themes/cosmoread/header.php on line 19

Warning: Cannot modify header information - headers already sent by (output started at /home/dealkhus/cosmoread.com/wp-includes/formatting.php:5100) in /home/dealkhus/cosmoread.com/wp-content/themes/cosmoread/header.php on line 20

Warning: Cannot modify header information - headers already sent by (output started at /home/dealkhus/cosmoread.com/wp-includes/formatting.php:5100) in /home/dealkhus/cosmoread.com/wp-content/themes/cosmoread/header.php on line 21
Home » Education » Introduction to CSS and Layouts

Introduction to CSS and Layouts

Introduction to CSS and Layouts 

In computing, Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document, including SVG and XUL. The CSS specifications are maintained by the World Wide Web Consortium (W3C). 

CSS has various levels and profiles. Each level of CSS builds upon the last, typically adding new features and are typically denoted as CSS1, CSS2, and CSS3. Profiles are typically a subset of one or more levels of CSS built for a particular device or user interface. Currently there are profiles for mobile devices, printers, and television sets. Profiles should not be confused with media types which were added in CSS2. 

The use of CSS to position the content of a web page is sometimes referred to as CSS-P or CSS Positioning. 

Few CSS Layouts and Examples: 

About CSS 

CSS is used by both the authors and readers of web pages to define colors, fonts, layout, and other aspects of document presentation. It is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation (written in CSS). This separation can improve content accessibility, provide more flexibility and control in the specification of presentational characteristics, and reduce complexity and repetition in the structural content. CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on braille-based, tactile devices. Similarly, identical HTML or XML markup can be displayed in a variety of styles, ‘brands’, liveries or color schemes by using different CSS. 

CSS information can be provided by various sources: 

  • Author styles (style information provided by the web page author), in the form of
    • external style sheets, i.e. a separate CSS-file referenced from the document
    • embedded style, blocks of CSS information inside the HTML document itself
    • inline styles, inside the HTML document, style information on a single element, specified using the “style” attribute.
  • User style
    • a local CSS-file specified by the user using options in the web browser, and acting as an override, to be applied to all documents.
  • User agent style
    • The default style sheet applied by the user agent, e.g. the browser’s default presentation of elements.

CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called ‘cascade’, priorities or ‘weights’ are calculated and assigned to rules, so that the results are predictable. 

Advantages of using CSS include: 

  • Presentation information for an entire website or collection of pages can be held in one place, and can be updated quickly and easily.
  • Different users can have different style sheets: for example a large text alternative for visually-impaired users or a layout optimized for small displays for mobile phones.
  • The document code is reduced in size and complexity, since it does not need to contain any presentational markup.


A style sheet consists of a list of rules. Each rule consists of one or more comma-separated selectors and a declaration block. A declaration-block consists of a list of semicolon-separated declarations in curly braces. Each declaration itself consists of a property, a colon (:) then a value.Example: 

p {  font-family: “Garamond”, serif;}h2 {  font-size: 110%;  color: red;  background: white;}.note {  color: red;  background: yellow;  font-weight: bold;}p.warning {  background: url(warning.png) no-repeat fixed top;}#paragraph1 {  margin: 0;}a:hover {  text-decoration: none;}#news p {  color: red;} 

These are seven rules, with selectors p, h2, .note, p.warning, #paragraph1, a:hover and #news p.Property values are specified by, for example, color: red, where the property color is given the value red.In the first two rules, the HTML elements p (paragraph) and h2 (level-two heading) are being assigned stylistic attributes. The paragraph element will be rendered in Garamond font or, if Garamond is unavailable, some other serif font. The level-two heading element will be rendered in red on a white background.The third rule shown matches those elements that have a class attribute containing the token ‘note’. For example:<p class=”note”>This paragraph will be rendered in red and bold, with a yellow background.</p>The fourth rule shown matches those p elements that have a class attribute containing the token ‘warning’. This is in contrast to the third rule which matched all elements, not just paragraph tags, that are marked with a given class attribute (the third rule .note could also have been written as *.note).In fact, .class selectors involve a special kind of attribute matching, as opposed to testing for equality. Since the HTML class attribute is defined as a white space-separated list of tokens, a class selector is evaluated against each of them separately. For example, <p class=”note warning”> would apply both the note and the warning rule.The fifth rule will match the one and only element in each HTML document whose id attribute is set to paragraph1: It will have no margin within its rendering ‘box’ as its margin width is set to zero.The sixth rule defines the hover style for a (anchor) elements. By default in most browsers, a elements are underlined. This rule will remove the underline when the user “hovers” the mouse cursor over these elements.The last rule matches those p elements that are within the document element whose id attribute has the value news. It is an example of a descendant selector.Because of the cascading nature of CSS rules, these last p elements will inherit font-family: “Garamond”, serif as with all p elements. Those that have the token warning in the value of their class attribute, will inherit that background image too.A CSS stylesheet can contain comments; the syntax for comments is similar to that used in the C programming language/* comment */In CSS, selectors are used to declare which elements a style applies to, a kind of match expression. Here are some examples of selector syntax:All elements that is, using the * selector By element name e.g. for all p or h2 elements Descendants e.g. for a elements that are descendants of li elements (e.g links inside lists) the selector is li a class or id attributes e.g. .class and/or #id for elements with class=”class” or id=”idAdjacent elements e.g. for all p elements preceded by h2 elements, the selector would be h2 + p Direct child element e.g. for all span elements inside p, but no span elements deeper within the hierarchy, the selector would be p > span By attribute e.g. for all <input type=”text”> the selector would be input[type=”text”] In addition to these, a set of pseudo-classes can be used to define further behavior. Probably the best-known of these is :hover, which applies a style only when the user ‘points to’ the visible element, usually by holding the mouse cursor over it. It is appended to a selector as in a:hover or #elementid:hover. Other pseudo-classes and pseudo-elements are, for example, :first-line, :visited or :before. A special pseudo-class is :lang(c), where the style would be applied on an element only if it is in language “c”.Selectors may be combined in other ways too, especially in CSS 2.1, to achieve greater specificity and flexibility. In the following example, several selectors are grouped using comma separation. The rule sets the font for all HTML headings. 

h1, h2, h3, h4, h5, h6 {  font-family: “Arial”, sans-serif;} 

To use a CSS stylesheet, one would save the CSS code in a file such as example.css and then either link to it or import it from HTML or XHTML web pages using one of the two following formats:<link rel=”stylesheet” href=”example.css” type=”text/css” /><style type=”text/css”>@import “example.css”;</style>In the first example, note that the /> syntax only applies in XHTML; if writing HTML, one would close an empty element such as this with >.CSS styles may also be specified in the <head> tag or attached to a specific element via the style attribute.In applying a CSS stylesheet to an XML document, this format would be used as per the XML example below:<?xml-stylesheet type=”text/css” href=”example.css”?> 

Use of CSSPrior to CSS, nearly all of the presentational attributes of a HTML documents were contained within the HTML markup; all font colors, background styles, element alignments, borders and sizes had to be explicitly described, often repeatedly, within the HTML. CSS allows authors to move much of that information to a separate stylesheet resulting in considerably simpler HTML markup.Headings (h1 elements), sub-headings (h2), sub-sub-headings (h3) etc. are defined structurally using HTML. In print and on the screen, choice of font, size, color and emphasis for these elements is presentational.Prior to CSS, document authors who wanted to assign such typographic characteristics to, say, all h2 headings had to use the HTML font and other presentational elements for each occurrence of that heading type. A heading to be centred on the page in italic, red, Times New Roman might be written:<h2 align=”center”>   <font color=”red” size=”+4″ face=”Times New Roman, serif”>     <i>Usage of CSS</i>   </font> </h2>The additional presentational markup in the HTML made documents more complex, and generally more difficult to maintain. To render all h2 tags in this manner, the markup had to be repeated for each heading. With CSS, the h2 and other elements structure the document, while the style sheet defines presentational characteristics. The above might be written:<h2>Usage of CSS</h2>While the following block in an accompanying style sheet defines the same style for all default h2 headings across the web site:h2 {  text-align: center;  color: red;  font: italic large “Times New Roman”, serif;}Thus, presentation is separated from structure. In print, CSS can define color, font, text alignment, size, borders, spacing, layout and many other typographic characteristics. It can do so independently for on-screen and printed views. CSS also defines non-visual styles such as the speed and emphasis with which text is read out by aural text readers. The W3C now considers the advantages of CSS for defining all aspects of the presentation of HTML pages to be superior to other methods. It has therefore deprecated the use of all the original presentational HTML markup.CSS style information can be either attached as a separate document or embedded in the HTML document. Multiple style sheets can be imported, and alternative style sheets can be specified so that the user can choose between them. Different styles can be applied depending on the output device being used as in the screen version being quite different to the printed version so that authors can tailor the presentation appropriately for each medium.One of the goals of CSS is also to allow users a greater degree of control over presentation; those who find the red italic headings difficult to read may apply other style sheets to the document. Depending on their browser and the web site, a user may choose from various stylesheets provided by the designers, may remove all added style and view the site using their browser’s default styling or may perhaps override just the red italic heading style without altering other attributes.See also presentational markup, which gives example CSS code, along with the deprecated tags. 

Limitations CSSMost problems attributed to CSS are actually results of browser bugs or lack of support for CSS features. The most serious offender among current browsers is Microsoft Internet Explorer, whose version 6 lacks support for about 30 percent of CSS2 properties, and, more significantly, misinterprets a significant number of important properties, such as “width”, “height”, and “float”.However, current CSS specifications do have some genuine shortcomings. 

Selectors are unable to ascend CSS offers no way to select a parent or ancestor of element that satisfies certain criteria. A more advanced selector scheme (such as XPath) would enable more sophisticated stylesheets. However, the major reasons for the CSS Working Group rejecting proposals for parent selectors are related to browser performance and incremental rendering issues.  

One block declaration cannot explicitly inherit from another Inheritance of styles is performed by the browser based on the containment hierarchy of DOM elements and the specificity of the rule selectors, as suggested by the section 6.4.1 of the CSS2 specification. Only the user of the blocks can refer to them by including class names into the class attribute of a DOM element.  

Vertical control limitations While horizontal placement of elements is generally easy to control, vertical placement is frequently unintuitive, convoluted, or impossible. Simple tasks, such as centering an element vertically or getting a footer to be placed no higher than bottom of viewport, either require complicated and unintuitive style rules, or simple but widely unsupported rules.  

Absence of expressions There is currently no ability to specify property values as simple expressions (such as margin-left: 10% – 3em + 4px;). However, work on a calc() value to address this limitation has been discussed by the CSS WG.  

Lack of orthogonally Multiple properties often end up doing the same job. For instance, position, display and float specify the placement model, and most of the time they cannot be combined meaningfully. A display: table-cell element cannot be floated or given position: relative, and an element with float: left should not react to changes of display.  

Unexpected margin collapsing Margin collapsing is frequently not expected by authors, and no simple side-effect-free way is available to control it.  

Float containment CSS does not explicitly offer any property that would force an element to contain floats. Multiple properties offer this functionality as a side effect, but none of them are completely appropriate in all situations.  

Lack of multiple backgrounds per element Highly graphical designs require several background images for every element, and CSS can support only one. Therefore, developers have to choose between adding redundant wrappers around document elements, or dropping the visual effect. This is partially addressed in the working draft of the CSS3 backgrounds module, which is already supported in Safari.  

Check Also

Trouble in Paradise: How Biotech is Fighting Tropical Diseases

Lommodo ligula eget dolor. Aenean massa. Cum sociis que penatibus et magnis dis parturient montes …