Explore BrainMass

Explore BrainMass

    CSS

    CSS stands for 'cascading style sheet'. 

    'Style' is there because prevailing industry paradigm of the moment dictates that content, form (style) and behavior should be handled mostly separately in web design. On a basic level, this means content is written in HTML/XHTML, form/style in CSS and the website's user-interactive behaviors, largely in Javascript, PHP, AJAX and a host of other dedicated web programming languages. For example, when writing the HTML content skeleton of a page, it is common to write important things in bold* like so: <b>important bold text</b>. Without CSS that will simply appear 'important bold text' but once CSS is involved, that bold tag effect can be overwritten to almost anything.

    This is where the sheet part of CSS comes in. While possible to include CSS rules directly in the HTML file, it is standard practice to include a separate file with only the CSS rules - that is the 'sheet'. This one sheet can apply to more than one HTML (or XML) document too, removing the need to rewrite formatting for each individual document. CSS rules can apply to any sort of HTML tag, and look generally as follows (using the bold text example):

    b {

    color: red;

    }

    The above will turn everything between <b></b> tags in the HTML document red (leaving on the regular bold font weight too). Here is what each individual part does:

    the selector signifies that the rule to follow applies to all text between <b></b> tags

    { ... } 

    curly brackets mark the beginning and end of the declaration block (body) of the rule

    color:...;  'color' is one of many properties that can be changed by the value after the colon (:). These attribute assignments must be finished with a semi-colon (;).  Note that American spellings are used.

     

    Note that the spacing and line-breaks above are not mandatory, but when you have multiple properties, this style makes it infinitely more readable.

     

    One of the most useful thing about CSS is it's ability to be incredibly specific. With no other rules but the one above, every single character of text in bold tags would be bold and red, but what if you had a table like the one above and wanted all the bold text in that table to be blue instead? Fortunately, CSS has the answer - it has an order of precedence that choses the most specific rule to the HTML at hand to apply. In general, it also reads from top to bottom. These make up the cascading nature of CSS. All you would need to do would be to add an additional rule that looks like this:

    table b {

    color: blue;

    }

    Here, the table b means this rule applies to any text between <b></b> AND <table></table> tags. Now, when coming across such text, the browser will notice that this new rule is more specific to the situation of the bold than the former rule about bold text in general. Therefore, any and all bold text in any and all tables on the webpage will be blue, while non-tabled bold text will remain red.

     

    *while the word 'bold' is used for clarity in this blurb, it should be noticed that 'strong' is now the prefered way to mark out bolded text, for semantic reasons. In reality, the example HTML would look more like <strong>bold text</strong>, and the CSS pertaining to bold text would use strong instead of b (or sometimes both, to be safe).

    © BrainMass Inc. brainmass.com March 28, 2024, 4:37 pm ad1c9bdddf

    BrainMass Solutions Available for Instant Download

    HTML Documents Presented in Different Ways

    The goal of this assignment is to demonstrate how a single HTML document can be presented in two different appearances, determined by the document's CSS stylesheet. Your HTML file should be called p1.html and the two stylesheets should be called p1a.css and p1b.css. If the HTML file links to p1a.css then it should appear like th

    HTML5 & CSS

    Create an HTML5 application using the following guidelines: 1. Produce an HTML5 page divided vertically into two divs (left and right). 2. Reproduce the table below in HTML5 in the left hand div. Team Played Won Drawn Lost Points City 8 5 2 1

    Produce HTML Code and an External CSS

    Produce HTML code and an external CSS file that will contain the following features: 1. An un-ordered list containing links to the home pages of Microsoft, Google, and SourceForge. It will employ the disc option for bullet points. 2. An image other than the one in the Lecture

    What are the nine border styles available in CSS?

    What are the nine border styles available in CSS? Give an example of how to apply one of these border styles. Explain how to combine multiple border attributes into one style declaration, using the example of an 8-point red dashed border.