CSS Stands for "Cascading Style Sheet." Cascading style sheets are used to format the layout of Web pages. They can be used to define text styles, table sizes, and other aspects of Web pages that previously could only be defined in a page's HTML.
CSS helps Web developers create a uniform look across several pages of a Web site. Instead of defining the style of each table and each block of text within a page's HTML, commonly used styles need to be defined only once in a CSS document. Once the style is defined in a cascading style sheet, it can be used by any page that references the CSS file. Plus, CSS makes it easy to change styles across several pages at once. For example, a Web developer may want to increase the default text size from 10pt to 12pt for fifty pages of a Web site. If the pages all reference the same style sheet, the text size only needs to be changed on the style sheet and all the pages will show the larger text.
While CSS is great for creating text styles, it is helpful for formatting other aspects of Web page layout as well. For example, CSS can be used to define the cell padding of table cells, the style, thickness, and color of a table's border, and the padding around images or other objects. CSS gives Web developers more exact control over how Web pages will look than HTML does.
Benefits of CSS in Web Development
Improves Website Presentation
The standout advantage of CSS is the added design flexibility and interactivity it brings to web development. Developers have greater control over the layout allowing them to make precise section-wise changes.
As customization through CSS is much easier than plain HTML, web developers are able to create different looks for each page.
Makes Updates Easier and Smoother
CSS works by creating rules. These rules are simultaneously applied to multiple elements within the site. Eliminating the repetitive coding style of HTML makes development work faster and less monotonous. Errors are also reduced considerably.
Since the content is completely separated from the design, changes across the website can be implemented all at once. This reduces delivery times and costs of future edits.
Helps Web Pages Load Faster
Improved website loading is an underrated yet important benefit of CSS. Browsers download the CSS rules once and cache them for loading all the pages of a website. It makes browsing the website faster and enhances the overall user experience.
This feature comes in handy in making websites work smoothly at lower internet speeds. Accessibility on low-end devices also improves with better loading speeds.
Types of CSS
There are the following three types of CSS:
1. Inline CSS.
2. Internal CSS.
3. External CSS.
Inline CSS
For Inline CSS every style content is in HTML elements. It is used for a limited section. Whenever our requirements are very small we can use inline CSS.
It will affect only single elements. In HTML we require that various HTML tag's views are different so then we use inline Cascading Style Sheets. There are disadvantage of inline Cascading Style Sheets. It must be specified on every HTML tag. There is very much time consumed by that and it is not the best practice for a good programmer and the code will be quite large and very complex.
Inline CSS examples are given below:
In internal CSS the style of CSS is specified in the <head> section. This is internal CSS, it affects all the elements in the body section. Internal CSS is used in the condition when we want a style to be used in the complete HTML body. For that, we can use the style in the head tag.
This style performs an action in the entire HTML body.
External CSS
In External CSS we create a .css file and use it in our HTML page as per our requirements. Generally, external Cascading Style Sheets are used whenever we have many of HTML attributes and we can use them as required; there is no need to rewrite the CSS style again and again in a complete body of HTML that inherits the property of the CSS file. There are two ways to create a CSS file. The first is to write the CSS code in Notepad and save it as a .css file, the second one is to directly add the stylesheet in our Solution Explorer and direct Visual Studio to use it on our HTML page.
How to create and use an External CSS.
1. Right-click on your application name in Visual Studio 2012.
2. Add a style sheet.
3. Write your CSS code and save it.
4. Open your HTML page and drag down the style sheet.
5. Save and RUN.
CSS selection
The element Selector
The element selector selects elements based on the element name.
You can select all <p> elements on a page like this (in this case, all <p> elements will be center-aligned, with a red text color):
p {
text-align: center;
color: red;
}
text-align: center;
color: red;
}
The id Selector
The id selector uses the id attribute of an HTML element to select a specific element.
The id of an element should be unique within a page, so the id selector is used to select one unique element!
To select an element with a specific id, write a hash (#) character, followed by the id of the element.
The style rule below will be applied to the HTML element with id="para1":
#para1 {
text-align: center;
color: red;
}
text-align: center;
color: red;
}
The class Selector
The class selector selects elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the name of the class.
In the example below, all HTML elements with class="center" will be red and center-aligned:
.center {
text-align: center;
color: red;
}
text-align: center;
color: red;
}
Basic syntax
Comments
Comments in CSS are signified by a forward-slash and asterisk.
Example
/* This is a single line comment */
Properties
Properties are defined within selectors by defining a property and a value. They are separated by a colon and delineated with a semi-colon.
Syntax
selector {
property: value;
}
Example
h1 {
color: blue;
}
DEFINING MANY PROPERTIES
Each CSS rule can have as many properties as you like. Each of them applies to the elements that the selector applies to.
Example
h1 {
font-size: 24px;
font-weight: bold;
border: 1px solid black;
color: pink;
}
/* This will make all <h1> headers big, bold, pink, and inside of a thin black rectangle! */
PADDING
The padding is the spacing between the content and the border (edge of the element.). We can adjust this value with CSS to move the border closer to or farther from the content. Here, the div with id 'box' will get 10px of padding all around it.
Example
#box {
padding: 10px;
}
MARGIN
The margin is the space around the element. The larger the margin, the more space between our element and the elements around it. We can adjust the margin to move our HTML elements closer to or farther from each other. Here, the div with id 'box' will get 10px of margin above and below it, and 5px of margin to the left and right.
Example
#box {
margin: 10px 5px 10px 5px;
}
FONT-FAMILY
The font-family property sets the font of an HTML element's text.
Syntax
p {
font-family: Arial, Helvetica, sans-serif;
}
Selectors
Selectors are used in CSS to select the parts of the HTML that are being styled. You can use several different methods for selecting an element.
Syntax
selector {
rules;
rules;
rules;
}
CLASS NAME SELECTORS
You can also select HTML elements by their Class name. Unlike ID selectors, Class selectors select all elements with a matching class.
Example
a.link {
font-size: 12px;
}
/* HTML Selected: <a href="http://google.com" class="link">,
<a href="http://codecademy.com" class="link jumbo"> */
Example
.jumbo {
text-size: 1000px;
}
/* HTML Selected: <a href="http://codecademy.com" class="link jumbo">,
<span class="jumbo"> */
ELEMENT SELECTORS
You are able to select HTML elements first by simply using the name of the element.
Example
body {
background-color: #333;
}
Example
h1 {
color: blue;
}
Example
a {
text-underline: none;
}
ID SELECTORS
ID selectors are used to selecting only a single item on a page. Like the term ("identification") indicates, ID selectors will ONLY select the first element with a matching ID.
Example
#thatThingINeededToStyle {
color: blue;
font-size: 24px;
}
/* HTML Selected: <span id="thatThingINeededToStyle"> */
Example
a#codecademy {
color: purple;
}
/* HTML Selected: <a href="http://codecademy.com" id="codecademy"> */
ATTRIBUTE SELECTORS
HTML elements are also able to be selected by their attributes.
Example
a[href="http://codecademy.com"] {
color: purple;
}
/* HTML Selected: <a href="http://codecademy.com"> */
Example
input[type="text"] {
width: 100px;
}
/* HTML Selected: <input type="text"> */
Example
input[required] {
border: 1px red solid;
}
/* HTML Selected: <input type="text" required> */
CHILD SELECTORS
You can also use multiple selectors to get the exact elements you want, by using parental nesting. By using the "greater-than" symbol (>), you can select only the direct children of an element, going down only one level.
Example
ul > li {
display: inline-block
}
/* Selects only the first-level list items in all unordered lists in the HTML */
Example
ul a {
text-underline: none;
}
/* Selects all anchors which have an unordered list their ancestry */
Example
ul + span {
display: inline;
}
/* Selects only spans that directly follow an unordered list */
Example
a ~ h1 {
color: blue;
}
/* Selects all h1 elements that are in the general vicinity of an anchor */
UNIVERSAL SELECTOR
The universal selector (*) may be used to select all the elements in a particular range. Be aware that the universal selector is the most performance taxing selector, and should be used sparingly.
Example
* {
background-color: blue;
}
/* Selects ALL HTML elements in the page */
Example
body * {
color: red;
}
/* Selects ALL children of the body */
Example
div > * {
color: red;
}
/* Selects ALL first-level children of all divs on the page */
PSEUDO CLASS SELECTORS
Pseudo Selectors can be used to narrow down a selection with certain rules.
Example
li:first-child {
color: red;
}
/*
This selects only <li> elements that have no elements before them
<ul>
<li>Selected; will be red</li>
<li>Not selected</li>
<li>Not selected</li>
</ul>
*/
li:last-child {
color: red;
}
/* This does the opposite; only the last <li> will be red. */
Example
a:hover {
text-decoration: underline;
}
/* Will underline all links when the user puts their mouse over them */
a:active {
font-weight: bold;
}
/* Will make all links bold while the user is clicking on them. */
Limitations of CSS Technology
Browser Dependent
The only major limitation of CSS is that its performance depends largely on browser support. Besides compatibility, all browsers (and their many versions) function differently. So your CSS needs to account for all these variations.
However, in case your CSS styling isn’t fully supported by a browser, people will still be able to experience the HTML functionalities. Therefore, you should always have a well-structured HTML along with good CSS.
Difficult to retrofit in old websites
The instinctive reaction after learning the many advantages of CSS is to integrate it into your existing website. Sadly, this isn’t a simple process. CSS style sheets, especially the latest versions, have to be integrated into the HTML code at the ground level and must also be compatible with HTML versions. Retrofitting CSS into older websites is a slow tedious process.
There is also the risk of breaking the old HTML code altogether and thus making the site dead. It’s best to wait till you redesign your website from scratch.
As you can see from the above points, the advantages of CSS development outweigh its limitations. It is a very useful web development tool that every programmer must master along with basic HTML.
0 comments:
Post a Comment