CSS - cascading style sheet

Details

Last Updated: Tuesday, 10 November 2020 02:10

Published: Monday, 27 April 2020 14:31

Hits: 2958

CSS - cascading style sheet

CSS  are very important to know. They provide a central location to control the physical appearance of your website. You create a single css file and put definitions to define how elements are to be displayed on all of the pages of your website. Other big advantage is that you can control the layout of your whole website through this css file. Before CSS, the only way I knew to control the layout of a page, was by coding the whole page as a big table, with several nested tables inside it, to make complicated layouts. However, CSS greatly eases this by having a div command, that does this work for you. Below, I'll start with various CSS commands.

comments indicated as /* comments */

CSS syntax:

CSS is made up of rules. A CSS rule is made up of a selector and a semicolon-separated list of declarations inside brackets. Each declaration has a property and a value separated by a colon. If an element in an associated HTML document matches a selector in the style sheet, then the declarations will be applied to that element.

selector {property1: value1; property2:value2; } /* This whole thing is called a CSS rule.  Everything inside { ... } is called a declaration, which can have multiple property:value pairs
selector is html element/tag or something else defined.
property is the attribute
value is the value assigned to the attribute.

ex: center aligned paragraph with black text color and arial font. Now, any p element in html doc, will use these values to display the text. Everything can be on a single line, since CSS, like HTML ignores spaces.
p{
text-align: center;
color:black;
font-family: arial;
}

ex: assign green color to h1, h2 and h3 tags. Now, any ph1,h2,h3 element in html doc, will display the text in green color.
h1,h2,h3 {color: green}

Inheritance:  One of the key properties of CSS is that styles are inherited down the document tree, i.e if a property is specified for body, all elements in document tree of body (i.e p tags, etc) will inherit this property.

CSS implementation:

CSS can be implemented in 4 ways:
1. inside html elements: you can apply it directly to individual elements with the style attribute. This is called inline style. This is doCSS implementation:ne inside html document, and is not really in the CSS format that we talked above. This is because style is an html attribute.

style attribute: specify the styling of an element, like color, font, size etc. Can be used with almost any tag. Format is style="property:value;"  where property/value are CSS property/value. However, since using style attribute in html document has a very localized effect, it's least efficient way of applying CSS, and used rarely, only to fix bugs or cross-browser issues.

2. inside html page: In this implementation, style element is used. <style> is a tag (or element) just like other elements in html. This is also called internal style sheet. Rules in a <style> element apply to everything in that page, so it is more efficient. <style> elemnt is usally put in the head section of html, but browsers will obey the style even if put in the body section.

ex: <style> p { color: red; } </style>

3. in external css file: This should be the preferred way, especially if the style is applied to many pages. Above style element applies rules only to the page they are in, but this applies to all the pages, where this file in referenced.The <link> element references an external style sheet. It's put in the head section.
<link href="/styles.css" rel="style sheet">

The file styles.css would then contain the CSS code only. The same CSS file can be used for multiple pages, so browser download styles.css file only once saving on bandwidth and page rendering speed.
p { color: red; }

4. link from within existing file: The final way to include CSS is to link from within existing CSS . This requires that some CSS has already been included, via a link or a <style> element:
<style> @import url('styles.css'); </style> /* here style sheet is imported from the head section of the document.

Other CSS selectors:

So far, we saw type selectors, where the selector consists of the element name and selects a type of element for the property to be applied to. But there are many other CSS selectors as well, which are more helpful. We'll see 3 css selectors => Element name selector(we saw this above), Id selector (chooses element based on id attribute) and class selector (chooses element based on class attribute)

id selector: An ID selector chooses an element based on the id attribute. An ID selector consists of a hash character (#) followed by the id. Property is applied to element with matching id. Only one element can have a given id. So, ID selector by itself is not very helpful, as it requires adding an unique id attribute to every element that we want the property to be applied to. In case we want to use the same property to be applied to more than one element, we use class selector explained later.

ex: here we define myelement id, and apply it to p element in html file.

#myelement { => this CSS section may be in head of html file or separate css file.
color: white;
background-color: black;
}

<p id="myelement">A paragraph</p> => This is in body of html file. Here p element has an id=myelement. No other element can have this id. Above selector applies color and background-color to this p element as it has matching id. All ohter p elements are left intact, if they don't have this id.

ex:  #green {color: green} => matches any element that has an id attr with a value of green. It sets attribute "color" to green for all those matching elements.

ex:  p#para1{text-align:center} => matches any "p" element that has id with value of para1. Thus we are more specific here that the attribute can only be applied to "p" element and not to any other element.

class selector: The class selector chooses elements based on the class attribute. Unlike the id attribute, values in the class attribute don’t have to be unique throughout the document, so rules based on class selectors usually apply to a selection of elements in a document. A class selector consists of a period ( . ) followed by the class name. class selectors can be applied to multiple elements of same or different types.

ex: here we define myclass class, and apply it to multiple elements as p and b.

.myclass {
color: white;
background-color: black;
}

<p class="myclass">A paragraph</p>
<b class="myclass">Another text</b>

ex: any p tag with "right" and "center" class gets its text aligned to right and center respectively. This style is same as hwat we used in id selector above.
p.right {text-align: right}
p.center {text-align: center}

ex:  .center {text-align: center} => any tag with center class gets its text aligned to center.

Grouping CSS selectors:

Just as we saw in the example for element selector where we applied the same attribute to multiple selectors, we can do the same for id and class selectors. The main motivation behind grouping multiple selectors is to save on size of CSS file, so that it's faster to load. These are 4 ways of grouping selectors:

1. grouping with comma as a separator: Here comma is used to separate the selectors. The attribute in parenthesis is applied to all the selectors. Selectors can be mixed, i.e id and class can be mixed.

ex: In this we group multiple selectors in same, i.e attribute color is applied to all class="red"(only for p elements since it's p.red), id="sub" and element="h1"

p.red, #sub, h1 { color: #f00; }

2. grouping using space as a separator (no comma): Here we don't use comma as CSS separators. This changes the meaning to imply a parent child relationship. The first selector is considerd as parent of subsequent selector (in nested form) and attribute is applied is applied to only those elements which is a descendant of all those selectors.

ex: .red #sub {color: #f00; } => Here the attribute color is applied to elements with id="sub" whose parent class="red" (i.e "sub" is a descendant of "red"). All the selectors here have to be single word selectors, as the parser will have no way of distinguishing selector with multiple words (they will be interpreted as different selectors by the parser)

<h1 class="red"> .... <h3 id="sub"> <p> my name </p> </h3> </h1> => Here color attribute will be applied to "p" element "my name" since the elemenet's parent has both class and id matching.

3. grouping by mixing separators with and without comma: This is mixing separators with and without comma (which is a combination of two styles #1 and #2 above and perfectly valid). 

ex: p.red, #sub, div a:link {color:red;} => Here p.red, #sub and "div a:link" are 3 diff selectors to which attribute "color" is applied. Note there is no comma b/w 3rd and 4th selector. The last selector is a compound selector and the rule is applied to The link pseudo class of the anchor elements that are descendants of a division (div tag).

4. grouping by having no space or comma separator: One other variation is to have no space between multiple class or id. In that case, it means apply the css property to element which matches all the given class and id. All examples above had attributes applied to any matching selector, but here, attribute is applied only if all the selectors match.

ex: #header.callout { } => here it says select all elements which have id=header and class=callout. NOTE: there's no space

ex: #header .callout { } => here there is  a space b/w #header and .callout. This becomes same as #2 above. So, this becomes css selector grouping with parent child relationship, i.e it selects all elements whose class="callout" and which are descendants of elements with id=header.

ex: .snip#header.code.red { } => We can mix as many id/header selectors that we like. Here there are 4 selectors, and we select all elements whose class=snip and id=header and class=code and class=red. This certainly is complex way of writing, but is valid anyway. We use these complex selectors to override individual selectors as .snip, .code, etc. We might want to apply certain property on class=snip or some other proerty on class=code, but we may want to apply some other property for elements which have both classes = snip and code. In such cases, we can use this style.

Properties and values:

As can be imagined, there are tons of properties and values, and it's not possible to remember or even know all of them. You should look online if you want to learn more about valid properties for various elements. This is a good ref for CSS properties:

https://www.w3schools.com/cssref/

We will just look at few common ones:

1. Colors and lengths:  The most common values in CSS are colors and lengths.

ex: color: #0ff; => This specs text color of an element to blue. We can specify value of color in 4 ways: name (eg red, blue), #rrggbb, #rgb and rgb(r,g,b), where r=0, g=0, b=0 gives coclor black, while r=255, g=255, b=255 gives color white.

ex: border-width: 5px => This specs width to be 5 pixels.  Length can be specified in many diff units as px (pixels), pt (pints where 1 point=1/72 of inch), cm (centimeter), in (inches), % (as percentage of size of element's parent)

2. display: The display property specifies the display behavior (the type of rendering box) of an element. By default, display mode is "block" which causes line breaks before and after each element. If we set display mode to "inline", that causes elements to be displayed side by side w/o line break. There are many more display modes.

https://www.w3schools.com/CSSref/pr_class_display.asp

ex: display: none; //this display mode doesn't display the element. This is used for drop down menu that you see in websites, where it shows other elements only on hovering mouse over it.

3. float and clear:

A floated element is one that’s outside of the normal flow of text, like a cutout. The text flows around these floated elements as long as there’s room. Floats could be used to lay out entire pages. Floats rely on two CSS properties: float and clear . The float property determines which side the element floats to, whereas the clear property determines how the element behaves with respect to other floated elements. Values for float are left , right , and none ; values for clear are left , right , both , and none .

ex: float: left;

Borders and backgrounds: Two of the most common things to style are borders and backgrounds.

1. Borders: A border has a width, a type, and a color. All three can be set separately using the properties border-width (a length, a width of 0px implies no visible border), border-style (a special property for borders), and border-color (a color):

ex:

.one { => this is the long notation
border-width: 5px;
border-style: solid;
border-color: #07f;
}

.one { => We can also use the short hand notation for the above border, with the triplet: width, style and color specified on a single line with spaces in between. We can also specify these triplet separately for each side of border, i.e border-top, border-bottom, etc.

border: 5px solid #07f;

}

<div class="one"></div>

There are many other properties of border that you can specify to custmize borders further. Look in ref link above.

2. Background: This allows images as background, which can be positioned, repeated, etc. Background is used very widely in joomla and other cms.

ex: this is the long notation where we specify all background properties with values. Here background property is applied on element "one"

one {
background-color: red;

background-image: url(background.png);

background-repeat: repeat;

background-position: top;

background-attachment: scroll;
}

ex: We can also set all background properties in one declaration. More details here: https://www.w3schools.com/cssref/css3_pr_background.asp

body {background: url(background.png) 50% 50% no-repeat fixed #f00; // this is the short notation, instead of using the long one above.

<body> <h1> Hello </h1> </body> //the above declared background property is applied to <body>  element

Page layout: CSS allows us to specify where to place elements on a given page, and how to display them. We'll learn about various CSS concepts below.

CSS Box model:

The CSS box model defines the dimensions of elements as they’re laid out on the page. Each html element can be considered a box. It consists of actual content of element, then a padding, border and margin around it. The size of each element is determined by it's width and height, then a padding around it, then a border and then a margin (margin is the space b/w this element and the next one).  The padding clears the area around the element before the border is drawn. padding is transparent. Then a border is drawn. Margin clears an area around the border. The element’s width and height is either defined explicitly or determined automatically by the browser based on the content and display mode. The total size of the element is the size after adding all of padding, border and margin to the element's size, as any other element has to be outside this box. Each of padding, border and margin have a width specified for top/bottom, left/right. Either all 4 values for the 4 sides can be given or just 1, 2 or 3 values can be given, and the browser will decode it based on some rules.

This is how it looks  with margin on the outermost and element in the innermost  => [ [ [ [  margin  [ [ [  border  [ [  padding  [   element   ]  padding   ] ]    border   ] ] ]   margin   ] ] ] ]

ex:  specifying all 3 for any content inside <p> element (in short notation). Since border=0px, border is not visible at all

.p {

border: 0px solid green; //border-top etc can also be specified in this format for each side
padding: 5px;
margin: 10px;

}

ex: border-width: 5px 10px 20px 30px; => This specs top=5px, right=10px, bot=20px and left=30px. Or if all 4 sides has same size, we could write "border-width: 5px;" We could also write this as 4 separate lines as below. Similarly for margin and padding, which we can specify as margin-top, padding-bottom, etc.
border-top-width: 5px;
border-right-width: 10px;
border-bottom-width: 20px;
border-left-width: 30px;

div tag:

The <div> tag defines a division or a section in an HTML document. The div element is a generic container with no particular semantic meaning. It's commonly used in web authoring for styling purposes, in conjunction with the style and class attributes. div is the one of the most commonly used elements you will find on website's CSS file. It's used in dividing a webpage in sections as header, main content, navigation, footer, etc, each with it's own distinct style. In HTML5 there is a <header> element, as well as a <nav>, <main>, <article>, <footer> and a couple other new elements that replace these div tags.

We can apply above properties to div element as:

div {
width: 2.5em;
height: 2.5em;
margin: 0.5em;
padding: 0.5em;
border: 5px dashed black;

display: block; //However, width and height properties don’t apply to inline elements, default width and height are chosen for that element
}

Now in html body, we can have something like:

<div> text 123 </div> <div> text 756 </div>

Now, we can make a whole page layout with header, article, navigation, footer, etc. Here's a link on creating layout using 5 different methods. Look at "CSS floats" for an example:

https://www.w3schools.com/html/html_layout.asp

-------

to define different styles for same type of html element.

this ..

this ..

styles can also be applied to html elements with particular attributes.
ex:
input[type=text] {background-color: blue}