{"id":4577,"date":"2016-10-06T06:20:23","date_gmt":"2016-10-06T06:20:23","guid":{"rendered":"http:\/\/a1webdesignteam.com\/blog\/?p=4577"},"modified":"2016-10-06T06:20:23","modified_gmt":"2016-10-06T06:20:23","slug":"learning-css3","status":"publish","type":"post","link":"https:\/\/a1webdesignteam.com\/blog\/learning-css3\/","title":{"rendered":"Learning CSS3"},"content":{"rendered":"

CSS-3<\/strong> is the latest version of CSS<\/strong>, the stylesheet language<\/strong> of web with new selectors<\/strong>, shadows<\/strong>, multiple backgrounds<\/strong>, gradients<\/strong>, transition<\/strong>, animations<\/strong>, embedded fonts<\/strong> and responsive layouts.<\/strong><\/p>\n

CSS3 Features<\/h2>\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
New Features<\/th>\nUses<\/th>\n<\/tr>\n<\/thead>\n
New Selectors<\/strong><\/td>\nBetter Selections of HTML Elements<\/td>\n<\/tr>\n
Shadows Effect<\/strong><\/td>\nBox shadow<\/strong> and text shadow<\/strong> for shadow effects<\/td>\n<\/tr>\n
Rounded Corners<\/strong><\/td>\nEasily round the corners of images and block elements.<\/td>\n<\/tr>\n
Gradients<\/strong><\/td>\nLinear<\/strong>, Radial<\/strong> and Repeating gradients<\/strong> effects<\/td>\n<\/tr>\n
Opacity<\/strong><\/td>\nReduce opacity of Elements and Background colors using rbga colors<\/strong>.<\/td>\n<\/tr>\n
Transitions<\/strong><\/td>\nHover and Focus element with time and timing functions.<\/td>\n<\/tr>\n
Transformations<\/strong><\/td>\nRotate<\/strong>, Scale<\/strong>, Skew<\/strong> and Translate<\/strong> any object<\/td>\n<\/tr>\n
Animations<\/strong><\/td>\nAnimate<\/strong> any object without using flash.<\/td>\n<\/tr>\n
Multi Column layout<\/strong><\/td>\nCreate multiple columns layouts<\/strong>.<\/td>\n<\/tr>\n
@font face<\/strong><\/td>\nEmbedded various fonts family<\/td>\n<\/tr>\n
@media<\/strong><\/td>\nCondition based CSS to create Responsive layouts<\/strong>.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n

CSS and CSS-3 Selectors<\/h2>\n

Initially CSS use tag<\/strong>, class<\/strong> and id selectors<\/strong>.
\nHowever CSS 2.1<\/strong> adds pseudo-elements<\/strong>, pseudo-classes<\/strong>, and combinators<\/strong>.
\nAnd now With CSS3, we can target almost any element on the page with a wide range of selectors<\/strong><\/p>\n

 <\/p>\n

Here we will discuss all CSS and CSS3 selectors<\/strong>.<\/p>\n

Rational Selectors<\/h2>\n
\n

Rational Selectors <\/strong> targets elements based on their relationship with another element.<\/p>\n\n\n\n\n\n\n\n
Selector<\/th>\nCSS Code<\/th>\nUse<\/th>\nCSS Level<\/th>\n<\/tr>\n
\n

Descendant Selector<\/h3>\n<\/td>\n

div p{ }<\/td>\nTarget all p tags that are descendent<\/strong>(child, grandchild, great grandchild, and so on)<\/em> of div tag.<\/td>\n1<\/td>\n<\/tr>\n
\n

Child Selector<\/h3>\n<\/td>\n

div>p{ }<\/td>\nThis selector matches only direct child<\/strong> of element<\/td>\n2<\/td>\n<\/tr>\n
\n

Adjacent Sibling<\/h3>\n<\/td>\n

h4+p{ }<\/td>\nThis selector matches p tag next to h4 and both sharing same parent<\/strong>. That Means p should comes directly after<\/strong> h4.<\/td>\n2<\/td>\n<\/tr>\n
\n

General Sibling<\/h3>\n<\/td>\n

h3~p{ }<\/td>\nThis selector matches all P elements exactly after h3 element.<\/td>\n3<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n

General Sibling<\/strong> i.e. ( A~B<\/b>) selector will only in HTML-5 Supported Browsers. IE 8 and lesser doesn’t support this selector.<\/p>\n<\/div>\n<\/div>\n

\n

Attribute Selectors<\/h2>\n
\n

Attribute Selectors <\/strong>were introduced in css2. They targets matching elements based on their attributes<\/strong>.<\/p>\n\n\n\n\n\n\n\n\n\n\n
CSS Code<\/th>\nUse<\/th>\nCSS Level<\/th>\n<\/tr>\n
\n

E[attr]{}<\/h4>\n<\/td>\n

Target only E Element or Elements having exact case-insensitive attribute value. For exp input with disabled attribute,
\ninput[ disabled]{ cursor:not-allowed }<\/span><\/td>\n		2<\/td>\n<\/tr>\n
\n

E[attr=”value”]{}<\/h4>\n<\/td>\n

This selector matches only Element with exact attribute and value. For exp, input type checkbox only,
\ninput[ type=”checkbox” ]<\/span><\/td>\n		2<\/td>\n<\/tr>\n
\n

E[attr~=”foo”]{}<\/h4>\n<\/td>\n

This selector matches only Elements with exact Attribute with multiple values separated by white-space, and one of the value is exactly equal to “foo”.<\/td>\n2<\/td>\n<\/tr>\n
\n

E[attr|=”foo”]{}<\/h4>\n<\/td>\n

This selector matches only Elements with exact Attribute with value separated by hyphen (–<\/b>) , and one of the value is exactly equal to “foo”.<\/td>\n2<\/td>\n<\/tr>\n
\n

E[attr^=”foo”]{}<\/h4>\n<\/td>\n

This selector matches only element E with attribute value starting exactly with foo. For exp, div having class name starting with “col”,
\ndiv[ class^=”col” ]<\/span><\/td>\n		3<\/td>\n<\/tr>\n
\n

E[attr$=”value”]{}<\/h4>\n<\/td>\n

This selector matches only element E with attribute value ending exactly with foo. For exp, div having class name ending with “wrap”,
\ndiv[ class$=”wrap” ]<\/span><\/td>\n		3<\/td>\n<\/tr>\n
\n

E[attr*=”value”]{}<\/h4>\n<\/td>\n

This selector matches only element E with atttribute value contains the substring “foo”. For exp, div having class name with substring “md”,
\ndiv[ class*=”md” ]<\/span><\/td>\n		3<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n

E[attr^=foo”]{}<\/strong>, E[attr$=foo”]{}<\/strong> and E[attr*=foo”]{}<\/strong> attribute selectors<\/strong> will only in HTML-5 Supported Browsers. IE 8 and lesser doesn’t support these selectors.<\/p>\n<\/div>\n<\/div>\n

\n

Pseudo Selectors<\/h2>\n

CSS Pseudo Selectors<\/strong> are classified in Pseudo Class<\/strong> and pseudo elements<\/strong>.<\/p>\n

\n

Since CSS1<\/strong> & CSS2<\/strong>, we are using Pseudo Selectors<\/strong> .<\/p>\n\n\n\n\n\n\n
CSS Code<\/th>\nUse<\/th>\nCSS Level<\/th>\n<\/tr>\n
\n

E:link{}<\/h4>\n<\/td>\n

E (Anchor) element with a hyperlink, and which is not visited<\/strong> yet.<\/td>\n1<\/td>\n<\/tr>\n
\n

E:visited{}<\/h4>\n<\/td>\n

E (Anchor) element with a hyperlink, and which is already visited<\/strong> as per browsers history.<\/td>\n1<\/td>\n<\/tr>\n
\n

E:hover{}<\/h4>\n<\/td>\n

Change style on mouseover<\/strong> state of E element. Exp<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n\n\n\n\n\n
1 and 2<\/td>\n<\/tr>\n
\n

E:focus{}<\/h4>\n<\/td>\n

Change style on focus<\/strong> state of E element. Generally All Form Controls supports focus state. <\/td>\n1 and 2<\/td>\n<\/tr>\n
\n

E:active{}<\/h4>\n<\/td>\n

Change style on mouse key down<\/strong> state of E element. <button><\/strong>, <input type=”submit”><\/strong>, <button type=”reset”><\/strong> supports this. Exp<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
1 and 2<\/td>\n<\/tr>\n
\n

:enable{}<\/h4>\n<\/td>\n

A user interface element which is enable. exp <\/td>\n3<\/td>\n<\/tr>\n
\n

:disable{}<\/h4>\n<\/td>\n

A user interface element that is disabled. exp <\/p>\n
\n
\r\n<style>\r\n    input[ type=\"text\"]:disabled{ cursor:not-allowed }\r\n<\/style>\r\n\r\n <label><input type=\"text\" value=\"Disabled Field\" disabled>:Enter Country <\/label>   \r\n                         <\/code><\/pre>\n<\/div>\n<\/td>\n
3<\/td>\n<\/tr>\n
\n

:read-only{}<\/h4>\n<\/td>\n

A user interface element that is disabled. exp <\/p>\n
\n
\r\n<style>\r\n    input[ type=\"text\"]:readonly{ cursor:not-allowed }\r\n<\/style>\r\n\r\n <label><input type=\"text\" value=\"Read Only Field\" readonly>:Enter Country <\/label>   \r\n                         <\/code><\/pre>\n<\/div>\n<\/td>\n
3<\/td>\n<\/tr>\n
\n

E:checked{}<\/h4>\n<\/td>\n

For Checkbox and radio buttons that are checked.
\nexp<\/p>\n
3<\/td>\n<\/tr>\n
\n

:valid{}<\/h4>\n<\/td>\n

Applicable to elements that are valid<\/strong>, based on their type and pattern. For exp<\/p>\n
3<\/td>\n<\/tr>\n
\n

:invalid{}<\/h4>\n<\/td>\n

Applicable to elements that are invalid<\/strong>, based on their type and pattern. For exp<\/p>\n
3<\/td>\n<\/tr>\n
\n

:required{}<\/h4>\n<\/td>\n

Applicable to input elements havingrequired<\/strong> attribute. For exp<\/p>\n
3<\/td>\n<\/tr>\n
\n

:optional{}<\/h4>\n<\/td>\n

Applicable to input elements that do not have required<\/strong> attribute. For exp<\/p>\n
3<\/td>\n<\/tr>\n
\n

:in-range{}<\/h4>\n<\/td>\n

Applicable to range<\/strong> and input type number<\/strong> element when the value is in-range<\/strong> . For exp<\/p>\n
\n
3<\/td>\n<\/tr>\n
\n

:out-of-range{}<\/h4>\n<\/td>\n

Applicable to range<\/strong> and input type number<\/strong> element when the value is out-of-range<\/strong> . For exp<\/p>\n
\n
3<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n

Browsers Compatibility<\/h3>\n
\n

:hover<\/strong> is not supported in IE-6<\/strong> and below. IE-7 and below doesn’t supports :focus<\/strong>. However all Level 1 and Level 2 selectors are supported in IE-8 except(:checked, :enabled, :disabled, & :target<\/em>). Good News is tha- IE-9<\/strong> and above supports all CSS Level selectors.<\/p>\n<\/div>\n

\n

Structural Pseudo-classes<\/h2>\n
\n

Using Structural Pseudo-classes<\/strong>, we can target any element based on their position<\/strong> .<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
CSS Code<\/th>\nUse<\/th>\nCSS Level<\/th>\n<\/tr>\n
E:root<\/td>\nan E Element, root of the document.<\/td>\n2<\/td>\n<\/tr>\n
:first-child<\/td>\nTargets only first child<\/strong> Element of parent. For Exp<\/p>\n
\n
    \n
  • List 1<\/li>\n
  • List 2<\/li>\n
  • List 3<\/li>\n<\/ul>\n
    \r\n<style>\r\n ul li:first-child{ color:#a94442}\r\n<\/style>\r\n\r\n <ul>\r\n     <li>List 1<\/li>\r\n     <li>List 2<\/li>\r\n     <li>List 3<\/li>\r\n <\/ul>       \r\n                        <\/code><\/pre>\n<\/div>\n<\/td>\n
2<\/td>\n<\/tr>\n
:first-line<\/td>\nTargets only first line<\/strong> of Element. For Exp,<\/p>\n

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque ducimus delectus recusandae nisi dolore tenetur doloremque voluptas, ad inventore earum quos harum illo mollitia magnam velit cum asperiores. Earum, voluptatem.<\/small><\/p>\n

\n
\r\n<style>\r\n p:first-line{ color:red}\r\n<\/style>\r\n\r\n<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident suscipit magnam ad architecto magni optio alias quibusdam aliquam incidunt eligendi tempore quam nobis nisi non, similique minus, nihil deleniti neque.\r\n<\/p>              \r\n                        <\/code><\/pre>\n<\/div>\n<\/td>\n
1<\/td>\n<\/tr>\n
:first-letter<\/td>\ntargets only first letter<\/strong> of Element, For exp,<\/p>\n

Lorem ipsum dolor sit amet.<\/p>\n

\n
\r\n<style>\r\n p:first-letter{ color:red; font-size:2em}\r\n<\/style>\r\n\r\n<p>Lorem ipsum dolor sit amet.\r\n<\/p>              \r\n                        <\/code><\/pre>\n<\/div>\n<\/td>\n
1<\/td>\n<\/tr>\n
:last-child<\/td>\nTargets only last child<\/strong> Element of parent. For Exp<\/p>\n
\n
    \n
  • List 1<\/li>\n
  • List 2<\/li>\n
  • List 3<\/li>\n<\/ul>\n
    \r\n<style>\r\n ul li:last-child{ color:#a94442}\r\n<\/style>\r\n\r\n <ul>\r\n     <li>List 1<\/li>\r\n     <li>List 2<\/li>\r\n     <li>List 3<\/li>\r\n <\/ul>       \r\n                        <\/code><\/pre>\n<\/div>\n<\/td>\n
3<\/td>\n<\/tr>\n
:nth-child(n)<\/td>\nTargets only nth child<\/strong> of parent element. n is a numeric value. For Exp<\/p>\n
\n
    \n
  • List 1<\/li>\n
  • List 2<\/li>\n
  • List 3<\/li>\n
  • List 4<\/li>\n
  • List 5<\/li>\n<\/ul>\n
    \r\n<style>\r\n ul li:nth-child(2){ color:#a94442}\r\n ul li:nth-child(5){ color:#31708f}\r\n<\/style>\r\n\r\n <ul>\r\n     <li>List 1<\/li>\r\n     <li>List 2<\/li>\r\n     <li>List 3<\/li>\r\n     <li>List 4<\/li>\r\n     <li>List 5<\/li>\r\n <\/ul>       \r\n                        <\/code><\/pre>\n<\/div>\n<\/td>\n
3<\/td>\n<\/tr>\n
:nth-child(odd)<\/td>\nTargets only odd children<\/strong> of parent element. n is a numeric value. For Exp<\/p>\n
\n
    \n
  • List 1<\/li>\n
  • List 2<\/li>\n
  • List 3<\/li>\n
  • List 4<\/li>\n<\/ul>\n
    \r\n<style>\r\n ul li:nth-child(odd){ color:#a94442}\r\n<\/style>\r\n\r\n <ul>\r\n     <li>List 1<\/li>\r\n     <li>List 2<\/li>\r\n     <li>List 3<\/li>\r\n     <li>List 4<\/li>\r\n <\/ul>       \r\n                        <\/code><\/pre>\n<\/div>\n<\/td>\n
3<\/td>\n<\/tr>\n
:nth-child(even)<\/td>\nTargets only even children<\/strong> of parent element, ie 2,4,6, etc. For Exp<\/p>\n
\n
    \n
  • List 1<\/li>\n
  • List 2<\/li>\n
  • List 3<\/li>\n
  • List 4<\/li>\n<\/ul>\n
    \r\n<style>\r\n ul li:nth-child(even){ color:#a94442}\r\n<\/style>\r\n\r\n <ul>\r\n     <li>List 1<\/li>\r\n     <li>List 2<\/li>\r\n     <li>List 3<\/li>\r\n     <li>List 4<\/li>\r\n <\/ul>       \r\n                        <\/code><\/pre>\n<\/div>\n<\/td>\n
3<\/td>\n<\/tr>\n
:nth-of-type(n)<\/td>\nTargets only nth sibling<\/strong> of type n, starting from first. For Exp<\/p>\n
\n
    \n
  • List 1<\/li>\n
  • List 2<\/li>\n
  • List 3<\/li>\n
  • List 4<\/li>\n
  • List 5<\/li>\n
  • List 6<\/li>\n
  • List 7<\/li>\n<\/ul>\n
    \r\n<style>\r\n ul li:nth-of-type(3n+1){ color:#a94442}\r\n<\/style>\r\n\r\n <ul>\r\n     <li>List 1<\/li>\r\n     <li>List 2<\/li>\r\n     <li>List 3<\/li>\r\n     <li>List 4<\/li>\r\n     <li>List 5<\/li>\r\n     <li>List 6<\/li>\r\n     <li>List 7<\/li>\r\n <\/ul>       \r\n                        <\/code><\/pre>\n<\/div>\n<\/td>\n
3<\/td>\n<\/tr>\n
:nth-last-of-type(n)<\/td>\nTargets only nth sibling<\/strong> of element, starting from last. For Exp<\/p>\n
\n
    \n
  • List 1<\/li>\n
  • List 2<\/li>\n
  • List 3<\/li>\n
  • List 4<\/li>\n
  • List 5<\/li>\n
  • List 6<\/li>\n
  • List 7<\/li>\n<\/ul>\n
    \r\n<style>\r\n ul li:nth-last-of-type(3n){ color:#a94442}\r\n<\/style>\r\n\r\n <ul>\r\n     <li>List 1<\/li>\r\n     <li>List 2<\/li>\r\n     <li>List 3<\/li>\r\n     <li>List 4<\/li>\r\n     <li>List 5<\/li>\r\n     <li>List 6<\/li>\r\n     <li>List 7<\/li>\r\n <\/ul>       \r\n                        <\/code><\/pre>\n<\/div>\n<\/td>\n
3<\/td>\n<\/tr>\n
:empty<\/td>\nAn element having no child<\/strong> element. For Exp<\/p>\n
\n

This is a para with content.<\/p>\n

Another para with content.<\/p>\n

\r\n<style>\r\n p:empty{ border:solid 2px red}\r\n<\/style>\r\n\r\n<p>This is a para with content<\/p>                            \r\n<p><\/p>                            \r\n<p>Another para withh content.<\/p>                            \r\n<p><\/p>                            \r\n                         \r\n                        <\/code><\/pre>\n<\/div>\n<\/td>\n
3<\/td>\n<\/tr>\n
:lang()<\/td>\nAn element having lang attribute<\/strong> with given value. For Exp<\/p>\n
\n

Hello frind, how do you do?.<\/p>\n

Hola amigo, \u00bfc\u00f3mo se hace?<\/i><\/p>\n

\r\n<style>\r\n p:lang(es){ color:red; font-style:italic}\r\n<\/style>\r\n\r\n<p>This is a para with content<\/p>                            \r\n<p lang=\"es\">Hola amigo, \u00bfc\u00f3mo se hace?<\/p>                            \r\n                    <\/code><\/pre>\n<\/div>\n<\/td>\n
3<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n

:first-child<\/strong>, :first-letter<\/strong>, :first-line<\/strong> will be supported in IE 7 and 8. But Level 3<\/strong> selectors will supported only in IE 9 and above browsers.<\/p>\n<\/div>\n

\n

CSS-3<\/strong> opacity<\/strong> sets the opaqueness<\/strong> of the element. The value of CSS3 opacity<\/strong> is a floating value, between 0 and 1.
\n0 defines the element as fully transparent<\/strong>( same like visibility:hidden<\/i>), whereas an opacity value 1 means the element is fully opaque( default<\/i>).<\/p>\n

\n
\n

CSS3 Opacity<\/h2>\n<\/div>\n
\n

Possible values of opacity<\/p>\n<\/div>\n\n\n\n\n\n\n
Opacity<\/th>\nvalues<\/th>\n<\/tr>\n
1<\/td>\ndefault opacity of all elements.<\/td>\n<\/tr>\n
0<\/td>\nOpacity 0 shows element as fully transparent<\/strong>. Same like (visibility:hidden<\/i>)<\/td>\n<\/tr>\n
0.5<\/td>\nOpacity 0.5 shows element as half transparent<\/strong>. Thus we can see background colors and images.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n

<\/ins><\/p>\n

How to use opacity<\/h2>\n

Opacity values are always floating values<\/strong>, minimum value is 0, and maximum value is 1.<\/p>\n

\n
\n
            \r\n <style>           \r\n    .img-1{opacity:1}\t\t\t\t\r\n    .img-2{opacity:0.8}\t\t\t\t\r\n    .img-3{opacity:0.5}\t\t\t\t\r\n    .img-4{opacity:0.2}\t\t\t\t\r\n<\/style>\r\n <div>     \r\n     <img class=\"img-1\" src=\"images\/logo.png\" alt=\"Tech Altum\"> \r\n     <img class=\"img-2\" src=\"images\/logo.png\" alt=\"Tech Altum\"> \r\n     <img class=\"img-3\" src=\"images\/logo.png\" alt=\"Tech Altum\"> \r\n     <img class=\"img-4\" src=\"images\/logo.png\" alt=\"Tech Altum\"> \r\n                   \t\r\n <\/div>                   \t\r\n           \t\t\r\n            <\/code>\r\n<\/pre>\n
\n
\"tech<\/p>\n
Opacity:1<\/p>\n<\/div>\n
\"tech<\/p>\n
Opacity:0.8<\/p>\n<\/div>\n
\"tech<\/p>\n
Opacity:0.5<\/p>\n<\/div>\n
\"tech<\/p>\n
Opacity:0.2<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
<\/ins><\/p>\n
Opacity in IE8 and below<\/h2>\n
Internet Explorer 8 and below doesn’t support opacity. But using css filter property<\/strong>, opacity can works even on old IE versions like IE 8, 7 , 6 and 5.<\/p>\n
\n
Opacity in Internet Explorer IE8 and below<\/h3>\n
\r\n<style>\r\n.box{ \r\n    opacity:0.5;                      \/*latest Browsers*\/\r\n    filter: alpha(opacity=50)         \/*IE 5-7*\/\r\n    -ms-filter: alpha(opacity=50)     \/*IE 8*\/\r\n}\r\n<\/style>\r\n                                    \r\n                  \r\n              <\/code><\/pre>\n<\/div>\n
\n
\n
Note: opacity is supported in html5 based browsers only. IE 8 and below doesn’t support opacity. For old IE versions, use filter:alpha(opacity=n), where n is a number between 0-100.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
CSS-3 is the latest version of CSS, the stylesheet language of web with new selectors, shadows, multiple backgrounds, gradients, transition, animations, embedded fonts and responsive layouts. CSS3 Features New Features Uses New Selectors Better Selections of HTML Elements Shadows Effect Box shadow and text shadow for shadow effects Rounded Corners Easily round the corners of […]<\/p>\n","protected":false},"author":1,"featured_media":4578,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0},"categories":[5],"tags":[122],"_links":{"self":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts\/4577"}],"collection":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/comments?post=4577"}],"version-history":[{"count":0,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts\/4577\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/media\/4578"}],"wp:attachment":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/media?parent=4577"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/categories?post=4577"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/tags?post=4577"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}