CSS Getting Started Tutorials
What Is CSS?
CSS, which is short for Cascading Style Sheets is a technology that gives web designers as well as users more control over how the way the contents of HTML and XHTML tags are displayed in the browser, for example, a paragraphs alignment, the text size and color, backgrounds and much, much more can all be controlled by CSS.
Read More ››How Does CSS Work?
In order for CSS to work you will have to first start off by creating your HTML or XHTML web page. You will then need to write out the style rules for each tag that you want to apply CSS to, for example, the style rule p {color: blue;} will turn all your <p> tags foreground also known as text into the color blue, unless you state a style rule that will override that one. I will explain more about style rules later on in a future tutorial, believe me, I know what I’m talking about.
Read More ››How To Write Your First CSS Style Rule
Now in CSS each style rule is made up of two main parts, which I will list below.
Read More ››Adding Style To Multiple Tags
You can also apply the same styles to multiple tags if you like by grouping multiple selectors, each separated by a comma (,), for example, say you want your <h1>, <h2> and the <p> tags to all have the color purple for their text, you would then have to write your style rule in the following way in the example below.
Read More ››How To Add CSS Styles To All Your Tags Using The Universal Selector
Lets say you want to add the same style rule to all your tags in your web page instead of grouping multiple selectors together. In order to do this you will need to use the universal selector also known as the wildcard selector, which is just simply an asterisk (*). For example, if you want all your tags in your web page like the <h1>, <h3>, <p>, <ul> tags and so on to have the color gray for its text, all you have to do is code in the wildcard selector in the following way in the example below.
Read More ››You’re probably asking yourself why would I want to name my tags. Lets say you have a web page that answers frequently asked questions from your users. You have a paragraph that holds the users question using the <p> tag and another paragraph that holds the answer also using the <p> tag. You want all the questions text to be in bold and in the color of navy.
Read More ››Unlike the class attribute, which allows you to add style to any number of tags, which is known as a style class. You can also use the id selectors to add style to individual tags by including the id attribute. This type of method is known as individual styles because we can only assign one unique name to an individual tag once per web page. You can have many id selectors per web page, but each will have to have a unique name.
Read More ››How To Add Comments In CSS
In CSS, you can add comments that are very much like C/C++ comments. In order to add comments in CSS you start by including a slash (/) followed by an asterisk (*), and to end the comment you will need to include another asterisk (*) followed by another slash (/).
Read More ››Now you can add your styles to each individual tag by using the style attribute. The value of the style attribute will be the declarations from the declaration block but without the curly brackets or selector. You must also separate each style declaration with a semicolon (;). You cannot however place pseudo-class styles like :hover and so on or pseudo-element styles like :first-letter and so on in a style attribute. You also can’t specify a media type in a style attribute.
Read More ››Embedded style sheets which are also known as internal style sheets are another way of adding CSS to your web pages. In order to use embedded style sheets you will need to use the <style> tag, which requires an end tag. You will also need the <style> tags required type attribute with the value of text/css which will indicate the style sheets language. The <style> tag must be placed within the <head> tags.
Read More ››Now external style sheets are separate files that can only hold style rules and CSS comments, no other markup languages like HTML or XHTML tags or other types of comments except for CSS comments are allowed. So basically, an external style sheet is just a list of style rules.
Read More ››Instead of adding external style sheets with the <link> tag you can add external style sheets using the @import rule also known as @import directive or the @import at rule. The @import rule basically imports one style sheet into another.
Read More ››How To Add CSS To An XML Or XHTML File
You can also add CSS to an XML file or an XHTML file that is sent with the MIME type of application/xml, application/xhtml+xml or text/xml.
Read More ››Recognizing The Cascade
Now let me explain to you on how to recognize the cascade game, which the browsers play in order to determine on how to use the CSS style rules declarations.
Read More ››