This time I want to give glimpse of CSS(Cascading style sheets)
Before I jump in to CSS its better to know what comprises a web page. Basically any moderate web page is composed of 3 technologies.
- HTML – Content
- CSS – Presentation
CSS is simply a presentation technology used in web pages to give really cool look and feel to the HTML elements(content).
CSS is simply a set of rules which will be combined with a html page to govern their appearance.
CSS can be written three different ways
- inline styles – inlined inside tag with style attribute. example
. This limits to specific element
- embedded styles – the styles are written inside a html page using tag. This limits to a specific page
- external styles – the styles are written in seperate file and linked to html using the tag in tag. This is the most prefered way of writting styles.
Following is a sample css rule
above style when applied on a html page give its body a yellow background with solid border
Every css rule comprises of two things
in the above style, ‘body’ is the selector and the inner statements are called declarations
selector basically selects a group of html elements and declarations are the actual rules that are applied on the selected elements.
So the heart of a css are its selectors. There are various ways in which we can select HTML elements.
1. Normal selectors
This is the simplest css selector
2. Selector groupings
In this selector we specify more than one element each separated by comma to which the declared styles need to be applied.
3.a. Descendant selectors
Descendant selectors are declared similar to selector groupings but separated by space, what this mean is(from above) the declared styles apply to element ‘a’ only when ‘a’ tag appears inside(any child of child….) ‘h1’ tag
3.b. Child selector
Same as descendant selectors but ‘a’ should be the child of ‘h1’ (this is not the case with descendant selectors)
4.a. Adjacent selector
Here ‘a’ tag should be the adjacent sibling of ‘h1’ tag
4.b. General Adjacent selector
Here ‘a’ tag should be the sibling(need not be adjacent) of ‘h1’ tag
5. ID selector
This selector selects elements whose id is ‘myaddress’
6. Class selector
This selector selects elements whose class is ‘myaddress’
7. Attribute selector
Attribute selectors simply selects an element based on their attributes.
- Selects any element which as href as attribute
- Selects any element whose type attribute has a value “submit”
- this ~ is for selecting attribute values seperated by spaces….so actual class attribute may be declared as
. Selects any element whose class attribute contains style “abc”
- | is for selecting attribute values seperated by hypen(-)….so actual hreflang attribute may be declared as
. Selects any element whose hreflang attribute contains style “en”
- ^ is for selecting attribute values which begins with the specified value. In above example any href whose value starts with “http://”
- $ is for selecting attribute values which ends with the specified value. In above example any href whose value ends with “pdf
- ^ is for selecting attribute values which contains the specified values. In above example any href whose value contain “.co.in”
9. Pseudo-class selector
These selectors are applied to only to some set of html tags. They are dependent on the behavior of the element. In the above example when a ‘a’ tag is visited(clicked) then its color will be changed to red. There are some predefined pseudo classes
9. Pseudo-element selector
These selectors are applied to decorate a specified tag, In the above example a ‘p’ tag will have its first letter background in blue color. There are some predefined pseudo elements
10. Universal selector
This selector applies to all the elements in the document
This is brief round up of CSS selectors.